/* ============================================================
   Claude Design System — Foundations
   Colors + Typography CSS variables
   ============================================================ */

/* Fonts: Copernicus / StyreneB are licensed Anthropic typefaces.
   We substitute Fraunces (display serif) and Inter (humanist sans)
   from Google Fonts. JetBrains Mono is used as-is.
   ↳ See README "Known Gaps" — flag font substitution to user. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- Color: Brand / Accent ---------- */
  --color-primary:           #cc785c;  /* Anthropic coral */
  --color-primary-active:    #a9583e;  /* press / darker */
  --color-primary-disabled:  #e6dfd8;  /* cream-tinted disabled */
  --color-accent-teal:       #5db8a6;
  --color-accent-amber:      #e8a55a;

  /* ---------- Color: Surface ---------- */
  --color-canvas:               #faf9f5;  /* tinted cream — page floor */
  --color-surface-soft:         #f5f0e8;
  --color-surface-card:         #efe9de;  /* feature cards */
  --color-surface-cream-strong: #e8e0d2;
  --color-surface-dark:         #181715;  /* product surfaces, footer */
  --color-surface-dark-elevated:#252320;
  --color-surface-dark-soft:    #1f1e1b;

  /* ---------- Color: Hairlines ---------- */
  --color-hairline:      #e6dfd8;
  --color-hairline-soft: #ebe6df;

  /* ---------- Color: Ink / Text ---------- */
  --color-ink:           #141413;
  --color-body-strong:   #252523;
  --color-body:          #3d3d3a;
  --color-muted:         #6c6a64;
  --color-muted-soft:    #8e8b82;
  --color-on-primary:    #ffffff;
  --color-on-dark:       #faf9f5;
  --color-on-dark-soft:  #a09d96;

  /* ---------- Color: Semantic ---------- */
  --color-success: #5db872;
  --color-warning: #d4a017;
  --color-error:   #c64545;

  /* ---------- Type families ---------- */
  --font-display: "Copernicus", "Tiempos Headline", "Fraunces", Garamond, "Times New Roman", serif;
  --font-body:    "StyreneB", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- Type scale ---------- */
  --type-display-xl-size: 64px;   --type-display-xl-lh: 1.05; --type-display-xl-tracking: -1.5px;
  --type-display-lg-size: 48px;   --type-display-lg-lh: 1.10; --type-display-lg-tracking: -1px;
  --type-display-md-size: 36px;   --type-display-md-lh: 1.15; --type-display-md-tracking: -0.5px;
  --type-display-sm-size: 28px;   --type-display-sm-lh: 1.20; --type-display-sm-tracking: -0.3px;
  --type-title-lg-size:   22px;   --type-title-lg-lh:   1.30;
  --type-title-md-size:   18px;   --type-title-md-lh:   1.40;
  --type-title-sm-size:   16px;   --type-title-sm-lh:   1.40;
  --type-body-md-size:    16px;   --type-body-md-lh:    1.55;
  --type-body-sm-size:    14px;   --type-body-sm-lh:    1.55;
  --type-caption-size:    13px;   --type-caption-lh:    1.40;
  --type-caption-up-size: 12px;   --type-caption-up-tracking: 1.5px;
  --type-code-size:       14px;   --type-code-lh:       1.60;
  --type-button-size:     14px;   --type-button-lh:     1.00;
  --type-nav-size:        14px;   --type-nav-lh:        1.40;

  /* ---------- Radii ---------- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-pill: 9999px;
  --radius-full: 9999px;

  /* ---------- Spacing ---------- */
  --space-xxs:    4px;
  --space-xs:     8px;
  --space-sm:    12px;
  --space-md:    16px;
  --space-lg:    24px;
  --space-xl:    32px;
  --space-xxl:   48px;
  --space-section: 96px;

  /* ---------- Elevation ---------- */
  --shadow-soft:  0 1px 3px rgba(20,20,19,0.08);
  --shadow-focus-coral: 0 0 0 3px rgba(204,120,92,0.18);
}

/* ============================================================
   Semantic typography classes
   Use these on real elements OR derive from them in component CSS.
   ============================================================ */

.t-display-xl,
h1.display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--type-display-xl-size);
  line-height: var(--type-display-xl-lh);
  letter-spacing: var(--type-display-xl-tracking);
  color: var(--color-ink);
}
.t-display-lg, h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--type-display-lg-size);
  line-height: var(--type-display-lg-lh);
  letter-spacing: var(--type-display-lg-tracking);
  color: var(--color-ink);
}
.t-display-md, h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--type-display-md-size);
  line-height: var(--type-display-md-lh);
  letter-spacing: var(--type-display-md-tracking);
  color: var(--color-ink);
}
.t-display-sm, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--type-display-sm-size);
  line-height: var(--type-display-sm-lh);
  letter-spacing: var(--type-display-sm-tracking);
  color: var(--color-ink);
}
.t-title-lg, h4 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--type-title-lg-size);
  line-height: var(--type-title-lg-lh);
  color: var(--color-ink);
}
.t-title-md, h5 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--type-title-md-size);
  line-height: var(--type-title-md-lh);
  color: var(--color-ink);
}
.t-title-sm, h6 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--type-title-sm-size);
  line-height: var(--type-title-sm-lh);
  color: var(--color-ink);
}
.t-body-md, p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-lh);
  color: var(--color-body);
}
.t-body-sm {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-lh);
  color: var(--color-body);
}
.t-caption {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-lh);
  color: var(--color-muted);
}
.t-caption-up {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--type-caption-up-size);
  letter-spacing: var(--type-caption-up-tracking);
  text-transform: uppercase;
  color: var(--color-muted);
}
.t-code, code, pre {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--type-code-size);
  line-height: var(--type-code-lh);
}
.t-button { font-family: var(--font-body); font-weight: 500; font-size: var(--type-button-size); line-height: var(--type-button-lh); }
.t-nav    { font-family: var(--font-body); font-weight: 500; font-size: var(--type-nav-size);    line-height: var(--type-nav-lh); }

/* Inline coral text-link — distinctive small detail */
a, .text-link {
  color: var(--color-primary);
  text-decoration: none;
}
a:hover, .text-link:hover { text-decoration: underline; }

/* Base */
html, body {
  margin: 0;
  background: var(--color-canvas);
  color: var(--color-body);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}