/* ============================================================
   Colors — Claude / Anthropic palette
   Warm cream canvas · coral primary · dark navy product surfaces
   ============================================================ */

:root {
  /* ---- Brand & accent ---- */
  --color-primary: #cc785c;          /* signature Anthropic coral */
  --color-primary-active: #a9583e;   /* press / darker variant */
  --color-primary-disabled: #e6dfd8; /* desaturated cream-tinted */
  --color-accent-teal: #5db8a6;      /* sparse secondary accent */
  --color-accent-amber: #e8a55a;     /* companion warm tone */

  /* ---- Surfaces ---- */
  --color-canvas: #faf9f5;             /* default page floor — warm cream */
  --color-surface-soft: #f5f0e8;       /* soft band backgrounds */
  --color-surface-card: #efe9de;       /* feature/content cards */
  --color-surface-cream-strong: #e8e0d2;/* selected tabs, emphasized bands */
  --color-surface-dark: #181715;       /* code mockups, footer, featured tier */
  --color-surface-dark-elevated: #252320;/* elevated cards inside dark */
  --color-surface-dark-soft: #1f1e1b;  /* code block bg inside dark cards */

  /* ---- Hairlines / borders ---- */
  --color-hairline: #e6dfd8;           /* 1px border on cream */
  --color-hairline-soft: #ebe6df;      /* barely-visible same-band divider */

  /* ---- Text ---- */
  --color-ink: #141413;          /* headlines + primary text */
  --color-body-strong: #252523;  /* emphasized paragraphs */
  --color-body: #3d3d3a;         /* default running text */
  --color-muted: #6c6a64;        /* sub-heads, secondary */
  --color-muted-soft: #8e8b82;   /* captions, fine print */
  --color-on-primary: #ffffff;   /* text on coral */
  --color-on-dark: #faf9f5;      /* cream-white on dark surfaces */
  --color-on-dark-soft: #a09d96; /* secondary text on dark */

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

  /* ============================================================
     Semantic aliases — prefer these in components
     ============================================================ */
  --surface-page: var(--color-canvas);
  --surface-raised: var(--color-surface-card);
  --surface-inverse: var(--color-surface-dark);

  --text-heading: var(--color-ink);
  --text-body: var(--color-body);
  --text-muted: var(--color-muted);
  --text-on-accent: var(--color-on-primary);
  --text-on-inverse: var(--color-on-dark);

  --border-default: var(--color-hairline);
  --border-strong: var(--color-muted-soft);
  --border-focus: var(--color-primary);

  --action-primary: var(--color-primary);
  --action-primary-hover: var(--color-primary-active);
  --link: var(--color-primary);
}