/* ==========================================================================
   Crown Artisan Sourdough — design tokens
   Single source of truth for color, type and spacing.
   Palette is PROVISIONAL: hex read from the client's palette image.
   Replace the values in the "brand ramp" block when her HEX sheet arrives.
   ========================================================================== */

:root {
  /* ---- brand ramp (the only place raw brand hex should live) ------------ */
  --brand-cream:      #F4EBDC;
  --brand-cream-hi:   #FBF6EA;
  --brand-cream-lo:   #EFE3CC;
  --brand-ink:        #3D2317;
  /* Deep enough to clear 4.5:1 on the sunken cream surface too, not just on
     the page background. */
  --brand-ink-soft:   #6E5A48;
  --brand-clay:       #A8492F;
  --brand-clay-deep:  #87381F;
  --brand-ember:      #C06F4C;
  --brand-sage:       #8F9C82;
  --brand-olive:      #6F6A3E;
  --brand-wheat:      #DEC099;
  --brand-rule:       #E7D7BA;

  /* ---- semantic colour roles (light) ----------------------------------- */
  --bg:            var(--brand-cream);
  --surface:       var(--brand-cream-hi);
  --surface-sunk:  var(--brand-cream-lo);
  --text:          var(--brand-ink);
  --text-muted:    var(--brand-ink-soft);
  --accent:        var(--brand-clay);
  --accent-hover:  var(--brand-clay-deep);
  --accent-soft:   rgba(168, 73, 47, 0.09);
  --on-accent:     #FFFFFF;
  --calm:          var(--brand-sage);
  --calm-ink:      #22180F;
  --olive:         var(--brand-olive);
  --wheat:         var(--brand-wheat);
  --rule:          var(--brand-rule);
  --danger:        #B3341C;
  /* Wheat flips from light to dark between themes, so its text colour has to
     flip with it. Anything sitting on --wheat uses this, never a raw ink. */
  --on-wheat:      #3D2317;
  /* The sticky header's translucent ground. Written as plain rgba rather than
     color-mix so it still resolves on older Safari, where an unsupported
     color-mix would leave the header with no background at all. */
  --bg-veil:       rgba(244, 235, 220, 0.9);

  --shadow-sm: 0 1px 2px rgba(61, 35, 23, .06);
  --shadow-md: 0 1px 2px rgba(61, 35, 23, .06), 0 8px 24px rgba(61, 35, 23, .07);
  --shadow-lg: 0 2px 4px rgba(61, 35, 23, .07), 0 18px 44px rgba(61, 35, 23, .12);

  /* ---- type ------------------------------------------------------------ */
  --font-script: 'Parisienne', 'Brush Script MT', cursive;
  --font-display: 'Lora', Georgia, 'Times New Roman', serif;
  --font-body: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --step--1: 0.875rem;   /* 14 */
  --step-0:  1.0625rem;  /* 17 — body */
  --step-1:  1.25rem;    /* 20 */
  --step-2:  1.5rem;     /* 24 */
  --step-3:  clamp(1.5rem, 1.2rem + 1.3vw, 2rem);        /* h3 */
  --step-4:  clamp(1.9rem, 1.4rem + 2.2vw, 2.75rem);     /* h2 */
  --step-5:  clamp(2.4rem, 1.6rem + 3.6vw, 4rem);        /* h1 */
  --step-6:  clamp(3rem, 1.8rem + 5.4vw, 5.5rem);        /* display */

  /* ---- spacing (spacious scale) ---------------------------------------- */
  --sp-1: 0.5rem;
  --sp-2: 0.75rem;
  --sp-3: 1rem;
  --sp-4: 1.5rem;
  --sp-5: 2rem;
  --sp-6: 3rem;
  --sp-7: 4rem;
  --sp-8: 6rem;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --container: 1140px;
  --measure: 62ch;

  /* ---- layers ---------------------------------------------------------- */
  --z-header: 40;
  --z-scrim: 90;
  --z-drawer: 100;
  --z-toast: 200;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---- dark: system preference (no explicit choice stamped) -------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:           #211711;
    --surface:      #2C1F17;
    --surface-sunk: #3A2A1E;
    --text:         #F1E7D8;
    --text-muted:   #BCA994;
    --accent:       #D67852;
    --accent-hover: #E39A73;
    --accent-soft:  rgba(214, 120, 82, .14);
    --on-accent:    #23150D;
    --calm:         #A2AF94;
    --calm-ink:     #1B120B;
    --olive:        #ADA46A;
    --wheat:        #5C4834;
    --rule:         #47341F;
    --danger:       #E88E76;
    --on-wheat:     #F1E7D8;
    --bg-veil:      rgba(33, 23, 17, 0.9);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-md: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px rgba(0, 0, 0, .35);
    --shadow-lg: 0 2px 6px rgba(0, 0, 0, .35), 0 22px 50px rgba(0, 0, 0, .45);
  }
}

/* ---- dark: explicit choice -------------------------------------------- */
:root[data-theme="dark"] {
  --bg:           #211711;
  --surface:      #2C1F17;
  --surface-sunk: #3A2A1E;
  --text:         #F1E7D8;
  --text-muted:   #BCA994;
  --accent:       #D67852;
  --accent-hover: #E39A73;
  --accent-soft:  rgba(214, 120, 82, .14);
  --on-accent:    #23150D;
  --calm:         #A2AF94;
  --calm-ink:     #1B120B;
  --olive:        #ADA46A;
  --wheat:        #5C4834;
  --rule:         #47341F;
  --danger:       #E88E76;
  --on-wheat:     #F1E7D8;
  --bg-veil:      rgba(33, 23, 17, 0.9);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-md: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px rgba(0, 0, 0, .35);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, .35), 0 22px 50px rgba(0, 0, 0, .45);
}