/* ==========================================================================
   tokens.css — the whole visual language, in one place.
   Nothing below this file should invent a colour, a size or a duration.
   --------------------------------------------------------------------------
   Direction: printed-stationery calm, not gym neon. Warm bone type on near
   black, one brass accent, hairline rules. The letterspaced uppercase labels
   are carried over deliberately from the printed playbook.
   ========================================================================== */

:root {
  /* --- Surfaces ------------------------------------------------------- */
  --c-ink:         #0B0B0C;   /* page */
  --c-surface:     #151517;   /* cards */
  --c-surface-2:   #1D1D20;   /* raised / inputs */
  --c-surface-3:   #26262A;   /* pressed / selected */
  --c-line:        #2B2B30;   /* hairlines */
  --c-line-soft:   #1F1F23;

  /* --- Type ----------------------------------------------------------- */
  --c-bone:        #F2F0EB;   /* primary — warm, paper-like, never pure white */
  --c-bone-2:      #A5A099;   /* secondary */
  --c-bone-3:      #6E6A64;   /* tertiary / disabled */

  /* --- Signal --------------------------------------------------------- */
  --c-brass:       #C2A26B;   /* the single accent. Used sparingly. */
  --c-brass-dim:   #8A7349;
  --c-brass-wash:  rgba(194, 162, 107, 0.12);
  --c-sage:        #7C9B84;   /* done / good */
  --c-clay:        #B4685E;   /* pain / stop */
  --c-amber:       #D2A24C;   /* caution / hard */

  /* --- Typography ----------------------------------------------------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
               Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-num:  ui-rounded, -apple-system, BlinkMacSystemFont, "SF Pro Rounded",
               "SF Pro Display", var(--font-sans);

  --t-eyebrow:  0.6875rem;  /* 11px — letterspaced caps, the playbook's voice */
  --t-caption:  0.75rem;    /* 12px */
  --t-small:    0.8125rem;  /* 13px */
  --t-body:     0.9375rem;  /* 15px */
  --t-lead:     1.0625rem;  /* 17px */
  --t-title:    1.375rem;   /* 22px */
  --t-display:  1.875rem;   /* 30px */
  --t-hero:     2.75rem;    /* 44px */
  --t-mega:     4rem;       /* 64px — rest timer, set counter */

  --ls-eyebrow: 0.16em;
  --ls-tight:  -0.02em;

  /* --- Spacing (4pt grid) --------------------------------------------- */
  --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;

  /* --- Radii ---------------------------------------------------------- */
  --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 26px; --r-pill: 999px;

  /* --- Elevation ------------------------------------------------------ */
  --shadow-2: 0 8px 28px rgba(0,0,0,.5);

  /* --- Motion --------------------------------------------------------- */
  --e-out:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --d-fast:  140ms;
  --d-base:  240ms;
  --d-slow:  420ms;

  /* --- Layout --------------------------------------------------------- */
  --wrap: 560px;              /* max content width — stays phone-shaped on desktop */
  --tabbar-h: 58px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);

  /* --- Illustration --------------------------------------------------- */
  --fig-body:   #E6E2DA;
  --fig-accent: var(--c-brass);
  --fig-ground: #3A3A40;
}

/* Light mode: same structure, inverted values. A 6am dark room is the primary
   case, daylight the second.
   The rule below is written once and referenced by two selectors so the palette
   can never drift between "system says light" and "Settings says light". */
@media (prefers-color-scheme: light) {
  html:not([data-theme]) {
    --c-ink:       #FBFAF7;
    --c-surface:   #FFFFFF;
    --c-surface-2: #F3F1EC;
    --c-surface-3: #E8E5DE;
    --c-line:      #E0DCD3;
    --c-line-soft: #EDEAE3;
    --c-bone:      #1A1A1C;
    --c-bone-2:    #5E5A54;
    --c-bone-3:    #94908A;
    --c-brass:     #8A6D33;
    --c-brass-dim: #B29A6C;
    --c-brass-wash: rgba(138, 109, 51, 0.10);
    --c-sage:      #4E7458;
    --c-clay:      #9C4A40;
    --c-amber:     #9A6E1E;
    --shadow-2: 0 8px 28px rgba(0,0,0,.10);
    --fig-body:   #2A2A2C;
    --fig-ground: #C9C5BC;
  }
}

/* Explicit override from Settings. Same values, applied unconditionally. */
html[data-theme="light"] {
  color-scheme: light;
  --c-ink:       #FBFAF7;
  --c-surface:   #FFFFFF;
  --c-surface-2: #F3F1EC;
  --c-surface-3: #E8E5DE;
  --c-line:      #E0DCD3;
  --c-line-soft: #EDEAE3;
  --c-bone:      #1A1A1C;
  --c-bone-2:    #5E5A54;
  --c-bone-3:    #94908A;
  --c-brass:     #8A6D33;
  --c-brass-dim: #B29A6C;
  --c-brass-wash: rgba(138, 109, 51, 0.10);
  --c-sage:      #4E7458;
  --c-clay:      #9C4A40;
  --c-amber:     #9A6E1E;
  --shadow-2: 0 8px 28px rgba(0,0,0,.10);
  --fig-body:   #2A2A2C;
  --fig-ground: #C9C5BC;
}
html[data-theme="dark"] { color-scheme: dark; }