/* =============================================================================
   Direction-G "jewel-tones" — the SINGLE source of color for the whole site.
   Ported verbatim from the product (server admin portal + player theme).
   This is the ONLY file allowed to contain hex literals; everything else
   references var(--token). Enforced by scripts/check-hex.mjs.
   ============================================================================= */
:root {
  /* ---- Surfaces (base + raises) ---- */
  --bg: #0D0A14;
  --panel: #14101F;
  --raise: #211A30;
  --control-well: #1B1528;

  /* ---- Inks (3 roles; AA+/AAA on --bg) ---- */
  --ink-hi: #F0ECF7;   /* hero text — ~16.9:1 on bg */
  --ink: #CFC6E0;      /* body — ~12:1 on bg */
  --ink-dim: #8D85A0;  /* secondary — ~5.6:1 on bg (dimmest legal glyph) */

  /* ---- Jewels (seven stones) ---- */
  --am: #BD9AF5;        /* amethyst — primary / Library / player */
  --am-hover: #CBAFF8;
  --ink-on-am: #161021; /* text inside the filled primary */
  --sa: #53C7DE;        /* sapphire — engines / technical data */
  --ci: #E3BB4D;        /* citrine — Guide / live / time / WARN */
  --lp: #7FA9E8;        /* lapis — users / social / personal */
  --ok: #5BCD8E;        /* emerald — success / healthy / watched */
  --ga: #F08CA8;        /* garnet — danger / destructive */
  --cn: #E0796B;        /* carnelian — settings / structure */

  /* ---- Line tokens (non-text marks, >=3:1) ---- */
  --am-line: #77609B;
  --sa-line: #377B8D;
  --ci-line: #8D7436;
  --lp-line: #4A6FA8;
  --ok-line: #3C7F5D;
  --ga-line: #95586D;
  --cn-line: #A55A4E;

  /* ---- Borders (lavender hairlines) ---- */
  --rule: rgba(213, 205, 240, 0.08);
  --rule-strong: rgba(213, 205, 240, 0.20);

  /* ---- State translucents ---- */
  --ok-bg: rgba(91, 205, 142, 0.10);   --ok-border: rgba(91, 205, 142, 0.28);
  --warn-bg: rgba(227, 187, 77, 0.10); --warn-border: rgba(227, 187, 77, 0.30);
  --err-bg: rgba(240, 140, 168, 0.10); --err-border: rgba(240, 140, 168, 0.30);
  --info-bg: rgba(189, 154, 245, 0.10);--info-border: rgba(189, 154, 245, 0.28);

  /* ---- Effects ---- */
  --focus-ring: rgba(189, 154, 245, 0.35);
  --overlay: rgba(0, 0, 0, 0.62);
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  --shadow-soft: 0 6px 26px rgba(0, 0, 0, 0.40);

  /* ---- Jewel glows (auras over dark surfaces) ---- */
  --glow-am: rgba(189, 154, 245, 0.30);
  --glow-sa: rgba(83, 199, 222, 0.22);
  --glow-ci: rgba(227, 187, 77, 0.22);
  --glow-lp: rgba(127, 169, 232, 0.22);

  /* ---- Marketing gradients (derived from jewels only) ---- */
  --grad-hero: linear-gradient(135deg, var(--am), var(--lp) 55%, var(--sa));
  --grad-am: linear-gradient(135deg, var(--am), var(--lp));
  --grad-guide: linear-gradient(135deg, var(--ci), var(--cn));
  --grad-veil: linear-gradient(180deg, transparent, var(--bg));

  /* ---- Geometry ---- */
  --radius: 2px;
  --radius-lg: 6px;
  --radius-pill: 999px;

  /* ---- Type ---- */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "SF Mono", "Fira Code", "Cascadia Code", Consolas, monospace;

  /* modular type scale (fluid on the big steps) */
  --step--1: 0.833rem;
  --step-0: 1rem;
  --step-1: 1.2rem;
  --step-2: 1.44rem;
  --step-3: 1.728rem;
  --step-4: 2.07rem;
  --step-5: clamp(2.2rem, 1.5rem + 2.8vw, 3.4rem);
  --step-6: clamp(2.8rem, 1.7rem + 4.6vw, 5rem);

  /* spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* layout */
  --container: 1140px;
  --container-narrow: 760px;
  --header-h: 64px;

  /* per-domain accent — set [data-family] on an element to inherit a jewel */
  --dom: var(--am);
}

/* Family-inheritance law: an element sets data-family to wear its jewel. */
[data-family="guide"]    { --dom: var(--ci); }
[data-family="library"]  { --dom: var(--am); }
[data-family="engines"]  { --dom: var(--sa); }
[data-family="users"]    { --dom: var(--lp); }
[data-family="settings"] { --dom: var(--cn); }
[data-family="neutral"]  { --dom: var(--ink); }