/* tokens.css — the only place a raw value is written.
   Nothing below this file may hard-code a colour, size, radius or duration.

   TWO THEMES, one token vocabulary.

   Light is the foundation doc's palette (docs/2026-08-21-product-foundation.md
   §B), unchanged. Dark is the legacy app's own palette, lifted out of
   index.html's `:root` — iron #191A1D for the wall, butcher paper #E9DDC6 for
   the cards, grease-pencil red #B5372E, chalk #ECE8DF for text on iron. Dark is
   the DEFAULT: app.html stamps data-theme="dark" unless the store says light.

   The dark theme is why the ink tokens come in two families. On the light
   theme --bg and --surface are both pale, so one ink serves both. On the dark
   theme they are opposites: chalk on the iron wall, brown ink on paper. So:

     --ink / --ink-2 / --ink-3           text ON A SURFACE (card, sheet, list)
     --ink-on-bg / -2 / -3               text straight ON --bg
     --accent                            accent ON --bg (and fills)
     --accent-on-surface                 accent-coloured text ON a surface

   components.css picks between the two families with three inherited
   variables — --t-1 / --t-2 / --t-3 — which :root points at the on-bg family
   and every surface re-points at the on-surface family. Nothing has to know
   what it is sitting on; it inherits the right answer.

   Every text/background pair in the dark theme is at or above 4.5:1:

     chalk       #ECE8DF on iron  #191A1D  14.23     ink    #221E17 on paper   12.34
     chalk-dim   #9C9890 on iron  #191A1D   6.06     ink-2  #4B443A on paper    7.14
     chalk-3     #8A8580 on iron  #191A1D   4.76     ink-3  #5C5343 on paper    5.63
     chalk       #ECE8DF on tabs  #121316  15.19     ink    #221E17 on paper-2 11.00
     chalk-dim   #9C9890 on tabs  #121316   6.46     ink-2  #4B443A on paper-2  6.37
     accent-deep #8E2A23 on paper #E9DDC6   6.24     ink-3  #5C5343 on paper-2  5.02
     accent-deep #8E2A23 on paper-2         5.56     white  #FFFFFF on red     5.91
     paper       #E9DDC6 on accent-deep     6.24     danger #8E2A23 on paper    6.24

   #B5372E on iron is 2.94:1, so the grease-pencil red is never text on the
   wall: it is the progress fill, the active tab's top rule, the focus ring and
   the button fill. Red as TEXT only ever appears on paper, where the deep
   #8E2A23 carries it at 6.24:1. */

:root {
  color-scheme: light;

  /* ---- colour · 60 neutral / 30 ink / 10 accent ---- */
  --bg:          #F5F0E8;   /* app background                                */
  --surface:     #FFFFFF;   /* cards, sheets                                 */
  --surface-2:   #FAF6F0;   /* grouped lists                                 */

  --ink:         #1E1A15;   /* primary text on a surface   15.3:1            */
  --ink-2:       #5F584E;   /* secondary text on a surface  6.2:1            */
  --ink-3:       #8A8377;   /* tertiary — large text and icons only  3.3:1   */

  /* On the light theme the page and the cards are both pale, so text on the
     background is the same ink as text on a card. */
  --ink-on-bg:   #1E1A15;
  --ink-on-bg-2: #5F584E;
  --ink-on-bg-3: #8A8377;

  --line:        #E7E0D5;   /* hairlines on a surface                        */
  --line-on-bg:  #E7E0D5;   /* hairlines on the background                   */
  --track:       #E7E0D5;   /* progress groove, skeleton bars                */

  --accent:            #2F5A4B;   /* fills, progress, focus ring             */
  --accent-on-surface: #2F5A4B;   /* accent as TEXT on a card       7.8:1    */
  --accent-soft:       rgba(47, 90, 75, .08);   /* selected chips            */
  --on-accent:         #FFFFFF;   /* text on an accent fill         7.8:1    */

  --danger:      #A63D2C;   /* destructive only       6.3:1 on white         */
  --press:       rgba(63, 48, 30, .05);   /* pressed-row tint                */

  --avatar-bg:   rgba(47, 90, 75, .08);
  --avatar-ink:  #2F5A4B;
  --avatar-line: #E7E0D5;

  --tabbar-bg:   #FFFFFF;
  --tabbar-line: #E7E0D5;
  --tab-ink:     #2F5A4B;   /* active label                                  */
  --tab-ink-2:   #5F584E;   /* resting label                                 */
  --tab-icon:    #8A8377;   /* resting icon                                  */
  --tab-rule:    transparent;   /* the legacy red top rule, dark theme only  */

  --toast-bg:    #1E1A15;
  --toast-ink:   #F5F0E8;

  --shadow:      0 2px 8px rgba(63, 48, 30, .10);      /* tinted             */
  --shadow-lift: 0 -2px 16px rgba(63, 48, 30, .10);    /* sheets, tab bar    */
  --scrim:       rgba(30, 26, 21, .32);

  /* ---- type · one family, four sizes, two weights ---- */
  --font: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --size-display: 26px;  --line-display: 30px;
  --size-title:   20px;  --line-title:   26px;
  --size-body:    16px;  --line-body:    24px;
  --size-caption: 13px;  --line-caption: 18px;

  --weight-regular: 400;
  --weight-strong:  600;

  /* ---- spacing · 4 / 8 grid ---- */
  --sp-1:  4px;
  --sp-2:  8px;   /* related        */
  --sp-3: 12px;   /* row, vertical  */
  --sp-4: 16px;   /* card, row horizontal, screen edge */
  --sp-6: 24px;   /* groups         */
  --sp-8: 32px;   /* sections       */
  --sp-12: 48px;

  /* ---- radius · one token, plus the two it derives ---- */
  --radius:         12px;   /* cards, sheets, grouped lists */
  --radius-control:  8px;   /* buttons, segmented control, toast */
  --radius-full:    999px;  /* chips, avatar */

  /* ---- shape ---- */
  --hairline: 1px;
  --tap:      44px;   /* Apple HIG minimum */
  --row-min:  56px;   /* grouped list row  */
  --content:  560px;  /* max content width */
  --slot:     68px;   /* the day sheet's slot column */

  /* ---- motion · 150 to 250 ms, ease-out in, ease-in-out through ---- */
  --dur-fast: 150ms;
  --dur:      200ms;
  --dur-slow: 250ms;
  --stagger:   20ms;
  --ease-out:    cubic-bezier(.16, .84, .44, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);

  /* How far a sheet travels on open. Reduced motion sets this to 0 so the
     slide becomes a pure fade rather than disappearing entirely. */
  --sheet-travel: 100%;
}

/* ------------------------------------------------------------------ dark
   The legacy palette. Only colour changes: every size, weight, radius and
   duration above is shared, so the two themes are the same product in two
   inks. Titles keep the 600 the type scale already sets — no uppercase, no
   letter-spacing, at either theme. */

[data-theme="dark"] {
  color-scheme: dark;

  --bg:          #191A1D;   /* iron — the gym wall                           */
  --surface:     #E9DDC6;   /* butcher paper — cards, sheets                 */
  --surface-2:   #DFD1B5;   /* the darker paper — grouped lists              */

  --ink:         #221E17;   /* on paper                      12.34:1         */
  --ink-2:       #4B443A;   /* on paper                       7.14:1         */
  --ink-3:       #5C5343;   /* on paper                       5.63:1         */

  --ink-on-bg:   #ECE8DF;   /* chalk on iron                 14.23:1         */
  --ink-on-bg-2: #9C9890;   /* dim chalk on iron              6.06:1         */
  --ink-on-bg-3: #8A8580;   /* dimmest chalk on iron          4.76:1         */

  --line:        rgba(34, 30, 23, .18);   /* the legacy paper rule           */
  --line-on-bg:  #2E2F33;                 /* the legacy iron rule            */
  --track:       #26272B;                 /* the legacy progress groove      */

  --accent:            #B5372E;   /* grease-pencil red — fills and rules     */
  --accent-on-surface: #8E2A23;   /* the deep red — accent TEXT on paper     */
  --accent-soft:       rgba(181, 55, 46, .08);
  --on-accent:         #FFFFFF;   /* on the red fill                5.91:1   */

  --danger:      #8E2A23;   /* on paper                       6.24:1         */
  --press:       rgba(34, 30, 23, .07);

  --avatar-bg:   #8E2A23;
  --avatar-ink:  #E9DDC6;   /* paper on the deep red          6.24:1         */
  --avatar-line: #8E2A23;

  --tabbar-bg:   #121316;   /* the legacy nav                                */
  --tabbar-line: #2E2F33;
  --tab-ink:     #ECE8DF;   /* active: chalk                 15.19:1         */
  --tab-ink-2:   #9C9890;   /* resting: dim chalk             6.46:1         */
  --tab-icon:    #9C9890;
  --tab-rule:    #B5372E;   /* the legacy red rule over the active tab       */

  --toast-bg:    #E9DDC6;
  --toast-ink:   #221E17;

  --shadow:      0 2px 0 rgba(0, 0, 0, .45);    /* the legacy hard shadow    */
  --shadow-lift: 0 -2px 0 rgba(0, 0, 0, .45);
  --scrim:       rgba(0, 0, 0, .55);
}

/* Reduced motion: slides become fades, staggers collapse, nothing travels.
   Durations stay short but non-zero so the fade still reads as a transition. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 100ms;
    --dur:      120ms;
    --dur-slow: 120ms;
    --stagger:    0ms;
    --sheet-travel: 0;
  }
  *, *::before, *::after {
    animation-duration: 120ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 120ms !important;
    scroll-behavior: auto !important;
  }
}