/* ============================================================
   Born Chef — Design Tokens
   Single source of truth. No hardcoded values elsewhere.
   Mapped directly to the Brand Book (Sept 2025 refresh).
   ============================================================ */

:root {
  /* ------------------------------------------------------------
     Color — values verbatim from Brand Book slide 9.
     Recommended balance: 60% navy / 25% white / 10% ember / 5% gold.
     ------------------------------------------------------------ */
  --bc-navy:           #092C3A; /* Primary — Born Navy */
  --bc-navy-deep:      #061E27; /* Derived darker shade, for layered surfaces */
  --bc-navy-soft:      #15445A; /* Derived softer shade, for hover/raised */
  --bc-teal:           #1F6F62; /* Complementary — Market Teal */
  --bc-olive:          #6B7430; /* Olive Herb */
  --bc-gold:           #C9872A; /* Accent — Culinary Gold */
  --bc-flame:          #E95A1B; /* Flame Orange */
  --bc-ember:          #C93A18; /* Ember Red — primary CTA / rules */
  --bc-ember-deep:     #9B2A10; /* Derived hover state */
  --bc-sand:           #E6C9A5; /* Neutral — Warm Sand */
  --bc-cream:          #F6EFE3; /* Derived lighter cream, page warmth */
  --bc-paper:          #FBF7F0; /* Derived warm white for surfaces */
  --bc-white:          #FFFFFF;

  /* ------------------------------------------------------------
     Flavor palette — the color-coded dough system.
     These are PLACEHOLDER pairings drawn from the global tour
     in the brand story (Galicia → Argentina → Chile → Colombia →
     Philippines → Brazil → Jamaica). Each color is derived from
     a signature ingredient of the cuisine it represents.
     Final flavor list and dough colors come from Dom.
     ------------------------------------------------------------ */
  --flavor-argentina:  #B23A2E; /* red — Spiced Heritage Beef & Mirepoix */
  --flavor-colombia:   #D9A53A; /* curry gold — Curried Vegetable Samosa */
  --flavor-galicia:    #6E8C3D; /* green — Fondant Potato & Aged Cheese */
  --flavor-philippines:#D86E2E; /* orange — Spiced Buffalo Chicken & Corn */
  --flavor-brazil:     #6E1B3A; /* beet burgundy — Duck Confit in Beet Pastry */
  --flavor-jamaica:    #FFFFFF; /* white — Birria Beef */
  --flavor-sicily:     #E3DAC9; /* dalmatian (bone + poppy seed dots) — Mango & Pineapple Cheesecake */

  /* Semantic tokens — components reference these, not raw colors */
  --color-bg:              var(--bc-paper);
  --color-bg-elevated:     var(--bc-white);
  --color-bg-inverted:     var(--bc-navy);
  --color-bg-inverted-deep:var(--bc-navy-deep);

  --color-ink:             var(--bc-navy);
  --color-ink-soft:        #2A4655;      /* Derived muted navy for secondary text */
  --color-ink-muted:       #5A6F7A;      /* Derived tertiary text */
  --color-ink-inverted:    var(--bc-paper);
  --color-ink-inverted-muted: #BFCBD2;   /* Derived: muted text on navy */

  --color-rule:            var(--bc-ember);
  --color-rule-soft:       rgba(201, 58, 24, 0.35);
  --color-rule-on-dark:    var(--bc-flame);

  --color-accent:          var(--bc-ember);
  --color-accent-hover:    var(--bc-ember-deep);
  --color-accent-on-dark:  var(--bc-flame);
  --color-gold:            var(--bc-gold);

  --color-focus:           var(--bc-flame);

  /* ------------------------------------------------------------
     Typography
     Wordmark/Hero/H1-H2: Georgia (per brand book).
     H3-H6 + Body + Utility: Open Sans (per brand book).
     System fallbacks chosen to degrade gracefully without webfonts.
     ------------------------------------------------------------ */
  --font-serif: Georgia, "Times New Roman", "Iowan Old Style", "Apple Garamond", Times, serif;
  --font-sans:  "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Modular scale — 1.250 (major third). Capped at clamp() for fluid sizing. */
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-56: 3.5rem;
  --fs-72: 4.5rem;
  --fs-96: 6rem;

  /* Fluid display sizes used by hero + section heads */
  --fs-display-xl: clamp(3.5rem, 8.5vw + 1rem, 8rem);
  --fs-display-lg: clamp(2.5rem, 5.5vw + 1rem, 5rem);
  --fs-display-md: clamp(1.75rem, 2.8vw + 1rem, 3rem);

  /* Line heights */
  --lh-tight:   1.02;
  --lh-display: 1.08;
  --lh-snug:    1.2;
  --lh-body:    1.6;
  --lh-loose:   1.75;

  /* Letter spacing — brand wordmark/labels use wide tracking ("all caps, wide tracking") */
  --tracking-tight: -0.015em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.16em;
  --tracking-widest: 0.28em;

  /* Font weights — Open Sans uses Regular for body, Bold for utility/heads */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  /* ------------------------------------------------------------
     Spacing — 4px base. Use sparingly; the brand favors restraint.
     ------------------------------------------------------------ */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  3rem;
  --sp-8:  4rem;
  --sp-9:  6rem;
  --sp-10: 8rem;
  --sp-11: 12rem;

  /* Page rhythm */
  --section-y:       clamp(4rem, 9vw, 8rem);
  --section-y-tight: clamp(2.5rem, 5vw, 4.5rem);

  /* ------------------------------------------------------------
     Layout
     ------------------------------------------------------------ */
  --container-max:  84rem;   /* 1344px — generous editorial width */
  --container-narrow: 56rem; /* 896px — for prose blocks */
  --gutter:         clamp(1.25rem, 3vw, 2.5rem);
  --rail-offset:    clamp(1.25rem, 4vw, 3.5rem); /* vertical rail position */

  /* ------------------------------------------------------------
     Radii — restrained. Brand mark is geometric; UI follows.
     ------------------------------------------------------------ */
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 8px;
  --radius-pill: 999px;

  /* ------------------------------------------------------------
     Shadows — brand book says "no shadows/glows" on the mark.
     We still need *very* subtle shadows on UI surfaces.
     ------------------------------------------------------------ */
  --shadow-none: none;
  --shadow-soft: 0 1px 2px rgba(9, 44, 58, 0.06), 0 8px 24px rgba(9, 44, 58, 0.06);
  --shadow-lift: 0 2px 6px rgba(9, 44, 58, 0.08), 0 18px 40px rgba(9, 44, 58, 0.10);

  /* ------------------------------------------------------------
     Lines / rules — the signature "thin red rule" from slide 12
     ------------------------------------------------------------ */
  --rule-thin:     1px;
  --rule-regular:  2px;
  --rule-bold:     3px;

  /* ------------------------------------------------------------
     Motion — restrained, editorial. No bouncy springs.
     ------------------------------------------------------------ */
  --ease-standard: cubic-bezier(0.2, 0.0, 0.0, 1.0);
  --ease-emphasis: cubic-bezier(0.2, 0.0, 0.0, 1.0);
  --ease-exit:     cubic-bezier(0.4, 0.0, 1.0, 1.0);

  --dur-instant: 80ms;
  --dur-quick:   180ms;
  --dur-base:    280ms;
  --dur-slow:    520ms;
  --dur-reveal:  900ms;

  /* ------------------------------------------------------------
     Z-index scale
     ------------------------------------------------------------ */
  --z-base:    1;
  --z-rail:    10;
  --z-header:  50;
  --z-overlay: 80;
  --z-modal:   100;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms;
    --dur-quick:   0ms;
    --dur-base:    0ms;
    --dur-slow:    0ms;
    --dur-reveal:  0ms;
  }
}