/* ──────────────────────────────────────────────────────────────
   MITEC Design System — Color tokens
   A near-pure-black artboard. White display type, a single blue
   signal accent, and a family of vibrant gradient spotlight grounds.
   The brand IS dark — there is no light mode.
   ────────────────────────────────────────────────────────────── */

:root {
  /* ── Brand & accent ───────────────────────────────────────── */
  --color-primary: #ffffff;        /* primary surface: CTA pills, display type */
  --color-on-primary: #000000;     /* ink on white pills */
  --color-accent-blue: #0099ff;    /* single chromatic signal — links, focus, selection */

  /* ── Surfaces (lift, not opacity, carries hierarchy) ──────── */
  --color-canvas: #090909;         /* default page ground — near-black, faint warmth */
  --color-surface-1: #141414;      /* one step up — cards, secondary pills, tiles */
  --color-surface-2: #1c1c1c;      /* two steps up — featured card, selected tab */
  --color-hairline: #262626;       /* 1px borders on groups, table dividers */
  --color-hairline-soft: #1a1a1a;  /* subtler dividers — faq rows, footer rules */
  --color-inverse-canvas: #ffffff; /* pure-white surface for light-on-dark CTAs */
  --color-inverse-ink: #000000;

  /* ── Text ─────────────────────────────────────────────────── */
  --color-ink: #ffffff;            /* headlines & emphasized body */
  --color-ink-muted: #999999;      /* secondary type — meta, footer, deselected */

  /* ── Semantic ─────────────────────────────────────────────── */
  --color-success: #22c55e;        /* checkmark glyphs in comparison tables */

  /* ── Brand gradient anchors (spotlight cards) ─────────────── */
  --color-gradient-magenta: #d44df0;
  --color-gradient-violet: #6a4cf5;
  --color-gradient-orange: #ff7a3d;
  --color-gradient-coral: #ff5577;

  /* Signature gradient strings — atmospheric spotlight grounds.
     Treat hex anchors above as base colors; these are the panels. */
  --gradient-violet: radial-gradient(120% 120% at 20% 15%, #8a6cff 0%, #6a4cf5 42%, #3a1fb0 100%); /* @kind color */
  --gradient-magenta: radial-gradient(120% 120% at 80% 10%, #ff77f0 0%, #d44df0 45%, #7d1fb0 100%); /* @kind color */
  --gradient-orange: radial-gradient(120% 120% at 25% 20%, #ffb25e 0%, #ff7a3d 45%, #d93b1f 100%); /* @kind color */
  --gradient-coral: radial-gradient(120% 120% at 75% 20%, #ff8aa0 0%, #ff5577 45%, #c41f55 100%); /* @kind color */

  /* ── Focus / selection signal (level-3 depth) ─────────────── */
  --ring-focus: 0 0 0 1px rgba(0, 153, 255, 0.55), 0 0 0 4px rgba(0, 153, 255, 0.15);
  --selection-bg: rgba(0, 153, 255, 0.30);
}

::selection {
  background: var(--selection-bg);
  color: var(--color-ink);
}