/* =========================================================
   Anthropic-Inspired Design System
   colors_and_type.css — base tokens + semantic CSS variables
   ========================================================= */

/* ---------- Fonts (Google Fonts substitutions) ----------
   Real Anthropic uses custom in-house typefaces ("Anthropic Serif",
   "Anthropic Sans", "Anthropic Mono"). We substitute:
     - Serif → "Tiempos"-style: "Source Serif 4" (close in proportion + warmth)
       Fallback: Georgia
     - Sans  → "Styrene B"-style: "Inter"
       Fallback: system-ui, Arial
     - Mono  → "JetBrains Mono"
       Fallback: ui-monospace, monospace
   ⚠ FLAG: these are substitutions — please supply real font files if available.
*/
@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;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- Color tokens (raw) ---------- */

  /* Brand */
  --color-brand-terracotta: #c96442;   /* primary CTA */
  --color-brand-coral:      #d97757;   /* lighter accent / link on dark */

  /* Surfaces */
  --color-parchment:  #f5f4ed;         /* primary light page bg */
  --color-ivory:      #faf9f5;         /* lightest card surface */
  --color-white:      #ffffff;
  --color-warm-sand:  #e8e6dc;         /* secondary button bg */
  --color-dark-surf:  #30302e;         /* dark container */
  --color-deep-dark:  #141413;         /* dark page bg / near-black */

  /* Neutrals & text */
  --color-charcoal-warm: #4d4c48;      /* text on light warm */
  --color-olive-gray:    #5e5d59;      /* secondary body */
  --color-stone-gray:    #87867f;      /* tertiary / metadata */
  --color-dark-warm:     #3d3d3a;      /* emphasized secondary */
  --color-warm-silver:   #b0aea5;      /* text on dark surfaces */

  /* Borders & rings */
  --color-border-cream: #f0eee6;       /* light borders */
  --color-border-warm:  #e8e6dc;       /* prominent dividers */
  --color-border-dark:  #30302e;       /* dark borders */
  --color-ring-warm:    #d1cfc5;
  --color-ring-subtle:  #dedcd1;       /* corrected from spec typo */
  --color-ring-deep:    #c2c0b6;

  /* Semantic */
  --color-error-crimson: #b53333;
  --color-focus-blue:    #3898ec;

  /* ---------- Semantic color aliases ---------- */
  --bg-page:        var(--color-parchment);
  --bg-card:        var(--color-ivory);
  --bg-elevated:    var(--color-white);
  --bg-button:      var(--color-warm-sand);
  --bg-page-dark:   var(--color-deep-dark);
  --bg-card-dark:   var(--color-dark-surf);

  --fg-primary:     var(--color-deep-dark);
  --fg-secondary:   var(--color-olive-gray);
  --fg-tertiary:    var(--color-stone-gray);
  --fg-emphasized:  var(--color-dark-warm);
  --fg-on-dark:     var(--color-warm-silver);
  --fg-on-brand:    var(--color-ivory);
  --fg-button:      var(--color-charcoal-warm);

  --border-default: var(--color-border-cream);
  --border-strong:  var(--color-border-warm);
  --border-dark:    var(--color-border-dark);

  --accent-brand:   var(--color-brand-terracotta);
  --accent-coral:   var(--color-brand-coral);
  --accent-error:   var(--color-error-crimson);
  --accent-focus:   var(--color-focus-blue);

  /* ---------- Typography ---------- */
  --font-serif: "Source Serif 4", "Tiempos Headline", Georgia, "Times New Roman", serif;
  --font-sans:  "Inter", "Styrene B", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-mono:  "JetBrains Mono", "Anthropic Mono", ui-monospace, "SF Mono", Consolas, monospace;

  /* Type scale (px → rem) */
  --fs-display:    4rem;       /* 64 */
  --fs-h1:         3.25rem;    /* 52 */
  --fs-h2:         2.3rem;     /* ~36 */
  --fs-h3:         2rem;       /* 32 */
  --fs-h4:         1.6rem;     /* ~25 */
  --fs-h5:         1.3rem;     /* ~20 */
  --fs-body-lg:    1.25rem;    /* 20 */
  --fs-body:       1.0625rem;  /* 17 */
  --fs-body-sm:    1rem;       /* 16 */
  --fs-small:      0.9375rem;  /* 15 */
  --fs-caption:    0.875rem;   /* 14 */
  --fs-label:      0.75rem;    /* 12 */
  --fs-overline:   0.625rem;   /* 10 */
  --fs-micro:      0.6rem;

  --lh-tight:    1.10;
  --lh-snug:     1.20;
  --lh-medium:   1.30;
  --lh-normal:   1.43;
  --lh-relaxed:  1.60;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;

  /* ---------- Spacing (8px base, with sub-steps) ---------- */
  --space-1:  3px;
  --space-2:  4px;
  --space-3:  6px;
  --space-4:  8px;
  --space-5:  10px;
  --space-6:  12px;
  --space-7:  16px;
  --space-8:  20px;
  --space-9:  24px;
  --space-10: 30px;
  --space-12: 48px;
  --space-16: 80px;
  --space-20: 120px;

  /* ---------- Radii ---------- */
  --radius-sharp:    4px;
  --radius-xs:       6px;
  --radius-sm:       8px;
  --radius-md:       12px;
  --radius-lg:       16px;
  --radius-xl:       24px;
  --radius-2xl:      32px;
  --radius-full:     999px;

  /* ---------- Shadows / elevation ---------- */
  --shadow-ring-warm:    0 0 0 1px var(--color-ring-warm);
  --shadow-ring-deep:    0 0 0 1px var(--color-ring-deep);
  --shadow-ring-subtle:  0 0 0 1px var(--color-ring-subtle);
  --shadow-ring-brand:   0 0 0 1px var(--color-brand-terracotta);
  --shadow-ring-dark:    0 0 0 1px var(--color-dark-surf);
  --shadow-whisper:      0 4px 24px rgba(0,0,0,0.05);
  --shadow-inset-press:  inset 0 0 0 1px rgba(0,0,0,0.15);

  /* ---------- Container ---------- */
  --container-max: 1200px;
}

/* =========================================================
   Semantic element styles
   These take effect when colors_and_type.css is loaded as
   a base reset for prototypes & UI kits.
   ========================================================= */

html, body {
  background: var(--bg-page);
  color: var(--fg-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-relaxed);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: var(--fw-medium);
  color: var(--fg-primary);
  margin: 0;
  letter-spacing: 0;
  text-wrap: balance;
}

h1 { font-size: var(--fs-display); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h1);      line-height: var(--lh-snug); }
h3 { font-size: var(--fs-h2);      line-height: var(--lh-medium); }
h4 { font-size: var(--fs-h3);      line-height: var(--lh-tight); }
h5 { font-size: var(--fs-h4);      line-height: var(--lh-snug); }
h6 { font-size: var(--fs-h5);      line-height: var(--lh-snug); }

p {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-secondary);
  margin: 0 0 1em 0;
  text-wrap: pretty;
}

.serif-body {
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-secondary);
}

a {
  color: var(--fg-primary);
  text-decoration: none;
  transition: color 120ms ease;
}
a:hover { color: var(--accent-brand); }

code, pre, .mono {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: -0.32px;
  line-height: var(--lh-relaxed);
}

.label {
  font-size: var(--fs-label);
  letter-spacing: 0.12px;
  font-weight: var(--fw-medium);
  color: var(--fg-tertiary);
}

.overline {
  font-size: var(--fs-overline);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--fg-tertiary);
}

/* Dark section */
.theme-dark {
  background: var(--bg-page-dark);
  color: var(--fg-on-dark);
}
.theme-dark h1, .theme-dark h2, .theme-dark h3,
.theme-dark h4, .theme-dark h5, .theme-dark h6 {
  color: var(--color-ivory);
}
.theme-dark p { color: var(--fg-on-dark); }
.theme-dark a { color: var(--accent-coral); }
.theme-dark a:hover { color: var(--color-ivory); }