/* ============================================================
   COLORS — Deep Espresso Editorial
   A warm "Dark Warm" spectrum: deep espresso ground, warm cream
   ink, terracotta + ochre accents. Color is used sparingly; the
   background should dominate the field for focused calm.
   ============================================================ */

:root {
  /* ---- Surfaces (espresso ground, tonal layers) ---- */
  --surface: #1c110d;                    /* base background — deep espresso */
  --surface-dim: #1c110d;
  --surface-bright: #453632;
  --surface-container-lowest: #160c08;
  --surface-container-low: #251915;
  --surface-container: #291d19;
  --surface-container-high: #342723;
  --surface-container-highest: #40312e;
  --surface-variant: #40312e;
  --background: #1c110d;

  /* ---- Ink (warm cream + warm grey) ---- */
  --on-surface: #f5ddd7;                 /* primary text — warm cream */
  --on-surface-variant: #e0bfb7;         /* secondary text */
  --on-background: #f5ddd7;
  --inverse-surface: #f5ddd7;
  --inverse-on-surface: #3b2d29;

  /* ---- Lines ---- */
  --outline: #a78a82;                    /* hairline borders (use at low opacity) */
  --outline-variant: #58413b;

  /* ---- Primary — Terracotta ---- */
  --surface-tint: #ffb59f;
  --primary: #ffb59f;
  --on-primary: #5f1600;
  --primary-container: #ed673f;          /* solid terracotta CTA fill */
  --on-primary-container: #531200;
  --inverse-primary: #a93712;
  --primary-fixed: #ffdbd1;
  --primary-fixed-dim: #ffb59f;
  --on-primary-fixed: #3b0a00;
  --on-primary-fixed-variant: #862200;

  /* ---- Secondary — Ochre ---- */
  --secondary: #f2be60;
  --on-secondary: #422d00;
  --secondary-container: #865f00;
  --on-secondary-container: #ffe0ae;
  --secondary-fixed: #ffdea8;
  --secondary-fixed-dim: #f2be60;
  --on-secondary-fixed: #271900;
  --on-secondary-fixed-variant: #5e4200;

  /* ---- Tertiary — Cool cyan (rare contrast pop) ---- */
  --tertiary: #63d5f1;
  --on-tertiary: #003640;
  --tertiary-container: #0f9eb8;
  --on-tertiary-container: #002f38;
  --tertiary-fixed: #acedff;
  --tertiary-fixed-dim: #63d5f1;
  --on-tertiary-fixed: #001f26;
  --on-tertiary-fixed-variant: #004e5c;

  /* ---- Error ---- */
  --error: #ffb4ab;
  --on-error: #690005;
  --error-container: #93000a;
  --on-error-container: #ffdad6;

  /* ============================================================
     SEMANTIC ALIASES — prefer these in components
     ============================================================ */
  --text-primary: var(--on-surface);
  --text-muted: var(--on-surface-variant);
  --text-on-accent: var(--on-primary);

  --bg-page: var(--surface);
  --surface-card: var(--surface-container-low);
  --surface-raised: var(--surface-container-high);

  --accent: var(--primary-container);     /* terracotta — primary action */
  --accent-hover: var(--secondary);       /* ochre — hover shift */
  --accent-soft: var(--primary);          /* light terracotta — text accent on dark */

  --border-hairline: rgba(167, 138, 130, 0.2);   /* outline @ 20% */
  --border-strong: rgba(167, 138, 130, 0.4);
}