/* DESIGN.md tokens — Anthropic/Claude design system
   Source of truth: every color/size/radius used in the app is defined here. */

:root {
  /* --- Brand & Accent --- */
  --color-primary: #cc785c;
  --color-primary-active: #a9583e;
  --color-primary-disabled: #e6dfd8;
  --color-primary-15: rgba(204, 120, 92, 0.15);

  --color-accent-teal: #5db8a6;
  --color-accent-amber: #e8a55a;

  /* --- Surfaces --- */
  --color-canvas: #faf9f5;
  --color-surface-soft: #f5f0e8;
  --color-surface-card: #efe9de;
  --color-surface-cream-strong: #e8e0d2;
  --color-surface-dark: #181715;
  --color-surface-dark-elevated: #252320;
  --color-surface-dark-soft: #1f1e1b;

  --color-hairline: #e6dfd8;
  --color-hairline-soft: #ebe6df;

  /* --- 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;

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

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

  /* --- Typography scale (matches DESIGN.md 1:1) --- */
  --typo-display-xl: 400 64px/1.05 var(--font-display);
  --typo-display-xl-tracking: -1.5px;
  --typo-display-lg: 400 48px/1.1 var(--font-display);
  --typo-display-lg-tracking: -1px;
  --typo-display-md: 400 36px/1.15 var(--font-display);
  --typo-display-md-tracking: -0.5px;
  --typo-display-sm: 400 28px/1.2 var(--font-display);
  --typo-display-sm-tracking: -0.3px;
  --typo-title-lg: 500 22px/1.3 var(--font-body);
  --typo-title-md: 500 18px/1.4 var(--font-body);
  --typo-title-sm: 500 16px/1.4 var(--font-body);
  --typo-body-md: 400 16px/1.55 var(--font-body);
  --typo-body-sm: 400 14px/1.55 var(--font-body);
  --typo-caption: 500 13px/1.4 var(--font-body);
  --typo-caption-uppercase: 500 12px/1.4 var(--font-body);
  --typo-caption-uppercase-tracking: 1.5px;
  --typo-code: 400 14px/1.6 var(--font-mono);
  --typo-button: 500 14px/1 var(--font-body);
  --typo-nav-link: 500 14px/1.4 var(--font-body);

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

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

  /* --- Layout --- */
  --content-max: 1200px;
  --nav-height: 64px;

  /* --- Shadows (used sparingly per DESIGN.md elevation philosophy) --- */
  --shadow-hover: 0 1px 3px rgba(20, 20, 19, 0.08);
}