/* ============================================================
   ELEMENTS — Design Tokens
   tokens.css

   Load order: tokens.css → main.css
   Consumed by: every HTML page via <link> in <head>

   Index
   1. Typefaces         (@font-face)
   2. Brand             (:root — invariant colour identities)
   3. Mode-agnostic     (:root — font stacks, spacing, scale,
                         grid, motion, z-index)
   4. Scale — desktop   (@media min-width: 768px)
   5. Daylight theme    ([data-mode="daylight"])
   6. Candlelight theme ([data-mode="candlelight"])
   ============================================================ */


/* ── 1. Typefaces ────────────────────────────────────────────
   Zero external requests. Both families served from assets/fonts/.

   DM Sans: static 400 + 500. This is the typeface in the logo's
   PRIVATE CHEF line — site and mark agree on the same face.

   Stilson Display Condensed: licensed. --font-display is the
   single point of substitution; update file path and family
   name here once the licence is confirmed.
   ──────────────────────────────────────────────────────────── */

@font-face {
  font-family: "DM Sans";
  src: url("../fonts/DMSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("../fonts/DMSans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Stilson Display Condensed";
  src: url("../fonts/StilsonDisplayCondensed.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


/* ── 2. Brand (invariant across both themes) ─────────────────
   Direct extractions from the real logo. No tints, no variants,
   no gradient versions of these values.
   ──────────────────────────────────────────────────────────── */

:root {
  --brand-ink:   #231F20;   /* logo dark — primary wordmark colour */
  --brand-camel: #B08F66;   /* logo camel — the accent in both modes */
  --brand-light: #F2EEE9;   /* warm near-white — on-video text, both modes */
}


/* ── 3. Mode-agnostic tokens ─────────────────────────────────
   Spacing, type scale (mobile), grid, motion, z-index.
   Colours live in the mode blocks below — never here.
   ──────────────────────────────────────────────────────────── */

:root {
  /* Font stacks — the only font identifiers that appear in main.css */
  --font-body:    "DM Sans", system-ui, sans-serif;
  --font-display: "Stilson Display Condensed", "Palatino Linotype", Palatino, Georgia, serif;

  /* Spacing — 4px base, rem values */
  --sp-1:   0.25rem;   /*   4px */
  --sp-2:   0.5rem;    /*   8px */
  --sp-3:   0.75rem;   /*  12px */
  --sp-4:   1rem;      /*  16px */
  --sp-5:   1.25rem;   /*  20px */
  --sp-6:   1.5rem;    /*  24px */
  --sp-8:   2rem;      /*  32px */
  --sp-10:  2.5rem;    /*  40px */
  --sp-12:  3rem;      /*  48px */
  --sp-16:  4rem;      /*  64px */
  --sp-20:  5rem;      /*  80px */
  --sp-24:  6rem;      /*  96px */
  --sp-32:  8rem;      /* 128px */

  /* Type scale — mobile, ratio 1.25, base 1rem = 16px */
  --step--1:  0.8rem;         /*  12.8px */
  --step-0:   1rem;           /*  16px   */
  --step-1:   1.25rem;        /*  20px   */
  --step-2:   1.5625rem;      /*  25px   */
  --step-3:   1.953rem;       /*  31.3px */
  --step-4:   2.441rem;       /*  39px   */
  --step-5:   3.052rem;       /*  48.8px */

  /* Grid */
  --cols:     12;
  --col-gap:  var(--sp-6);   /* 24px between columns — mobile */
  --gutter:   var(--sp-6);   /* 24px outer padding — mobile */

  /* Radii — every element is 0; only .btn overrides this */
  --radius:       0px;
  --radius-btn:   6px;

  /* Video scrims — always-dark overlays, theme-independent.
     Used for functional legibility over video; not decoration. */
  --scrim:       rgb(0 0 0 / 0.45);
  --scrim-heavy: rgb(0 0 0 / 0.72);
  --scrim-light: rgb(0 0 0 / 0.18);

  /* Ghost button over dark video — semi-transparent warm border */
  --ghost-on-video: rgb(242 238 233 / 0.35);

  /* Motion */
  --dur-fast:   120ms;
  --dur-base:   220ms;
  --dur-slow:   380ms;
  --ease:       cubic-bezier(0.25, 0.0, 0.25, 1);
  --ease-out:   cubic-bezier(0.0,  0.0, 0.2,  1);
  --ease-in:    cubic-bezier(0.4,  0.0, 1.0,  1);

  /* Z-index scale */
  --z-base:   0;
  --z-raised: 10;
  --z-nav:    100;
  --z-modal:  200;
  --z-toast:  300;
}


/* ── 4. Scale — desktop (ratio 1.333, from 768px) ───────────── */

@media (min-width: 768px) {
  :root {
    --step--1:  0.75rem;     /*  12px   */
    --step-0:   1rem;        /*  16px   */
    --step-1:   1.333rem;    /*  21.3px */
    --step-2:   1.777rem;    /*  28.4px */
    --step-3:   2.369rem;    /*  37.9px */
    --step-4:   3.157rem;    /*  50.5px */
    --step-5:   4.209rem;    /*  67.3px */

    --col-gap:  var(--sp-8);
    --gutter:   clamp(2.5rem, 7vw, 7rem); /* 40px → 112px */
  }
}


/* ── 5. Daylight ─────────────────────────────────────────────
   Warm parchment.
   Contrast verified:
     --muted  #6B6560 on --bg #FAF8F5 → 5.4:1  ✓ AA
     --ink    #231F20 on --bg #FAF8F5 → 16.5:1 ✓ AAA
     --accent #B08F66 on --bg #FAF8F5 → 2.6:1  — decorative only;
     never used as body text, small text, or sole focus indicator
   ──────────────────────────────────────────────────────────── */

[data-mode="daylight"] {
  --bg:        #FAF8F5;
  --surface:   #FFFFFF;
  --ink:       #231F20;
  --muted:     #6B6560;
  --accent:    #B08F66;
  --hairline:  #E4DED6;

  /* Semantic aliases — consumed in main.css */
  --btn-fg:         var(--brand-ink);    /* dark text on camel fill */
  --on-video:       var(--brand-light);  /* warm light text over dark scrim */
  --selection-bg:   var(--ink);
  --selection-fg:   var(--bg);
  --focus-ring:     var(--ink);          /* keyboard focus outline */
  --stripe:         rgba(0, 0, 0, 0.035); /* zebra row tint */
}


/* ── 6. Candlelight ──────────────────────────────────────────
   Deep ash.
   Contrast verified:
     --muted  #A39A92 on --bg #231F20 → 5.8:1  ✓ AA
     --ink    #F2EEE9 on --bg #231F20 → 15.1:1 ✓ AAA
     --accent #B08F66 on --bg #231F20 → 3.1:1  — decorative only
   ──────────────────────────────────────────────────────────── */

[data-mode="candlelight"] {
  --bg:        #000000;
  --surface:   #2C2728;
  --ink:       #F2EEE9;
  --muted:     #A39A92;
  --accent:    #B08F66;
  --hairline:  #3A3435;

  /* Semantic aliases */
  --btn-fg:         var(--brand-ink);    /* dark text on camel — accent is unchanged */
  --on-video:       var(--brand-light);  /* same warm light; dark bg needs no scrim */
  --selection-bg:   var(--ink);
  --selection-fg:   var(--bg);
  --focus-ring:     var(--ink);          /* keyboard focus outline */
  --stripe:         rgba(255, 255, 255, 0.05); /* zebra row tint */
}