/*
 * Design Tokens — Myra Studio
 *
 * Pure CSS custom properties. No selectors, no classes, no components.
 * Component styles live in their own files and reference these tokens.
 *
 * See DESIGN.md for intent and conventions.
 */

:root {

  /* --- Palette --------------------------------------------------------- */
  /* Raw color values. Semantic tokens below reference these.               */

  /* Neutral scale — warm stone grays */
  --palette-neutral-50:  #fafaf9;
  --palette-neutral-100: #f5f5f4;
  --palette-neutral-200: #e7e5e4;
  --palette-neutral-300: #d6d3d1;
  --palette-neutral-400: #a8a29e;
  --palette-neutral-500: #78716c;
  --palette-neutral-600: #57534e;
  --palette-neutral-700: #44403c;
  --palette-neutral-800: #292524;
  --palette-neutral-900: #1c1917;

  /* Brand — derived from #042731 (dark teal) */
  --palette-brand-950: #042731;
  --palette-brand-900: #083a49;
  --palette-brand-800: #0d5268;
  --palette-brand-700: #136b87;
  --palette-brand-600: #1a85a6;
  --palette-brand-500: #2199bc;
  --palette-brand-400: #3db3d4;
  --palette-brand-300: #6dcbe3;
  --palette-brand-200: #a3dded;
  --palette-brand-100: #d4eff7;
  --palette-brand-50:  #edf8fb;

  /* Phase colors */
  --palette-work:    #059669;  /* emerald-600 — active, go, similar weight to violet */
  --palette-rest:    #7c3aed;  /* violet-600 — calm, passive, clearly not-work */
  --palette-warning: #ea580c;  /* orange-600 — true orange, conventional urgency */
  --palette-error:   #dc2626;  /* red-600 — clearly distinct from warning */
  --palette-success: #16a34a;  /* green-600 — quiet confirmation */

  /* Chart accent — chromatic complement to the brand teal, with no status
   * meaning. Used as a "second series" colour where status colours would
   * import the wrong semantics (a green or orange secondary line reads as
   * go / warning, which is misleading on a measurement axis). */
  --palette-amber-700: #b45309;  /* warm ochre, opposite the brand teal */

  /* Phase backgrounds (tinted surfaces) */
  --palette-work-bg:    #ecfdf5;  /* emerald-50 */
  --palette-rest-bg:    #f5f3ff;  /* violet-50 */
  --palette-warning-bg: #fff7ed;  /* orange-50 */
  --palette-error-bg:   #fef2f2;  /* red-50 */
  --palette-success-bg: #f0fdf4;  /* green-50 */


  /* --- Semantic colors ------------------------------------------------- */

  --color-text-primary:   var(--palette-neutral-900);
  --color-text-secondary: var(--palette-neutral-500);
  --color-text-muted:     var(--palette-neutral-400);
  --color-text-inverse:   var(--palette-neutral-50);

  --color-bg-page:    var(--palette-neutral-50);
  --color-bg-surface: #ffffff;
  --color-bg-muted:   var(--palette-neutral-100);

  --color-border-default: var(--palette-neutral-200);
  --color-border-strong:  var(--palette-neutral-300);
  /* Hairline used by sub-nav.css (and now the benchmark tree). Was
     referenced before it existed, so the tab-strip underline silently
     dropped — defining it here restores it. */
  --color-border-subtle:  var(--palette-neutral-200);

  --color-accent:         var(--palette-brand-950);
  --color-accent-hover:   var(--palette-brand-900);
  --color-accent-light:   var(--palette-brand-100);
  --color-accent-surface: var(--palette-brand-50);

  --color-focus-ring: var(--palette-brand-400);

  /* Chart series colours. Kept as their own tokens (rather than
   * reusing --color-accent) so a future restyle can shift chart
   * series without dragging buttons / focus rings along. Primary
   * matches the brand teal seen in the nav; secondary is amber to
   * give a clear cool-vs-warm split across the two y-axes. */
  --color-chart-primary:   var(--palette-brand-950);
  --color-chart-secondary: var(--palette-amber-700);

  /* Benchmark categorical series palette — for the team Benchmark page,
   * where N lactate curves share one chart. Muted and warm-leaning to sit
   * inside the restrained, teal-anchored system, and chosen to AVOID the
   * reserved status hues (no pure red/orange/green = error/warning/
   * success/work). A pin claims a slot by its position in the URL `pin`
   * list, so a shared link reproduces the colours; wraps after 8 (8+
   * curves is already chart spaghetti). The reference-vs-comparison tier
   * is encoded by line weight + dotting + marker size in JS, not colour. */
  --chart-series-1: #1a85a6;  /* teal   (brand-600) — slot 1, the anchor */
  --chart-series-2: #b45309;  /* ochre  (amber-700) */
  --chart-series-3: #4f6d8f;  /* slate blue */
  --chart-series-4: #a3553f;  /* clay   — not error-red */
  --chart-series-5: #835a7a;  /* plum   — not rest-violet */
  --chart-series-6: #6f7d3c;  /* olive  — not success-green */
  --chart-series-7: #5b5e9a;  /* indigo */
  --chart-series-8: #877a64;  /* stone  — warm taupe */

  /* Domain states */
  --color-phase-work:       var(--palette-work);
  --color-phase-work-bg:    var(--palette-work-bg);
  --color-phase-rest:       var(--palette-rest);
  --color-phase-rest-bg:    var(--palette-rest-bg);
  --color-phase-paused:     var(--palette-neutral-500);
  --color-phase-paused-bg:  var(--palette-neutral-100);
  --color-warning:          var(--palette-warning);
  --color-warning-bg:       var(--palette-warning-bg);
  --color-error:            var(--palette-error);
  --color-error-bg:         var(--palette-error-bg);
  --color-success:          var(--palette-success);
  --color-success-bg:       var(--palette-success-bg);


  /* --- Typography ------------------------------------------------------ */

  --font-family-base: "Inter", system-ui, -apple-system, sans-serif;
  --font-family-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", monospace;

  --font-size-xs:     0.75rem;   /* 12px */
  --font-size-sm:     0.875rem;  /* 14px */
  --font-size-base:   1rem;      /* 16px */
  --font-size-lg:     1.125rem;  /* 18px */
  --font-size-xl:     1.25rem;   /* 20px */
  --font-size-2xl:    1.5rem;    /* 24px */
  --font-size-3xl:    1.875rem;  /* 30px */
  --font-size-timer:  3rem;      /* 48px — timer display */

  --font-weight-normal:   400;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --line-height-tight:   1.25;
  --line-height-base:    1.5;
  --line-height-relaxed: 1.625;

  --letter-spacing-tight: -0.01em;
  --letter-spacing-base:  0;


  /* --- Spacing --------------------------------------------------------- */

  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-24: 6rem;      /* 96px */


  /* --- Layout ---------------------------------------------------------- */

  --width-max-content: 1120px;
  --width-max-card:    640px;
  --page-padding:      var(--space-6);
  --card-padding:      var(--space-6);
  --gap-default:       var(--space-4);
  --gap-form-row:      var(--space-5);


  /* --- Borders & Radii ------------------------------------------------- */

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-full: 9999px;

  --border-width: 1px;


  /* --- Shadows --------------------------------------------------------- */

  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.07);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.08);


  /* --- Transitions ----------------------------------------------------- */

  --transition-fast: 100ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;


  /* --- Breakpoints (reference only — can't use in media queries) -------- */
  /* sm: 640px   — mobile landscape / small tablet */
  /* md: 768px   — tablet portrait */
  /* lg: 1024px  — tablet landscape / small laptop */
  /* xl: 1280px  — laptop / desktop */
}