/* Colors — Claude Design System
   Base palette + semantic aliases. Never inline hex in components; use these vars. */
:root {
  /* ── Brand & accent ───────────────────────────── */
  --color-primary: #cc785c;          /* signature warm coral */
  --color-primary-active: #a9583e;   /* press / darker */
  --color-primary-disabled: #e6dfd8; /* cream-tinted disabled */
  --color-accent-teal: #5db8a6;
  --color-accent-amber: #e8a55a;

  /* ── Surfaces ─────────────────────────────────── */
  --color-canvas: #faf9f5;               /* default page floor — warm cream */
  --color-surface-soft: #f5f0e8;
  --color-surface-card: #efe9de;
  --color-surface-cream-strong: #e8e0d2;
  --color-surface-dark: #181715;         /* dominant dark product surface */
  --color-surface-dark-elevated: #252320;
  --color-surface-dark-soft: #1f1e1b;

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

  /* ── Text ─────────────────────────────────────── */
  --color-ink: #141413;          /* headlines + primary text */
  --color-body-strong: #252523;
  --color-body: #3d3d3a;         /* default running text */
  --color-muted: #6c6a64;
  --color-muted-soft: #8e8b82;
  --color-on-primary: #ffffff;
  --color-on-dark: #faf9f5;      /* cream-tinted white on dark */
  --color-on-dark-soft: #a09d96;

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

  /* ── Semantic aliases (intent → role) ─────────── */
  --bg-page: var(--color-canvas);
  --bg-card: var(--color-surface-card);
  --bg-dark: var(--color-surface-dark);
  --text-heading: var(--color-ink);
  --text-body: var(--color-body);
  --text-muted: var(--color-muted);
  --border-hairline: var(--color-hairline);
  --link: var(--color-primary);
}