/* ============================================================
   Claude Design System — Foundations
   Colors + Typography tokens (base + semantic)
   ============================================================ */

/* Google Fonts substitutes — flag: Anthropic proprietary faces unavailable.
   Source Serif 4 approximates Tiempos/Anthropic Serif.
   Inter approximates Styrene/Anthropic Sans.
   JetBrains Mono approximates Anthropic Mono. */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- BRAND ---------- */
  --brand-terracotta: #c96442;
  --brand-coral: #d97757;

  /* ---------- NEUTRALS (warm) ---------- */
  --near-black: #141413;
  --dark-warm: #3d3d3a;
  --charcoal-warm: #4d4c48;
  --olive-gray: #5e5d59;
  --stone-gray: #87867f;
  --warm-silver: #b0aea5;
  --ring-deep: #c2c0b6;
  --ring-warm: #d1cfc5;
  --warm-sand: #e8e6dc;
  --border-warm: #e8e6dc;
  --border-cream: #f0eee6;
  --parchment: #f5f4ed;
  --ivory: #faf9f5;
  --pure-white: #ffffff;
  --dark-surface: #30302e;
  --deep-dark: #141413;

  /* ---------- SEMANTIC ---------- */
  --error-crimson: #b53333;
  --focus-blue: #3898ec;
  --ring-subtle: #dedc01;

  /* ---------- FOREGROUND / BACKGROUND TOKENS ---------- */
  --fg-1: var(--near-black);          /* primary text */
  --fg-2: var(--olive-gray);          /* secondary text */
  --fg-3: var(--stone-gray);          /* tertiary / meta */
  --fg-link: var(--dark-warm);
  --fg-on-dark-1: var(--ivory);
  --fg-on-dark-2: var(--warm-silver);

  --bg-page: var(--parchment);
  --bg-surface: var(--ivory);
  --bg-elevated: var(--pure-white);
  --bg-muted: var(--warm-sand);
  --bg-dark-page: var(--near-black);
  --bg-dark-surface: var(--dark-surface);

  --border-1: var(--border-cream);
  --border-2: var(--border-warm);
  --border-dark: var(--dark-surface);

  /* ---------- FONT FAMILIES ---------- */
  --font-serif: "Source Serif 4", "Anthropic Serif", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", "Anthropic Sans", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "Anthropic Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---------- TYPE SCALE (base) ---------- */
  --fs-display: 64px;
  --fs-section: 52px;
  --fs-sub-lg: 36px;
  --fs-sub: 32px;
  --fs-sub-sm: 25px;
  --fs-feature: 20.8px;
  --fs-body-lg: 20px;
  --fs-body: 17px;
  --fs-body-std: 16px;
  --fs-body-sm: 15px;
  --fs-caption: 14px;
  --fs-label: 12px;
  --fs-overline: 10px;
  --fs-micro: 9.6px;

  --lh-tight: 1.10;
  --lh-snug: 1.20;
  --lh-cozy: 1.30;
  --lh-standard: 1.43;
  --lh-relaxed: 1.60;

  /* ---------- SPACING (8px base, Claude scale) ---------- */
  --sp-0_5: 3px;
  --sp-1: 4px;
  --sp-1_5: 6px;
  --sp-2: 8px;
  --sp-2_5: 10px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 30px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-30: 120px;

  /* ---------- RADII ---------- */
  --r-sharp: 4px;
  --r-subtle: 6px;
  --r-comfy: 8px;
  --r-generous: 12px;
  --r-very: 16px;
  --r-highly: 24px;
  --r-max: 32px;

  /* ---------- ELEVATION ---------- */
  --shadow-ring-1: 0 0 0 1px var(--ring-warm);
  --shadow-ring-deep: 0 0 0 1px var(--ring-deep);
  --shadow-whisper: 0 4px 24px rgba(0,0,0,0.05);
  --shadow-inset: inset 0 0 0 1px rgba(0,0,0,0.15);

  /* ---------- MOTION ---------- */
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-enter: cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-exit: cubic-bezier(0.4, 0.0, 1, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 280ms;
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   Use directly: <h1 class="t-display">, <p class="t-body">, etc.
   ============================================================ */

html, body {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.t-display {
  font-family: var(--font-serif);
  font-size: var(--fs-display);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
}

.t-h1 {
  font-family: var(--font-serif);
  font-size: var(--fs-section);
  font-weight: 500;
  line-height: var(--lh-snug);
}

.t-h2 {
  font-family: var(--font-serif);
  font-size: var(--fs-sub-lg);
  font-weight: 500;
  line-height: var(--lh-cozy);
}

.t-h3 {
  font-family: var(--font-serif);
  font-size: var(--fs-sub);
  font-weight: 500;
  line-height: var(--lh-tight);
}

.t-h4 {
  font-family: var(--font-serif);
  font-size: var(--fs-sub-sm);
  font-weight: 500;
  line-height: var(--lh-snug);
}

.t-feature {
  font-family: var(--font-serif);
  font-size: var(--fs-feature);
  font-weight: 500;
  line-height: var(--lh-snug);
}

.t-body-serif {
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-relaxed);
}

.t-body-lg {
  font-family: var(--font-sans);
  font-size: var(--fs-body-lg);
  font-weight: 400;
  line-height: var(--lh-relaxed);
}

.t-body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-relaxed);
}

.t-body-std {
  font-family: var(--font-sans);
  font-size: var(--fs-body-std);
  font-weight: 400;
  line-height: var(--lh-relaxed);
}

.t-body-sm {
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  font-weight: 400;
  line-height: var(--lh-relaxed);
}

.t-caption {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: 400;
  line-height: var(--lh-standard);
  color: var(--fg-3);
}

.t-label {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: 0.12px;
}

.t-overline {
  font-family: var(--font-sans);
  font-size: var(--fs-overline);
  font-weight: 400;
  line-height: var(--lh-relaxed);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--fg-3);
}

.t-code {
  font-family: var(--font-mono);
  font-size: var(--fs-body-sm);
  font-weight: 400;
  line-height: var(--lh-relaxed);
  letter-spacing: -0.32px;
}