/* ============================================================
   Colors — Claude-style design system
   Base palette + semantic aliases. Reference semantic vars in
   components; reach for base hexes only when defining new tokens.
   ============================================================ */

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

  /* ---- Cream surfaces ---- */
  --color-canvas: #faf9f5;         /* default page floor (warm tint) */
  --color-cream-soft: #f5f0e8;     /* soft band / divider */
  --color-cream-card: #efe9de;     /* feature/content cards */
  --color-cream-strong: #e8e0d2;   /* selected tabs, emphasized bands */

  /* ---- Dark surfaces ---- */
  --color-dark: #181715;           /* code mockups, footer */
  --color-dark-elevated: #252320;  /* elevated cards in dark bands */
  --color-dark-soft: #1f1e1b;      /* code blocks inside dark cards */

  /* ---- Hairlines ---- */
  --color-hairline: #e6dfd8;       /* 1px border on cream */
  --color-hairline-soft: #ebe6df;  /* in-band divider */

  /* ---- Ink / text ---- */
  --color-ink: #141413;            /* headlines + primary text */
  --color-body-strong: #252523;    /* emphasized paragraphs */
  --color-body: #3d3d3a;           /* running text */
  --color-muted: #6c6a64;          /* sub-headings, secondary */
  --color-muted-soft: #8e8b82;     /* captions, fine print */

  /* ---- On-color text ---- */
  --color-on-coral: #ffffff;
  --color-on-dark: #faf9f5;        /* cream-tinted white on dark */
  --color-on-dark-soft: #a09d96;   /* secondary text on dark */

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

  /* ============================================================
     Semantic aliases — prefer these in components
     ============================================================ */
  --primary: var(--color-coral);
  --primary-active: var(--color-coral-active);
  --primary-disabled: var(--color-coral-disabled);

  --surface-page: var(--color-canvas);
  --surface-soft: var(--color-cream-soft);
  --surface-card: var(--color-cream-card);
  --surface-card-strong: var(--color-cream-strong);
  --surface-dark: var(--color-dark);
  --surface-dark-elevated: var(--color-dark-elevated);
  --surface-dark-soft: var(--color-dark-soft);

  --border-hairline: var(--color-hairline);
  --border-hairline-soft: var(--color-hairline-soft);

  --text-heading: var(--color-ink);
  --text-strong: var(--color-body-strong);
  --text-body: var(--color-body);
  --text-muted: var(--color-muted);
  --text-faint: var(--color-muted-soft);
  --text-on-primary: var(--color-on-coral);
  --text-on-dark: var(--color-on-dark);
  --text-on-dark-muted: var(--color-on-dark-soft);
  --text-link: var(--color-coral);

  /* focus ring (coral at 15% alpha) */
  --focus-ring: rgba(204, 120, 92, 0.15);
}