/* ============================================================
   XYZ LABS — Color
   A near-black / cool-white core carries the weight; a single
   electric accent (Cobalt, default) carries the energy.
   Neutrals are subtly cool (hue ~274). Accents share L & C,
   only hue varies — so any of the three reads at equal intensity.
   ============================================================ */

:root {
  /* ---- Neutrals — cool ink → paper ---- */
  --ink-900: #0B0B0F;   /* primary dark surface / text on light  */
  --ink-800: #141419;
  --ink-700: #1E1E25;   /* graphite — raised dark surface        */
  --ink-600: #2A2A33;
  --gray-600: #54545E;  /* @kind color */ /* muted text on light    */
  --gray-500: #6E6E78;  /* muted text                            */
  --gray-400: #9A9AA3;  /* faint text on dark                    */
  --gray-300: #C3C3CA;  /* mist — disabled / hairline on dark    */
  --gray-200: #E2E2E6;  /* borders on light                      */
  --gray-100: #ECECEF;  /* track / inset fill                    */
  --paper:   #FAFAFB;   /* app background                        */
  --white:   #FFFFFF;

  /* ---- Hairlines ---- */
  --line:      rgba(11, 11, 15, 0.10);   /* on light            */
  --line-dark: rgba(255, 255, 255, 0.10);/* on ink              */

  /* ---- Accents — same L & C, hue varied ---- */
  --indigo:      oklch(0.56 0.21 274);   /* ≈ #545EED            */
  --indigo-soft: oklch(0.56 0.21 274 / 0.16);
  --cobalt:      oklch(0.56 0.21 250);   /* ≈ #0072E9 — default  */
  --cobalt-soft: oklch(0.56 0.21 250 / 0.16);
  --violet:      oklch(0.56 0.21 304);   /* ≈ #9046D6            */

  /* The live accent. Swap this one line to retheme everything. */
  --accent:      var(--cobalt);
  --accent-soft: var(--cobalt-soft);
  --accent-ink:  var(--white);           /* text on an accent fill */

  /* ---- Semantic status (tuned to the same lightness family) ---- */
  --success: oklch(0.62 0.16 155);
  --warning: oklch(0.74 0.16 75);
  --danger:  oklch(0.58 0.21 25);
  --info:    var(--cobalt);

  /* =========================================================
     SEMANTIC ALIASES — reference these in product code
     ========================================================= */
  --bg-app:        var(--paper);
  --bg-surface:    var(--white);
  --bg-raised:     var(--white);
  --bg-inset:      var(--gray-100);
  --bg-inverse:    var(--ink-900);

  --text-strong:   var(--ink-900);
  --text-body:     var(--ink-700);
  --text-muted:    var(--gray-500);
  --text-faint:    var(--gray-400);
  --text-inverse:  var(--white);
  --text-accent:   var(--accent);
  --text-on-accent:var(--accent-ink);

  --border-subtle: var(--line);
  --border-strong: var(--gray-200);
  --border-focus:  var(--accent);

  --surface-card:  var(--white);
  --surface-sunk:  var(--gray-100);
}

/* Dark scope — use on ink sections / dark app shells. */
.xyz-dark,
[data-theme="dark"] {
  --bg-app:       var(--ink-900);
  --bg-surface:   var(--ink-800);
  --bg-raised:    var(--ink-700);
  --bg-inset:     var(--ink-700);
  --bg-inverse:   var(--paper);

  --text-strong:  var(--white);
  --text-body:    var(--gray-300);
  --text-muted:   var(--gray-400);
  --text-faint:   var(--gray-500);
  --text-inverse: var(--ink-900);

  --border-subtle: var(--line-dark);
  --border-strong: rgba(255, 255, 255, 0.16);

  --surface-card: var(--ink-800);
  --surface-sunk: var(--ink-900);
}