/* ============================================================
   Claude Design System — Colors & Type
   Warm parchment palette. Serif for authority, sans for utility.
   ============================================================ */

/* --- Web fonts --------------------------------------------------
   Claude uses custom "Anthropic Serif / Sans / Mono" typefaces.
   Public substitutes (flagged in README):
     Anthropic Serif → "Source Serif 4" (Georgia fallback)
     Anthropic Sans  → "Inter"           (Arial fallback)
     Anthropic Mono  → "JetBrains Mono"  (ui-monospace fallback)
   ---------------------------------------------------------------- */
@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 {
  /* ---------- COLOR: brand ---------- */
  --brand-terracotta: #c96442;   /* primary CTA, brand moments */
  --brand-coral:      #d97757;   /* lighter accent, links on dark */

  /* ---------- COLOR: surface (light) ---------- */
  --surface-parchment: #f5f4ed;  /* page background — THE Claude color */
  --surface-ivory:     #faf9f5;  /* cards, elevated containers */
  --surface-white:     #ffffff;  /* reserved: specific buttons / max contrast */
  --surface-sand:      #e8e6dc;  /* secondary buttons, prominent surfaces */

  /* ---------- COLOR: surface (dark) ---------- */
  --surface-dark:      #30302e;  /* dark cards, nav borders */
  --surface-deep:      #141413;  /* darkest page background */

  /* ---------- COLOR: text (warm neutrals) ---------- */
  --text-near-black:    #141413; /* primary text */
  --text-charcoal-warm: #4d4c48; /* button text on light warm */
  --text-dark-warm:     #3d3d3a; /* emphasized secondary links */
  --text-olive-gray:    #5e5d59; /* secondary body */
  --text-stone-gray:    #87867f; /* tertiary, footnotes */
  --text-warm-silver:   #b0aea5; /* text on dark surfaces */

  /* ---------- COLOR: borders ---------- */
  --border-cream: #f0eee6;       /* standard light border */
  --border-warm:  #e8e6dc;       /* prominent light border / dividers */
  --border-dark:  #30302e;       /* dark surface border */

  /* ---------- COLOR: rings (shadow halos) ---------- */
  --ring-warm:   #d1cfc5;        /* default ring */
  --ring-subtle: #dedc01;        /* lighter interactive ring */
  --ring-deep:   #c2c0b6;        /* active / pressed ring */

  /* ---------- COLOR: semantic ---------- */
  --semantic-error: #b53333;     /* error crimson */
  --semantic-focus: #3898ec;     /* focus blue — only cool color */

  /* ---------- Semantic aliases (use these in components) ---------- */
  --bg:            var(--surface-parchment);
  --bg-elevated:   var(--surface-ivory);
  --bg-inverse:    var(--surface-deep);
  --fg:            var(--text-near-black);
  --fg-muted:      var(--text-olive-gray);
  --fg-subtle:     var(--text-stone-gray);
  --fg-on-dark:    var(--text-warm-silver);
  --border:        var(--border-cream);
  --border-strong: var(--border-warm);
  --accent:        var(--brand-terracotta);

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

  /* ---------- TYPE: scale ---------- */
  --fs-display:     4rem;      /* 64px */
  --fs-h1:          3.25rem;   /* 52px */
  --fs-h2:          2.3rem;    /* ~36.8px */
  --fs-h3:          2rem;      /* 32px */
  --fs-h4:          1.6rem;    /* ~25.6px */
  --fs-h5:          1.3rem;    /* 20.8px */
  --fs-body-lg:     1.25rem;   /* 20px */
  --fs-body:        1.0625rem; /* 17px */
  --fs-body-md:     1rem;      /* 16px */
  --fs-body-sm:     0.9375rem; /* 15px */
  --fs-caption:     0.875rem;  /* 14px */
  --fs-label:       0.75rem;   /* 12px */
  --fs-overline:    0.625rem;  /* 10px */
  --fs-micro:       0.6rem;    /* 9.6px */

  /* ---------- TYPE: weights (serif is always 500) ---------- */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;

  /* ---------- TYPE: line heights ---------- */
  --lh-tight:   1.10;
  --lh-heading: 1.20;
  --lh-snug:    1.30;
  --lh-normal:  1.43;
  --lh-relaxed: 1.60;

  /* ---------- SPACING (8px base) ---------- */
  --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-section: 96px;

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

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

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

/* ============================================================
   SEMANTIC / ELEMENT DEFAULTS
   Drop this stylesheet into a page and get Claude-flavored text.
   ============================================================ */
html { font-family: var(--font-sans); color: var(--fg); background: var(--bg); }
body { margin: 0; font-size: var(--fs-body-md); line-height: var(--lh-relaxed); -webkit-font-smoothing: antialiased; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: var(--fw-medium);
  color: var(--fg);
  margin: 0 0 0.5em;
  letter-spacing: 0;
}
h1 { font-size: var(--fs-display); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h1);      line-height: var(--lh-heading); }
h3 { font-size: var(--fs-h2);      line-height: var(--lh-snug); }
h4 { font-size: var(--fs-h3);      line-height: var(--lh-tight); }
h5 { font-size: var(--fs-h4);      line-height: var(--lh-heading); }
h6 { font-size: var(--fs-h5);      line-height: var(--lh-heading); }

p  { margin: 0 0 1em; color: var(--fg); line-height: var(--lh-relaxed); }

small { font-size: var(--fs-caption); color: var(--fg-muted); }

a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
a:hover { color: var(--accent); text-decoration-color: currentColor; }

code, kbd, pre, samp {
  font-family: var(--font-mono);
  font-size: var(--fs-body-sm);
  letter-spacing: -0.32px;
}
code { background: var(--surface-sand); padding: 0.1em 0.35em; border-radius: var(--radius-sharp); color: var(--text-charcoal-warm); }
pre  { background: var(--surface-deep); color: var(--fg-on-dark); padding: var(--space-7); border-radius: var(--radius-generous); overflow: auto; line-height: var(--lh-relaxed); }
pre code { background: transparent; padding: 0; color: inherit; }

hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-9) 0; }

::selection { background: color-mix(in oklab, var(--brand-terracotta) 30%, transparent); }

/* Utility classes --------------------------------------------------- */
.u-serif      { font-family: var(--font-serif); font-weight: var(--fw-medium); }
.u-sans       { font-family: var(--font-sans); }
.u-mono       { font-family: var(--font-mono); }
.u-display    { font-family: var(--font-serif); font-weight: var(--fw-medium); font-size: var(--fs-display); line-height: var(--lh-tight); }
.u-h1         { font-family: var(--font-serif); font-weight: var(--fw-medium); font-size: var(--fs-h1);      line-height: var(--lh-heading); }
.u-h2         { font-family: var(--font-serif); font-weight: var(--fw-medium); font-size: var(--fs-h2);      line-height: var(--lh-snug); }
.u-h3         { font-family: var(--font-serif); font-weight: var(--fw-medium); font-size: var(--fs-h3);      line-height: var(--lh-tight); }
.u-h4         { font-family: var(--font-serif); font-weight: var(--fw-medium); font-size: var(--fs-h4);      line-height: var(--lh-heading); }
.u-h5         { font-family: var(--font-serif); font-weight: var(--fw-medium); font-size: var(--fs-h5);      line-height: var(--lh-heading); }
.u-body-lg    { font-size: var(--fs-body-lg);  line-height: var(--lh-relaxed); }
.u-body       { font-size: var(--fs-body);     line-height: var(--lh-relaxed); }
.u-caption    { font-size: var(--fs-caption);  line-height: var(--lh-normal);  color: var(--fg-muted); }
.u-label      { font-size: var(--fs-label);    line-height: var(--lh-heading); letter-spacing: 0.12px; }
.u-overline   { font-size: var(--fs-overline); letter-spacing: 0.5px; text-transform: uppercase; color: var(--fg-subtle); }
.u-muted      { color: var(--fg-muted); }
.u-subtle     { color: var(--fg-subtle); }
.u-on-dark    { color: var(--fg-on-dark); }

.u-bg-parchment { background: var(--surface-parchment); color: var(--fg); }
.u-bg-ivory     { background: var(--surface-ivory);     color: var(--fg); }
.u-bg-sand      { background: var(--surface-sand);      color: var(--text-charcoal-warm); }
.u-bg-dark      { background: var(--surface-deep);      color: var(--fg-on-dark); }