/* Kitchenboard — Design Tokens (cream / deep bark / clay / eucalypt) */
/* ─────────────────────────────────────────── */

:root {
  /* Parchment — primary background. Warm oatmeal. */
  --parchment-50:  #FFFDF8;
  --parchment-100: #FDF9F0;
  --parchment-200: #FBF6EA;  /* canonical */
  --parchment-300: #F1E7CE;
  --parchment-400: #E6D9BC;
  --parchment-500: #D2C09B;
  --parchment-600: #B39B72;
  --parchment-700: #8C7650;
  --parchment-800: #5A4B33;
  --parchment-900: #322C22;

  /* Deep-plum — primary text + anchor accent. */
  --plum-50:  #F0EDE7;
  --plum-100: #DCD6CB;
  --plum-200: #B5AA98;
  --plum-300: #8B7E6A;
  --plum-400: #6B5E4B;
  --plum-500: #4B4133;
  --plum-600: #322C22;  /* canonical */
  --plum-700: #27221A;
  --plum-800: #1C1812;
  --plum-900: #120F0B;

  /* Hearth-gold — highlight, CTA, active. */
  --gold-50:  #FAF0EA;
  --gold-100: #F3DACD;
  --gold-200: #E8BBA4;
  --gold-300: #DB9A7A;
  --gold-400: #D07F58;
  --gold-500: #C4643B;  /* canonical */
  --gold-600: #A24F2C;
  --gold-700: #7F3E22;
  --gold-800: #582B17;
  --gold-900: #33190D;

  /* Sage — secondary accent, grounding. */
  --sage-50:  #F0F2EC;
  --sage-100: #DCE2D4;
  --sage-200: #C1CBB5;
  --sage-300: #A4B195;
  --sage-400: #8A9A7E;  /* canonical */
  --sage-500: #6F7F5E;
  --sage-600: #59674B;
  --sage-700: #465139;
  --sage-800: #303726;
  --sage-900: #1B2016;

  /* Semantic */
  --bg:              var(--parchment-200);
  --bg-raised:       var(--parchment-100);
  --surface-input:   var(--parchment-50);
  --bg-sunk:         var(--parchment-300);
  --ink:             var(--plum-600);
  --ink-soft:        color-mix(in oklab, var(--plum-600) 68%, transparent);
  --ink-faint:       color-mix(in oklab, var(--plum-600) 42%, transparent);
  --rule:            color-mix(in oklab, var(--plum-600) 14%, transparent);
  --rule-soft:       color-mix(in oklab, var(--plum-600) 8%, transparent);
  --accent:          var(--gold-500);
  --accent-text:     var(--gold-700);
  color-scheme: light;
  --accent-hover:    var(--gold-600);
  --accent-ink:      #FFFDF6;
  --secondary:       var(--sage-400);
  --destructive:     #B2423A;

  /* Per-hearthmate accents — theme-invariant, used by TV + mobile */

  /* Type — theme-invariant */
  --font-display: "Fraunces", "Source Serif 4", Georgia, serif;
  --font-body:    "Nunito Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Type scale — body (mobile/configure) */
  --t-xs:   12px;
  --t-sm:   14px;
  --t-base: 17px;
  --t-md:   19px;
  --t-lg:   22px;
  --t-xl:   28px;
  --t-2xl:  36px;
  --t-3xl:  48px;
  --t-4xl:  64px;

  /* Type scale — TV (3-4m viewing).
     Anchored in vh so physical text size stays roughly constant across TV
     resolutions (1080p stays the design baseline; 720p clamps up to keep
     small labels readable from across the room; 1440p / 4K use the extra
     pixel headroom for breathing room rather than uniformly blown-up text). */
  --tv-xs:   clamp(16px, 1.85vh, 30px);   /* labels, kickers, who-tags */
  --tv-sm:   clamp(20px, 2.2vh,  38px);   /* secondary body, week event lines */
  --tv-base: clamp(24px, 2.6vh,  46px);   /* primary body — events, shopping items */
  --tv-md:   clamp(28px, 3.15vh, 56px);   /* card heads, weather temp, tonight tag */
  --tv-lg:   clamp(34px, 3.9vh,  70px);   /* section heads, "Today" title */
  --tv-xl:   clamp(44px, 5.2vh,  92px);   /* date sub, AUM number */
  --tv-2xl:  clamp(56px, 6.7vh,  116px);  /* date main */
  --tv-3xl:  clamp(68px, 8.9vh,  156px);  /* clock */
  --tv-4xl:  clamp(96px, 13vh,   220px);  /* hero overrides */

  /* Frame metrics — fluid padding & gaps. The dashboard fills the screen at
     any size; these tokens give it breathing room that scales with viewport
     while staying within sensible bounds on tiny + huge displays. */
  --tv-pad-x:   clamp(36px, 3.75vw, 110px);
  --tv-pad-top: clamp(32px, 5.2vh,  84px);
  --tv-pad-bot: clamp(28px, 4.4vh,  72px);
  --tv-col-gap: clamp(32px, 2.9vw,  88px);
  --tv-row-gap: clamp(20px, 2.4vh,  56px);

  /* Spacing (4px rhythm) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  /* Radius */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-2xl: 32px;
  --r-full: 999px;

  /* Shadows — warm, not corporate */
  --sh-1: 0 1px 0 rgba(79, 36, 64, 0.04), 0 2px 6px rgba(79, 36, 64, 0.04);
  --sh-2: 0 2px 0 rgba(79, 36, 64, 0.04), 0 8px 22px rgba(79, 36, 64, 0.07);
  --sh-3: 0 4px 0 rgba(79, 36, 64, 0.05), 0 18px 40px rgba(79, 36, 64, 0.10);
  --sh-inset: inset 0 1px 0 rgba(255, 253, 246, 0.6);
  --sh-press: inset 0 2px 4px rgba(79, 36, 64, 0.12);

  /* Motion */
  --ease-out:  cubic-bezier(.2, .7, .3, 1);
  --ease-in:   cubic-bezier(.5, 0, .8, .3);
  --ease-soft: cubic-bezier(.4, .0, .2, 1);
  --d-tap:     120ms;
  --d-quick:   150ms;
  --d-check:   200ms;
  --d-fade:    320ms;
  --d-ambient: 6000ms;
}

/* ─── Theme switching for the /m surface ────────────────────────────────────
   The TV display drifts continuously via ambient.css and is unaffected by the
   selectors below. The phone surface follows three rules, in order of
   precedence:

     1. `html[data-theme="dark"]` — user forced Dark (wins on any OS).
     2. `html[data-theme="light"]` — user forced Light (skips the OS-dark
        media query below).
     3. No attribute — Auto: defer to `prefers-color-scheme`.

   Base `:root` already carries the light palette, so Auto-on-light-OS and
   forced-Light need no extra rules. The @media block below covers
   Auto-on-dark-OS, and `:root[data-theme="dark"]` covers explicit Dark. */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:              var(--plum-900);
    --bg-raised:       var(--plum-800);
    --surface-input:   var(--plum-700);
    --bg-sunk:         #15080F;
    --ink:             var(--parchment-100);
    --ink-soft:        color-mix(in oklab, var(--parchment-100) 70%, transparent);
    --ink-faint:       color-mix(in oklab, var(--parchment-100) 42%, transparent);
    --rule:            color-mix(in oklab, var(--parchment-100) 14%, transparent);
    --rule-soft:       color-mix(in oklab, var(--parchment-100) 7%, transparent);
    --accent:          var(--gold-400);
    --accent-hover:    var(--gold-300);
    --accent-ink:      var(--plum-900);
    --accent-text:     var(--gold-300);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  /* Surfaces invert the parchment ladder onto the deep-plum scale: page is
     darkest, cards lift, inputs lift further. Ink moves to warm parchment so
     contrast against the dark plum stays comfortable. Type scale, spacing,
     radius, shadow, motion, fonts, and per-hearthmate colors are theme-
     invariant — they live in :root above so the TV (which is intentionally
     light parchment, no data-theme attribute) inherits them too. */
  --bg:              var(--plum-900);
  --bg-raised:       var(--plum-800);
  --surface-input:   var(--plum-700);
  --bg-sunk:         #15080F;
  --ink:             var(--parchment-100);
  --ink-soft:        color-mix(in oklab, var(--parchment-100) 70%, transparent);
  --ink-faint:       color-mix(in oklab, var(--parchment-100) 42%, transparent);
  --rule:            color-mix(in oklab, var(--parchment-100) 14%, transparent);
  --rule-soft:       color-mix(in oklab, var(--parchment-100) 7%, transparent);
  --accent:          var(--gold-400);
  --accent-hover:    var(--gold-300);
  --accent-ink:      var(--plum-900);
  --accent-text:     var(--gold-300);
  color-scheme: dark;
}

/* Parchment grain — 3% opacity warm noise, no skeuomorphism */
.grain::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.31  0 0 0 0 0.14  0 0 0 0 0.25  0 0 0 0.35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.35'/></svg>");
  opacity: 0.5;
  mix-blend-mode: multiply;
  z-index: 0;
}

/* Utility resets used across surfaces */
* { box-sizing: border-box; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; padding: 0; }
input, textarea { font: inherit; color: inherit; }

/* Person colours for profiles: warm, cool and neutral, each dark enough for
   white initials. Not part of the surface palette; never used for UI chrome. */
:root {
  --person-rose:  #B5607A;
  --person-blush: #C4838C;
  --person-berry: #8A4B62;
  --person-mauve: #9A6F88;
  --person-lilac: #8E7AAB;
  --person-peach: #D28658;
  --person-sky:   #5F8FAD;
  --person-teal:  #5A8C86;
  --person-olive: #808557;
  --person-stone: #857D70;
  --person-sand:  #A99B82;
}