/* ========================================================================
   Scala — Foundational Tokens
   Source of truth: design.md (Brand Manual)
   ======================================================================== */

/* Google Fonts (all three are free; self-host if performance matters) */
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@500;700&display=swap');

:root {
  /* ── SURFACES (dark, neutral, stepped) ─────────────────────────── */
  --bg:                 #0a0a0c;   /* page background (Ink) */
  --surface:            #0e0e10;   /* cards primarias / hero */
  --surface-low:        #16161a;   /* Graphite — surfaces secundarias */
  --surface-container:  #16161a;   /* alias surface-low — legacy compat */
  --surface-high:       #1e1e22;   /* hover raise / glass base */
  --surface-bright:     #1e1e22;   /* alias surface-high — legacy compat */
  --surface-variant:    #262626;   /* dividers-as-fill, progress track */

  /* ── ACCENTS (brand) ───────────────────────────────────────────── */
  --primary:    #f3ffca;   /* luminous lime — Scala hero color */
  --secondary:  #6a9cff;   /* Sky — HRV, informational */
  --tertiary:   #ff7439;   /* Ember — calories, effort, warning */

  /* ── TEXT ───────────────────────────────────────────────────────── */
  --on-surface:           #f5f3ed;  /* primary text */
  --on-surface-variant:   #8a8a8a;  /* secondary / label text */
  --outline-variant:      #484847;  /* borders, hairlines */

  /* ── SEMANTIC / STATUS ────────────────────────────────────────── */
  --success: #22d3a5;  /* Mint — sleep, good state */
  --warning: #ff7439;  /* == tertiary */
  --danger:  #ff5d5d;  /* Alert — elevated stress, destructive */
  --info:    #6a9cff;  /* == secondary */
  --sun:     #ffb547;  /* Sun — warmth, secondary positive */
  --alert:   #ff5d5d;  /* == danger */

  /* Readiness-score thresholds (Dashboard.tsx getReadinessColor) */
  --readiness-peak:    #f3ffca;  /* >= 85 */
  --readiness-good:    #22d3a5;  /* 70-84 */
  --readiness-mid:     #6a9cff;  /* 50-69 */
  --readiness-low:     #ff7439;  /* < 50 */

  /* Stress bands (getStressColor) */
  --stress-low:      #22d3a5;   /* < 26 */
  --stress-optimal:  #f3ffca;   /* 26-50 */
  --stress-elevated: #ff7439;   /* 51-75 */
  --stress-high:     #ff5d5d;   /* >= 76 */

  /* ── TYPOGRAPHY FAMILIES ──────────────────────────────────────── */
  --font-display: 'Lexend', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-label:   'JetBrains Mono', ui-monospace, monospace;

  /* ── TYPE SCALE (from tailwind.config.js + observed usage) ────── */
  --fs-display-lg:  3.5rem;    /* 56px — big numeric heroes */
  --fs-display-md:  2.5rem;    /* 40px — page H1s */
  --fs-headline-lg: 1.75rem;   /* 28px */
  --fs-headline-md: 1.25rem;   /* 20px — card titles */
  --fs-body:        0.875rem;  /* 14px — default body (text-sm) */
  --fs-body-xs:     0.75rem;   /* 12px */
  --fs-label-sm:    0.6875rem; /* 11px — the signature uppercase label */
  --fs-label-xs:    0.625rem;  /* 10px */

  --lh-tight:   1;
  --lh-snug:    1.1;
  --lh-normal:  1.3;
  --lh-relaxed: 1.5;

  /* ── RADII ───────────────────────────────────────────────────── */
  --radius-sm:  0.125rem;  /* 2px   — tiny chips */
  --radius-md:  0.375rem;  /* 6px   — inputs */
  --radius-lg:  0.5rem;    /* 8px   — buttons, pills */
  --radius-xl:  0.75rem;   /* 12px  — the default card radius */
  --radius-2xl: 1rem;      /* 16px  — message bubbles */
  --radius-full: 9999px;

  /* ── SPACING (tailwind default, 0.25rem base) ─────────────────── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;

  /* ── SHADOWS & GLOWS ──────────────────────────────────────────── */
  --glow-primary:   drop-shadow(0 0 8px rgba(243, 255, 202, 0.4));
  --glow-secondary: drop-shadow(0 0 8px rgba(106, 156, 255, 0.4));
  --glow-tertiary:  drop-shadow(0 0 8px rgba(255, 116, 57, 0.4));
  --glow-ring:      0 0 6px;   /* suffix with color at 40%, see ActivityRing */

  /* ── BLUR (glass) ─────────────────────────────────────────────── */
  --glass-bg:   rgba(44, 44, 44, 0.6);   /* surface-bright @ 60% */
  --glass-blur: 20px;

  /* ── TRANSITIONS ──────────────────────────────────────────────── */
  --ease-out:   cubic-bezier(0, 0, 0.2, 1);
  --dur-fast:   150ms;
  --dur-base:   200ms;
  --dur-ring:   1000ms;   /* activity-ring fill animation */
}

/* ========================================================================
   SEMANTIC ELEMENT DEFAULTS
   Apply these to raw HTML so unstyled markup already looks on-brand.
   ======================================================================== */

html, body {
  background: var(--bg);
  color: var(--on-surface);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--on-surface);
}

h1 { font-size: var(--fs-display-md); line-height: var(--lh-snug); }
h2 { font-size: var(--fs-headline-lg); line-height: var(--lh-snug); letter-spacing: -0.01em; }
h3 { font-size: var(--fs-headline-md); line-height: var(--lh-normal); letter-spacing: 0; }
h4 { font-size: 1rem; line-height: var(--lh-normal); }

p {
  color: var(--on-surface);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
}

small, .label,
.label-sm {
  font-family: var(--font-label);
  font-size: var(--fs-label-sm);
  line-height: 1.4;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
}

code, pre, kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  font-size: 0.85em;
  background: var(--surface);
  color: var(--primary);
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius-md);
}

hr {
  border: 0;
  height: 1px;
  background: var(--outline-variant);
  opacity: 0.3;
}

a {
  color: var(--primary);
  text-decoration: none;
  transition: opacity var(--dur-base) var(--ease-out);
}
a:hover { opacity: 0.7; }

/* ========================================================================
   UTILITY CLASSES (spare — keeps Tailwind-trained agents happy without it)
   ======================================================================== */

.font-display { font-family: var(--font-display); }
.font-body    { font-family: var(--font-body); }
.font-label   { font-family: var(--font-label); letter-spacing: 0.18em; text-transform: uppercase; }

.text-primary     { color: var(--primary); }
.text-secondary   { color: var(--secondary); }
.text-tertiary    { color: var(--tertiary); }
.text-on-surface  { color: var(--on-surface); }
.text-muted       { color: var(--on-surface-variant); }

.bg-surface           { background: var(--surface); }
.bg-surface-low       { background: var(--surface-low); }
.bg-surface-container { background: var(--surface-container); }

/* The signature glass panel (header, mobile nav) */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
}

.glow-primary   { filter: var(--glow-primary); }
.glow-secondary { filter: var(--glow-secondary); }
.glow-tertiary  { filter: var(--glow-tertiary); }

/* Scrollbars — dark, 4px, barely-there */
::-webkit-scrollbar             { width: 4px; height: 4px; }
::-webkit-scrollbar-track       { background: var(--surface-low); }
::-webkit-scrollbar-thumb       { background: var(--surface-variant); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--outline-variant); }