/* ==========================================================================
   DESIGN TOKENS — taken from the Kundalini Spines site (css/tokens.css in
   kundalinispines/kundalini-spines-site), cold palette of Aug 2026. Values
   are copied, not linked, so the timer works offline and on its own host.
   If the site's palette changes, update these by hand.

   Two additions. The PHASE set at the bottom: the site budgets Signal Red at
   about two uses a page, but a timer is different, because colour is how you
   read the phase from across the room. Work takes the red, rest takes
   Moonlight, and everything around them stays dark.

   And a LIGHT theme, for training outside in bright sun, where a dark screen
   turns into a mirror. The site has no light palette, so Paper is the timer's
   own; everything else is the site's colours rearranged.
   ========================================================================== */

:root {
  color-scheme: dark;

  --color-black:       #03040F;
  --color-black-deep:  #080B10;
  --color-white:       #E4E8EB;
  --color-bone:        #D6D5D0;
  --color-crimson:     #7E2630;
  --color-crimson-lit: #A1333E;
  --color-moonlight:   #9DB2C0;
  --color-paper:       #F4F5F3;
  --color-paper-white: #FFFFFF;

  --color-gray-900: #080B10;
  --color-gray-800: #131B23;
  --color-gray-700: #1A252D;
  --color-gray-600: #394750;
  --color-gray-500: #57676F;
  --color-gray-400: #78888F;
  --color-gray-300: #9DB2C0;

  /* bg-primary as bare channels too, for the see-through bars. */
  --bg-primary:        var(--color-black);
  --bg-primary-rgb:    3 4 15;
  --bg-secondary:      var(--color-black-deep);
  --bg-surface:        var(--color-gray-800);
  --bg-surface-raised: var(--color-gray-700);
  --text-strong:       var(--color-white);
  --text-primary:      var(--color-bone);
  --text-secondary:    var(--color-moonlight);
  --text-muted:        var(--color-gray-400);
  --border-subtle:     var(--color-gray-600);
  --border-faint:      var(--color-gray-700);
  --border-hairline:   var(--color-gray-800);
  --focus-ring:        var(--color-white);
  --scrim:             rgb(3 4 15 / 0.72);

  /* Accent: primary buttons, the play button, switches that are on. */
  --accent:            var(--color-white);
  --accent-fg:         var(--color-black);
  --accent-press:      var(--color-bone);

  /* The spine mark is drawn in near-white; light flips it to near-black. */
  --mark-filter:       none;
  --count-rounds:      var(--color-moonlight);
  --count-cycles:      var(--color-bone);

  /* Archivo carries display, showcase and wordmark at different widths;
     font-stretch is the match key, so always set it with the variation. */
  --font-display:  'Archivo', 'Arial Narrow', sans-serif;
  --font-body:     'IBM Plex Sans', system-ui, sans-serif;
  --font-mono:     'IBM Plex Mono', 'Courier New', monospace;
  --font-label:    'Rajdhani', 'Arial Narrow', sans-serif;

  --display-wdth:    72;
  --display-wght:    750;
  --display-stretch: 72%;
  --wordmark-stretch: 62%;

  --fs-h1:      clamp(2rem, 9vw, 3.25rem);
  --fs-body:    1rem;
  --fs-mono:    0.75rem;
  --fs-label:   0.8125rem;

  --lh-display: 0.9;
  --lh-body:    1.55;

  --tracking-display: -0.03em;
  --tracking-label:    0.18em;
  --tracking-mono:     0.08em;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;

  /* Corners. The site is square-cornered; the timer and its landing page
     round theirs, on three steps: small parts, controls, surfaces. */
  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 24px;

  --motion-fast: 150ms;
  --motion-base: 300ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- Phase colours: background / text pairs ----
     work      #A1333E with #E4E8EB  5.6:1
     rest      #9DB2C0 with #03040F  9.3:1
     prepare   #131B23 with #E4E8EB 14.1:1
     warm/cool #394750 with #E4E8EB  7.8:1 */
  --phase-prepare-bg: var(--color-gray-800);
  --phase-prepare-fg: var(--color-white);
  --phase-ease-bg:    var(--color-gray-600);
  --phase-ease-fg:    var(--color-white);
  --phase-work-bg:    var(--color-crimson-lit);
  --phase-work-fg:    var(--color-white);
  --phase-rest-bg:    var(--color-moonlight);
  --phase-rest-fg:    var(--color-black);
  --phase-done-bg:    var(--color-white);
  --phase-done-fg:    var(--color-black);
}

/* ---- Light theme ----
   Black on Paper. Work and rest keep their colours, so a phase reads the same
   in either theme; the neutral phases turn light, and Done inverts.
     text      #03040F on #F4F5F3 18.7:1, secondary #394750 8.8:1, muted #57676F 5.4:1
     work      #A1333E with #FFFFFF  6.9:1
     rest      #9DB2C0 with #03040F  9.3:1
     prepare   #E4E8EB with #03040F 16.6:1
     warm/cool #D6D5D0 with #03040F 13.9:1 */
:root[data-theme="light"] {
  color-scheme: light;

  --bg-primary:        var(--color-paper);
  --bg-primary-rgb:    244 245 243;
  --bg-secondary:      var(--color-paper-white);
  --bg-surface:        var(--color-paper-white);
  --bg-surface-raised: var(--color-white);
  --text-strong:       var(--color-black);
  --text-primary:      var(--color-gray-700);
  --text-secondary:    var(--color-gray-600);
  --text-muted:        var(--color-gray-500);
  --border-subtle:     var(--color-gray-400);
  --border-faint:      #CDD5DA;
  --border-hairline:   #E1E6E9;
  --focus-ring:        var(--color-black);
  --scrim:             rgb(3 4 15 / 0.4);

  --accent:            var(--color-black);
  --accent-fg:         var(--color-paper);
  --accent-press:      var(--color-gray-700);

  --mark-filter:       invert(1);
  --count-rounds:      var(--color-gray-600);
  --count-cycles:      var(--color-black);

  --phase-prepare-bg: var(--color-white);
  --phase-prepare-fg: var(--color-black);
  --phase-ease-bg:    var(--color-bone);
  --phase-ease-fg:    var(--color-black);
  --phase-work-fg:    var(--color-paper-white);
  --phase-done-bg:    var(--color-black);
  --phase-done-fg:    var(--color-paper);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-base: 0ms;
  }
}