/* ==========================================================================
   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.

   The one addition is the PHASE set at the bottom. The site budgets Signal
   Red at about two uses a page; 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.
   ========================================================================== */

: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-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:        var(--color-black);
  --bg-secondary:      var(--color-black-deep);
  --bg-surface:        var(--color-gray-800);
  --bg-surface-raised: var(--color-gray-700);
  --text-primary:      var(--color-bone);
  --text-secondary:    var(--color-moonlight);
  --text-muted:        var(--color-gray-400);
  --border-subtle:     var(--color-gray-600);
  --focus-ring:        var(--color-white);

  /* 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;

  --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-ease-bg:    var(--color-gray-600);
  --phase-work-bg:    var(--color-crimson-lit);
  --phase-rest-bg:    var(--color-moonlight);
  --phase-done-bg:    var(--color-white);
}

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