/* Color tokens — Claude's warm, parchment-based palette.
   Every neutral has a yellow-brown undertone. No cool blue-grays. */

:root {
  /* ---- Brand ---- */
  --color-terracotta: #c96442;          /* primary brand / CTA */
  --color-terracotta-hover: #b95838;    /* hover state */
  --color-coral: #d97757;               /* lighter accent, dark-surface links */

  /* ---- Near-Blacks & Darks ---- */
  --color-near-black: #141413;          /* warmest black; primary text + dark page bg */
  --color-deep-dark: #141413;           /* alias */
  --color-dark-surface: #30302e;        /* dark cards, nav borders */
  --color-charcoal-warm: #4d4c48;       /* go-to dark text on light surfaces */
  --color-dark-warm: #3d3d3a;           /* emphasized secondary text */

  /* ---- Mid Grays (all warm) ---- */
  --color-olive-gray: #5e5d59;          /* secondary body text */
  --color-stone-gray: #87867f;          /* tertiary text, metadata */
  --color-warm-silver: #b0aea5;         /* text on dark surfaces */

  /* ---- Light Surfaces ---- */
  --color-parchment: #f5f4ed;           /* THE Claude background — warm cream */
  --color-ivory: #faf9f5;               /* lightest surface, cards */
  --color-white: #ffffff;               /* button surfaces, max contrast */
  --color-warm-sand: #e8e6dc;           /* button bg, interactive surfaces */

  /* ---- Borders ---- */
  --color-border-cream: #f0eee6;        /* gentlest light border */
  --color-border-warm: #e8e6dc;         /* prominent light border */
  --color-border-dark: #30302e;         /* dark-surface border */

  /* ---- Ring shadows ---- */
  --color-ring-warm: #d1cfc5;           /* hover/focus ring */
  --color-ring-subtle: #dedcd1;         /* lighter ring */
  --color-ring-deep: #c2c0b6;           /* pressed/active ring */

  /* ---- Semantic ---- */
  --color-error: #b53333;               /* warm crimson */
  --color-focus: #3898ec;               /* the one cool color — focus rings only */
  --color-muted-green: #5a7d5a;         /* illustration accent */
}