/* =========================================================
   UFS Chefverse Design System — Colors & Typography
   Source: Unilever Food Solutions brand book + Chefverse tokens
   ========================================================= */

/* Unilever Shilling — upright weights provided by UFS */
@font-face {
  font-family: "Unilever Shilling";
  src: url("../fonts/UnileverShilling-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Unilever Shilling";
  src: url("../fonts/UnileverShilling-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Unilever Shilling";
  src: url("../fonts/UnileverShilling-Medium.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Unilever Shilling";
  src: url("../fonts/UnileverShilling-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
html, body, * {
  font-synthesis: none;
  -webkit-font-synthesis: none;
  font-style: normal !important;
}

:root {
  /* ───── Brand colors ───── */
  --ufs-orange: #ff5a00;        /* Primary, locked */
  --ufs-orange-hover: #e65100;  /* Light-mode hover (darker) */
  --ufs-orange-soft: #fff0e8;   /* Tint surface */
  --ufs-orange-warm: #cc4400;   /* Deep orange (cover/footer) */
  --ufs-orange-700: #e65100;
  --ufs-orange-800: #cc4400;
  --squid-ink: #221d37;         /* Primary dark */
  --squid-ink-lifted: #2a2545;  /* Card on dark */
  --squid-ink-deeper: #10002d;  /* Culinary Roots secondary */
  --salt: #ffffff;
  --smoke: #94889d;             /* Muted text */
  --mushroom: #cbc5c7;          /* Borders */
  --mushroom-50: #f5f3f4;       /* Muted bg */
  --mushroom-100: #ece9ea;      /* Secondary bg */
  --mushroom-200: #dcd6d8;      /* Secondary hover */
  --canvas: #fafaf9;            /* Page background */
  --aubergine: #5b3657;

  /* Future Menus pillars */
  --pillar-borderless-primary: #f9b000;
  --pillar-borderless-secondary: #ed6c00;
  --pillar-streetfood-primary: #dc4d8b;
  --pillar-streetfood-secondary: #b3346d;
  --pillar-roots-primary: #00aeba;
  --pillar-roots-secondary: #10002d;
  --pillar-diner-primary: #a1b83b;
  --pillar-diner-secondary: #679641;

  /* Chart palette */
  --chart-1: #ff5a00;
  --chart-2: #5b3657;
  --chart-3: #dc4d8b;
  --chart-4: #00aeba;
  --chart-5: #a1b83b;

  /* ───── Semantic tokens (light) ───── */
  --background: var(--salt);
  --foreground: var(--squid-ink);
  --card: var(--salt);
  --card-foreground: var(--squid-ink);
  --popover: var(--salt);
  --popover-foreground: var(--squid-ink);
  --primary: var(--ufs-orange);
  --primary-foreground: var(--salt);
  --primary-hover: var(--ufs-orange-hover);
  --secondary: var(--mushroom-100);
  --secondary-foreground: var(--squid-ink);
  --secondary-hover: var(--mushroom-200);
  --muted: var(--mushroom-50);
  --muted-foreground: var(--smoke);
  --accent: var(--ufs-orange-soft);
  --accent-foreground: var(--squid-ink);
  --accent-hover: #ffe2d4;
  --destructive: #c0341d;
  --destructive-foreground: var(--salt);
  --destructive-hover: #a02a17;
  --border: var(--mushroom);
  --input: var(--mushroom);
  --ring: var(--ufs-orange);
  --canvas-bg: var(--canvas);

  /* Sidebar */
  --sidebar-background: var(--salt);
  --sidebar-foreground: var(--squid-ink);
  --sidebar-primary: var(--ufs-orange);
  --sidebar-primary-foreground: var(--salt);
  --sidebar-accent: var(--ufs-orange-soft);
  --sidebar-accent-foreground: var(--squid-ink);
  --sidebar-border: var(--mushroom);
  --sidebar-ring: var(--ufs-orange);

  /* ───── Type ───── */
  --font-sans: "Unilever Shilling", -apple-system, system-ui, sans-serif;
  --font-display: "Unilever Shilling", -apple-system, system-ui, sans-serif;
  --font-mono: "Menlo", ui-monospace, monospace;

  /* Type scale (matches Figma Typography frame) */
  --fs-h1: 48px;        --lh-h1: 48px;     --ls-h1: -0.012em;
  --fs-h2: 30px;        --lh-h2: 36px;     --ls-h2: -0.007em;
  --fs-h3: 24px;        --lh-h3: 32px;     --ls-h3: -0.006em;
  --fs-h4: 20px;        --lh-h4: 28px;     --ls-h4: -0.005em;
  --fs-lead: 20px;      --lh-lead: 28px;
  --fs-large: 18px;     --lh-large: 28px;
  --fs-body: 16px;      --lh-body: 28px;
  --fs-small: 14px;     --lh-small: 14px;
  --fs-subtle: 14px;    --lh-subtle: 20px;
  --fs-eyebrow: 11px;   --lh-eyebrow: 13px; --ls-eyebrow: 0.14em;

  /* ───── Spacing & geometry ───── */
  --radius-sm: 4px;
  --radius: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-pill: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow:    0 1px 3px rgba(0,0,0,0.09), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(30,41,59,0.10);
  --shadow-lg: 0 10px 24px rgba(15,23,42,0.15);

  --hairline: 1px solid var(--border);
}

[data-theme="dark-disabled"] {
  --background: var(--squid-ink);
  --foreground: var(--salt);
  --card: var(--squid-ink-lifted);
  --card-foreground: var(--salt);
  --popover: var(--squid-ink-lifted);
  --popover-foreground: var(--salt);
  --primary: var(--ufs-orange);
  --primary-foreground: var(--salt);
  --primary-hover: #ff7a2e;
  --secondary: #3f3859;
  --secondary-foreground: var(--salt);
  --secondary-hover: #4a4366;
  --muted: #332d4a;
  --muted-foreground: var(--smoke);
  --accent: #4a2a1c;
  --accent-foreground: var(--salt);
  --accent-hover: #5e3624;
  --destructive: #ff6b4a;
  --destructive-foreground: var(--salt);
  --destructive-hover: #ff8568;
  --border: #3a3450;
  --input: #3a3450;
  --canvas-bg: var(--squid-ink);

  --sidebar-background: var(--squid-ink);
  --sidebar-foreground: var(--salt);
  --sidebar-accent: #4a2a1c;
  --sidebar-accent-foreground: var(--salt);
  --sidebar-border: #3a3450;
}

/* ───── Element defaults ───── */
html, body {
  font-family: var(--font-sans);
  font-style: normal;
  color: var(--foreground);
  background: var(--background);
  -webkit-font-smoothing: antialiased;
}

h1, .h1 {
  font: 700 var(--fs-h1)/var(--lh-h1) var(--font-sans);
  letter-spacing: var(--ls-h1);
  color: var(--foreground);
  margin: 0;
}
h2, .h2 {
  font: 700 var(--fs-h2)/var(--lh-h2) var(--font-sans);
  letter-spacing: var(--ls-h2);
  color: var(--foreground);
  margin: 0;
}
h3, .h3 {
  font: 700 var(--fs-h3)/var(--lh-h3) var(--font-sans);
  letter-spacing: var(--ls-h3);
  color: var(--foreground);
  margin: 0;
}
h4, .h4 {
  font: 700 var(--fs-h4)/var(--lh-h4) var(--font-sans);
  letter-spacing: var(--ls-h4);
  color: var(--foreground);
  margin: 0;
}
p, .p {
  font: 400 var(--fs-body)/var(--lh-body) var(--font-sans);
  color: var(--foreground);
  margin: 0;
}
.lead {
  font: 400 var(--fs-lead)/var(--lh-lead) var(--font-sans);
  color: var(--foreground);
}
.large { font: 700 var(--fs-large)/var(--lh-large) var(--font-sans); }
.small { font: 500 var(--fs-small)/var(--lh-small) var(--font-sans); }
.subtle { font: 400 var(--fs-subtle)/var(--lh-subtle) var(--font-sans); color: var(--muted-foreground); }
.eyebrow {
  font: 700 var(--fs-eyebrow)/var(--lh-eyebrow) var(--font-sans);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ufs-orange);
}
.display-italic {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;
}
code, .inline-code {
  font: 600 13.6px/1.4 var(--font-mono);
  background: #f1f5f9;
  color: var(--foreground);
  padding: 2px 6px;
  border-radius: var(--radius);
}
blockquote {
  border-left: 2px solid var(--border);
  padding-left: 16px;
  font-style: normal;
  color: var(--foreground);
  margin: 0;
}