/* ==========================================================================
   Staple — design tokens
   Single source of truth. Nothing below this file should hardcode a colour.
   Contrast ratios noted where they were nearly wrong; see 00-directions.md §5.
   ========================================================================== */

:root{
  /* ---- neutrals · "warm paper" ---- */
  --surface:              #FDFBF7;
  --surface-container:    #F5F0E8;
  --surface-container-hi: #EDE6DA;
  --on-surface:           #1A1714;
  --on-surface-variant:   #6E655B;
  --outline:              #8C8175;
  --outline-variant:      #E3DACB;

  /* ---- primary · terracotta ----
     #B84E2A not #C4562F: white on the latter is 4.45:1 and fails AA.
     This is 5.05:1. Only ever a *text* colour on --surface / --surface-container;
     on tinted grounds it must be a filled control (see .banner__action). */
  --primary:              #B84E2A;
  --on-primary:           #FFFFFF;
  --primary-container:    #FBDDD0;
  --on-primary-container: #4A1B0A;

  /* ---- secondary · groceries, "done" states ---- */
  --secondary:              #4A6B4F;
  --on-secondary:           #FFFFFF;
  --secondary-container:    #D6E5D8;
  --on-secondary-container: #16301D;

  /* ---- tertiary · THE EXTRACTION LAYER, AND NOTHING ELSE ----
     Violet is the model's voice. It must never appear in cook mode.
     Solid only — a 40% tint is ~1.7:1 and fails the 3:1 non-text minimum. */
  --tertiary:              #7B5EA7;
  --on-tertiary:           #FFFFFF;
  --tertiary-container:    #EADFF7;
  --on-tertiary-container: #2B1A45;
  /* Shimmer highlight for the extraction skeleton. A token rather than a literal
     because the pending-card shimmer and the "check the import" strip have to
     stay the same violet — hardcoding this is how the extraction layer ends up
     rendered in two palettes after a single contrast fix. */
  --tertiary-container-hi: #F6EFFD;

  /* ---- error · DESTRUCTIVE ONLY ----
     A deliberately *cool* crimson, not a warm red. A warm red would sit within
     a few degrees of hue of --primary (#B84E2A), and "delete my account" must
     never be one glance away from "save recipe". 8.60:1 on --surface.
     Reserved for irreversible actions and hard failures. An extraction that
     merely didn't work is NOT an error — it gets a neutral screen and a route
     out (see flows/capture.html), because nothing was lost. */
  --error:                #8E1D2D;
  --on-error:             #FFFFFF;   /* 8.88:1 */
  --error-container:      #F7D9DC;
  --on-error-container:   #4A0A14;   /* 11.83:1 */

  /* Behind a sheet. A role and not --on-surface reused, because the dark scheme
     needs a different ink: --on-surface there is nearly white, and a scrim drawn
     with it washes light across the screen it is meant to be dimming. */
  --scrim:                #1A1714;

  /* ---- dark · cook mode ground ----
     ALIASES. Every one of these is a value in the dark scheme below, and they
     survive only because the cook-mode markup names them: `.timer`, `.cook-*`,
     `.timerbar` and `.peek` read --d-* directly, so they render dark inside an
     otherwise light page. Deleting them means putting the dark block on
     `.phone--dark` as well and sweeping those rules onto the plain names —
     worth doing, not done here, and nothing breaks in the meantime. */
  --d-surface:            #141210;
  --d-surface-container:  #1E1B18;
  --d-surface-container-hi:#282420;
  --d-on-surface:         #F2EDE5;
  --d-on-surface-variant: #B0A599;
  --d-primary:            #EE9068;
  --d-on-primary:         #2E0F05;
  --d-secondary:          #9FC0A5;
  --d-error:              #F2A9A9;
  --d-outline-variant:    #332E28;

  /* ---- type ---- */
  --serif:'Fraunces','Iowan Old Style','Palatino Linotype',Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;

  --t-display:30px;   /* recipe title */
  --t-headline:24px;  /* section headers */
  --t-title:15px;     /* step headline, ingredient name */
  --t-body:13.5px;    /* step body — 22px minimum in cook mode */
  --t-label:11px;
  --t-eyebrow:10.5px;

  /* ---- shape ---- */
  --r-sm:8px; --r-md:16px; --r-lg:28px; --r-full:99px;

  /* ---- spacing · 4pt base ---- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px;

  /* ---- motion · two signature moments only ---- */
  --ease:cubic-bezier(.2,0,0,1);
  --dur:200ms;
  --stagger:60ms;

  /* Navigation is the exception to "everything else is default": a push or a pop moves a
     whole screen, and at --dur it snaps. The curve is the platform's, not ours. */
  --dur-nav:350ms;
  --ease-nav:cubic-bezier(.32,.72,0,1);
}

/* ==========================================================================
   dark
   The same role names, re-pointed. That is the whole mechanism: nothing below
   this file names a colour, so every component re-renders in dark for free and
   a screen that reads in one reads in the other.

   Held to AAA (7:1) rather than AA on everything cook mode draws with, because
   cook mode IS this scheme — the kitchen adds two rules to it (a 22px floor and
   no violet) and no colours of its own. Three values exist only because of that
   floor: the obvious choices landed at 6.9:1, which reads fine on a desk and not
   at all across a kitchen. Ratios are against --surface / --surface-container.

   Mirrored in `design/Tokens.kt` as `Tokens.DarkPalette`, and nothing enforces
   the mirror. Change a value here and change it there. `DarkPaletteTest` at
   least catches a ratio going under its floor on the Kotlin side.
   ========================================================================== */
[data-theme="dark"]{
  --surface:              #141210;
  --surface-container:    #1E1B18;
  --surface-container-hi: #282420;
  --on-surface:           #F2EDE5;   /* 16.04 / 14.71 */
  --on-surface-variant:   #B0A599;   /*  7.73 /  7.09  — was #A79C90, 6.94 */

  /* Shared with light, and legible on both grounds: 4.91 here, 3.69 there. */
  --outline:              #8C8175;
  /* Decorative hairline only: 1.39:1, and deliberately left there. Never the
     sole signal for a control — every button bordered with it also carries a
     glyph in --on-surface-variant, so 1.4.11 is satisfied by the glyph.
     Raising it to 3:1 would put a grey cage around a screen read at a glance. */
  --outline-variant:      #332E28;

  --primary:              #EE9068;   /*  7.85 /  7.20  — was #E8825C, 6.92 */
  --on-primary:           #2E0F05;   /*  7.44 — the filled button inverts */
  --primary-container:    #5E2412;
  --on-primary-container: #FBDDD0;   /*  9.42 */

  /* #9FC0A5 and not the #7FA085 §5's table proposed: cook mode holds "done" to
     AAA, and one role gets one green or a checked grocery row drifts away from
     a finished step. 9.39 on --surface. */
  --secondary:              #9FC0A5;
  --on-secondary:           #12251A;
  --secondary-container:    #2B4432;
  --on-secondary-container: #D6E5D8;

  /* Still the model's voice, still absent from cook mode — which is why this is
     the one role under 7:1 on its own ink (6.51), and why that is allowed. */
  --tertiary:              #B49BE0;  /*  7.75 */
  --on-tertiary:           #2B1A45;
  --tertiary-container:    #3D2A5C;
  --on-tertiary-container: #EADFF7;
  --tertiary-container-hi: #4B3670;  /* the shimmer's light end, one step up */

  --error:                #F2A9A9;   /*  9.81 */
  --on-error:             #2E0F05;
  --error-container:      #5C1521;
  --on-error-container:   #F7D9DC;   /* 10.04 */

  /* True black, not light's warm ink: #1A1714 at 42% over #141210 barely reads
     as a scrim at all. */
  --scrim:                #000000;
}