/* CoachMe.run — Colors & Type tokens (v2.1)
 * Evolved to the cream/serif "paper zine" world established by the
 * narrative homepage (Variant B). Dark mode is retained for the app
 * but no longer the marketing face.
 *
 * Design language:
 *   • Ground is warm cream (#ece7de) — not white, not gray. Paper.
 *   • Ink is warm near-black (#1a1613). Not #000.
 *   • Display: EB Garamond, italic-forward, regular weight (400).
 *   • Support: Inter for captions/labels/UI. Tnum for numbers.
 *   • Mint accent retained but demoted — used sparingly as a live/go marker,
 *     not as the primary brand color. The brand color is ink on paper.
 *   • Hairlines over fills. 1px dividers do the work cards used to do.
 *   • Near-zero radii on structural surfaces. Rounding is a quiet accent,
 *     not a default.
 */

/* ─────────────────────────────────────────
   FONTS (loaded via Google Fonts in documents;
   declared here so tokens reference them)
   ───────────────────────────────────────── */

/* ─────────────────────────────────────────
   COLOR TOKENS — paper (default / marketing)
   ───────────────────────────────────────── */
:root, .paper {
  /* Surfaces */
  --bg:              #ece7de;   /* warm cream paper */
  --bg-raised:       #f3efe7;   /* a shade lighter — cards, input fills */
  --bg-sunk:         #e3ddd2;   /* one shade darker — footers, wells */
  --bg-ink-plate:    #1a1613;   /* dark inversion block (photo plates, dark sections) */

  /* Ink */
  --ink:             #1a1613;   /* primary text, the pen */
  --ink-dim:         rgba(26,22,19,0.65);
  --ink-muted:       rgba(26,22,19,0.45);
  --ink-whisper:     rgba(26,22,19,0.25);

  /* Hairlines */
  --rule:            #1a1613;              /* structural 1px — always full ink */
  --rule-soft:       rgba(26,22,19,0.18);  /* secondary dividers */

  /* Accent — demoted. Used only for "live / go / synced". */
  --accent:          #4a7c5a;   /* deeper, inkier green — sits right on cream */
  --accent-dim:      rgba(74,124,90,0.12);

  /* Semantic / workout types — desaturated to live on cream */
  --green:   #4a7c5a;   /* easy, success */
  --blue:    #3d5a80;   /* long, info */
  --yellow:  #b8860b;   /* tempo, warning (dark goldenrod) */
  --orange:  #b8542a;   /* intervals, strava echo */
  --red:     #9b3a3a;   /* race, error */
  --teal:    #3d7e7a;   /* recovery */
  --purple:  #6b5b8b;   /* cross-train */
  --gray:    #8a847a;   /* rest */

  /* Shape — restrained */
  --radius:          4px;     /* small chips, badges */
  --radius-sm:       2px;
  --radius-lg:       8px;     /* only for large soft surfaces */
  --radius-pill:     999px;

  /* Elevation — hairlines, not shadows */
  --shadow:          none;
  --shadow-soft:     0 1px 0 rgba(26,22,19,0.06);

  /* Interaction fills — subtle washes tuned to ink-on-paper */
  --hover-bg:        rgba(26,22,19,0.03);
  --hover-bg-strong: rgba(26,22,19,0.06);
  --ink-press:       #2a221d;  /* primary button hover */

  /* Semantic dim fills (for badges). Tuned to sit on cream at 15% alpha. */
  --green-dim:   rgba(74,124,90,0.15);
  --blue-dim:    rgba(61,90,128,0.15);
  --yellow-dim:  rgba(184,134,11,0.15);
  --orange-dim:  rgba(184,84,42,0.15);
  --red-dim:     rgba(155,58,58,0.15);
  --teal-dim:    rgba(61,126,122,0.15);
  --purple-dim:  rgba(107,91,139,0.15);
  --gray-dim:    rgba(138,132,122,0.15);

  /* Layout */
  --sidebar-w:       240px;
  --rail-w:          56px;

  /* Touch targets — Apple HIG / WCAG minimum */
  --touch-min:       44px;

  /* Spacing scale */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;
}

/* ─────────────────────────────────────────
   COLOR TOKENS — ink (dark / app chrome)
   Preserved for the athlete app when it needs a focused
   low-light mode. Now cream-aware: inverts the paper world
   rather than standing alone.
   ───────────────────────────────────────── */
.ink {
  --bg:              #0f0d0b;   /* warm near-black, not #000 */
  --bg-raised:       #16130f;
  --bg-sunk:         #080706;
  --bg-ink-plate:    #ece7de;

  --ink:             #ece7de;   /* cream text on ink ground */
  --ink-dim:         rgba(236,231,222,0.65);
  --ink-muted:       rgba(236,231,222,0.45);
  --ink-whisper:     rgba(236,231,222,0.22);

  --rule:            rgba(236,231,222,0.85);
  --rule-soft:       rgba(236,231,222,0.15);

  --accent:          #a8e4b6;
  --accent-dim:      rgba(168,228,182,0.14);

  --green:   #a8e4b6;
  --blue:    #7fa3d1;
  --yellow:  #e0b840;
  --orange:  #e08a5c;
  --red:     #d97a7a;
  --teal:    #7fc9c3;
  --purple:  #a899c7;
  --gray:    #8a847a;

  /* Semantic dim fills — lighter alpha against ink ground */
  --green-dim:   rgba(168,228,182,0.14);
  --blue-dim:    rgba(127,163,209,0.14);
  --yellow-dim:  rgba(224,184,64,0.14);
  --orange-dim:  rgba(224,138,92,0.14);
  --red-dim:     rgba(217,122,122,0.14);
  --teal-dim:    rgba(127,201,195,0.14);
  --purple-dim:  rgba(168,153,199,0.14);
  --gray-dim:    rgba(138,132,122,0.18);

  /* Interaction fills — reversed for dark ground */
  --hover-bg:        rgba(236,231,222,0.04);
  --hover-bg-strong: rgba(236,231,222,0.08);
  --ink-press:       #dcd6c8;

  --shadow-soft: 0 1px 0 rgba(255,255,255,0.04);
}

/* ─────────────────────────────────────────
   TYPE
   ───────────────────────────────────────── */
:root {
  /* Families */
  --font-serif: 'EB Garamond', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:  'JetBrains Mono', 'SF Mono', ui-monospace, monospace;

  /* Scale — re-tuned for editorial hierarchy */
  --type-monument: clamp(56px, 8vw, 112px);  /* hero masthead, italic display */
  --type-display:  clamp(36px, 5vw, 60px);   /* section starters */
  --type-h1:       clamp(24px, 4vw, 32px);     /* article h1 — fluid on mobile */
  --type-h2:       clamp(18px, 3vw, 22px);     /* article h2 */
  --type-h3:       clamp(16px, 2.5vw, 18px);
  --type-lede:     20px;                      /* italic lede / quotes */
  --type-body:     16px;                      /* reading body */
  --type-small:    14px;
  --type-caption:  12px;
  --type-label:    10px;                      /* caps eyebrow */

  /* Weights — note: serif stays at 400 by design */
  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;
}

/* Semantic text primitives */
.t-monument {
  font-family: var(--font-serif);
  font-size: var(--type-monument);
  font-weight: 400;
  font-style: italic;
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.t-display {
  font-family: var(--font-serif);
  font-size: var(--type-display);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.t-h1 {
  font-family: var(--font-serif);
  font-size: var(--type-h1);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.t-h2 {
  font-family: var(--font-serif);
  font-size: var(--type-h2);
  font-weight: 400;
  font-style: italic;
  line-height: 1.3;
  color: var(--ink);
}
.t-h3 {
  font-family: var(--font-sans);
  font-size: var(--type-h3);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.t-lede {
  font-family: var(--font-serif);
  font-size: var(--type-lede);
  font-style: italic;
  line-height: 1.55;
  color: var(--ink-dim);
}
.t-body {
  font-family: var(--font-serif);
  font-size: var(--type-body);
  font-weight: 400;
  line-height: 1.65;
  color: var(--ink);
}
.t-body-sans {
  font-family: var(--font-sans);
  font-size: var(--type-small);
  line-height: 1.55;
  color: var(--ink);
}
.t-dim     { color: var(--ink-dim); }
.t-muted   { color: var(--ink-muted); }
.t-caption {
  font-family: var(--font-sans);
  font-size: var(--type-caption);
  color: var(--ink-dim);
  line-height: 1.5;
}
.t-eyebrow, .t-label {
  font-family: var(--font-sans);
  font-size: var(--type-label);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-weight: 500;
  color: var(--ink-muted);
}
.t-mono {
  font-family: var(--font-mono);
  font-feature-settings: 'tnum' 1, 'zero' 1;
}
/* The CoachMe signature number style — mono, tabular, warm */
.t-stat {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-feature-settings: 'tnum' 1;
}

/* ─────────────────────────────────────────
   UTILITY
   ───────────────────────────────────────── */
.grain {
  position: relative;
}
.grain::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  z-index: 1;
}

.rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 0;
}
.rule-soft {
  border: 0;
  border-top: 1px solid var(--rule-soft);
  margin: 0;
}

/* "Paper card" — the new primary surface. No glass, no blur. */
.paper-card {
  background: var(--bg-raised);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  padding: 20px;
}

/* Kept for reference during migration — DO NOT use in new work.
   Glass/blur belongs to the retired v1 system. */