/* ==========================================================================
   Wintree Design System — Color Tokens
   Off-white canvas, warm near-black ink. No saturated CTA color.
   Brand voltage = atmospheric pastel gradient orbs only.
   ========================================================================== */

:root {
  /* --- Brand / Action ---------------------------------------------------- */
  --color-primary: #292524;          /* ink pill — primary CTA */
  --color-primary-active: #0c0a09;   /* pressed */

  /* --- Surfaces ---------------------------------------------------------- */
  --color-canvas: #f5f5f5;           /* off-white page floor */
  --color-canvas-soft: #fafafa;      /* lighter alternating band */
  --color-canvas-deep: #0c0a09;      /* rare dark hero */
  --color-surface-card: #ffffff;     /* pure white card */
  --color-surface-strong: #f0efed;   /* badges, voice plates */
  --color-surface-dark: #0c0a09;     /* dark hero / CTA band */
  --color-surface-dark-elevated: #1c1917; /* card on dark */

  /* --- Hairlines --------------------------------------------------------- */
  --color-hairline: #e7e5e4;
  --color-hairline-soft: #f0efed;
  --color-hairline-strong: #d6d3d1;

  /* --- Text -------------------------------------------------------------- */
  --color-ink: #0c0a09;              /* display + primary text */
  --color-body: #4e4e4e;             /* running text */
  --color-body-strong: #292524;
  --color-muted: #777169;            /* sub-titles */
  --color-muted-soft: #a8a29e;       /* disabled */
  --color-on-primary: #ffffff;       /* on ink pill */
  --color-on-dark: #ffffff;
  --color-on-dark-soft: #a8a29e;

  /* --- Atmospheric gradient stops (signature — decoration only) ---------- */
  --color-gradient-mint: #a7e5d3;
  --color-gradient-peach: #f4c5a8;
  --color-gradient-lavender: #c8b8e0;
  --color-gradient-sky: #a8c8e8;
  --color-gradient-rose: #e8b8c4;

  /* --- Semantic ---------------------------------------------------------- */
  --color-success: #16a34a;
  --color-error: #dc2626;

  /* ======================================================================
     Semantic aliases — prefer these in components
     ====================================================================== */
  --text-display: var(--color-ink);
  --text-body: var(--color-body);
  --text-heading: var(--color-ink);
  --text-muted: var(--color-muted);
  --text-disabled: var(--color-muted-soft);

  --bg-page: var(--color-canvas);
  --bg-page-soft: var(--color-canvas-soft);
  --bg-card: var(--color-surface-card);
  --bg-inset: var(--color-surface-strong);
  --bg-dark: var(--color-surface-dark);

  --border-default: var(--color-hairline);
  --border-strong: var(--color-hairline-strong);

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