/* ============================================================
   COLORS — xAI Design System
   Dark-canvas only. No light mode. White-on-near-black is the brand.
   ============================================================ */
:root {
  /* --- Brand / Primary --- */
  --color-primary: #ffffff;        /* button outline, primary fill, all display text */
  --color-on-primary: #0a0a0a;     /* text on the rare white-filled pill */

  /* --- Accent (muted; reserved for product illustrations/icons) --- */
  --color-accent-sunset: #ff7a17;       /* sunset orange */
  --color-accent-sunset-soft: #ffc285;  /* lighter sunset */
  --color-accent-dusk: #7c3aed;         /* dusk purple */
  --color-accent-twilight: #c4b5fd;     /* soft violet */
  --color-accent-breeze: #a0c3ec;       /* soft blue */
  --color-accent-midnight: #0d1726;     /* deep blue-black illustrative bg */

  /* --- Surface --- */
  --color-canvas: #0a0a0a;        /* the only true page surface */
  --color-canvas-soft: #1a1c20;   /* hovered nav items, tooltips, inputs */
  --color-canvas-card: #191919;   /* charcoal card fill */
  --color-canvas-mid: #363a3f;    /* nested surfaces, code mockups */
  --color-hairline: #212327;      /* 1px solid dividers */

  /* --- Text --- */
  --color-ink: #ffffff;        /* default text */
  --color-ink-hover: #fafaf7;  /* off-white hover (rarely used) */
  --color-body: #dadbdf;       /* secondary body copy */
  --color-body-mid: #7d8187;   /* mute — captions, fine print */

  /* --- Borders (translucent white is the real outline at runtime) --- */
  --border-outline: rgba(255, 255, 255, 0.25);  /* outline-pill border */
  --border-hairline: #212327;                    /* solid hairline */

  /* --- Semantic aliases --- */
  --surface-page: var(--color-canvas);
  --surface-card: var(--color-canvas-card);
  --surface-raised: var(--color-canvas-soft);
  --text-default: var(--color-ink);
  --text-muted: var(--color-body-mid);
  --text-secondary: var(--color-body);
}