:root {
  /* Brand & Accent */
  --color-primary: #cc785c;
  --color-primary-active: #a9583e;
  --color-primary-disabled: #e6dfd8;
  --color-accent-teal: #5db8a6;
  --color-accent-amber: #e8a55a;

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

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

  /* Radius */
  --rounded-xs: 4px;
  --rounded-sm: 6px;
  --rounded-md: 8px;
  --rounded-lg: 12px;
  --rounded-xl: 16px;
  --rounded-pill: 9999px;

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

  --text-display-xl: 64px;
  --text-display-lg: 48px;
  --text-display-md: 36px;
  --text-display-sm: 28px;
  --text-title-lg: 22px;
  --text-title-md: 18px;
  --text-title-sm: 16px;
  --text-body-md: 16px;
  --text-body-sm: 14px;
  --text-caption: 13px;
  --text-caption-upper: 12px;
  --text-button: 14px;
  --text-nav: 14px;

  --tracking-display-xl: -1.5px;
  --tracking-display-lg: -1px;
  --tracking-display-md: -0.5px;
  --tracking-display-sm: -0.3px;
  --tracking-caption-upper: 1.5px;

  /* Elevation */
  --shadow-subtle: 0 1px 3px rgba(20, 20, 19, 0.08);

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

@media (max-width: 768px) {
  :root {
    --text-display-xl: 32px;
    --text-display-lg: 36px;
    --spacing-section: 64px;
  }
}