/* HolonomiX - Color tokens
   ==================================================================
   High-contrast monochrome foundation + a single sharp accent.
   Base scale = raw values. Semantic aliases below map to light/dark.
   The brand lives at the extremes: true black, true white, hairlines
   in between, and "Teal" used surgically for signal & energy.
*/

:root {
  /* ---- Monochrome ramp (ink → paper) ---- */
  --hx-black:      #000000;
  --hx-ink-900:    #0A0B0D;   /* page bg, dark */
  --hx-ink-800:    #121418;
  --hx-ink-700:    #1A1D22;
  --hx-ink-600:    #262A31;   /* raised surface, dark */
  --hx-ink-500:    #343942;   /* hairline border, dark */
  --hx-gray-400:   #5B626C;
  --hx-gray-300:   #8A919B;   /* secondary text */
  --hx-gray-200:   #B9BEC6;
  --hx-gray-150:   #D2D6DC;
  --hx-gray-100:   #E4E7EB;   /* hairline border, light */
  --hx-paper-100:  #F1F3F5;   /* raised surface, light */
  --hx-paper-50:   #F8F9FA;
  --hx-white:      #FFFFFF;

  /* ---- Teal: the one sharp accent. Reads on black AND white. ---- */
  --hx-teal:     #0FC2B0;  /* primary accent - teal */
  --hx-teal-600: #0A9183;  /* hover on light (darker) */
  --hx-teal-300: #4FE3D3;  /* hover on dark (lighter) */
  --hx-teal-100: #C6F5EF;
  --hx-teal-glow: rgba(15, 194, 176, 0.34);
  --hx-teal-700: #0B7D71;  /* AA text on white - 5.02:1 (HX extension, links on light) */
  --hx-teal-800: #086B61;  /* hover for teal-700 on light - 6.39:1 (HX extension) */

  /* ---- Signal (semantic status) ---- */
  --hx-pos:   #1FCB6B;   /* converged / healthy */
  --hx-warn:  #FFB020;   /* drift / attention */
  --hx-neg:   #FF4D4D;   /* diverged / error */
  --hx-info:  #2BD4F5;   /* blueprint cyan - info / links */

  /* ---- Data-viz categorical (structural, no purple) ---- */
  --hx-viz-1: #0FC2B0;   /* teal (accent) */
  --hx-viz-2: #2BD4F5;   /* cyan */
  --hx-viz-3: #FF4D6E;   /* magenta-red */
  --hx-viz-4: #FFB020;   /* amber */
  --hx-viz-5: #8AF5C0;   /* mint */
  --hx-viz-6: #B9BEC6;   /* steel */
}

/* ================= SEMANTIC - LIGHT (default) ================= */
:root,
[data-theme="light"] {
  --surface-page:     var(--hx-white);
  --surface-raised:   var(--hx-paper-50);
  --surface-sunken:   var(--hx-paper-100);
  --surface-inverse:  var(--hx-ink-900);
  --surface-accent:   var(--hx-teal);

  --text-primary:     var(--hx-ink-900);
  --text-secondary:   var(--hx-gray-400);
  --text-muted:       var(--hx-gray-300);
  --text-inverse:     var(--hx-white);
  --text-on-accent:   var(--hx-ink-900);
  --text-link:        var(--hx-ink-900);

  --border-hairline:  var(--hx-gray-100);
  --border-default:   var(--hx-gray-150);
  --border-strong:    var(--hx-ink-900);
  --border-accent:    var(--hx-teal);

  --grid-line:        rgba(10, 11, 13, 0.06);  /* blueprint background */
  --grid-tick:        rgba(10, 11, 13, 0.18);

  --accent:           var(--hx-teal);
  --accent-hover:     var(--hx-teal-600);
  --accent-contrast:  var(--hx-ink-900);

  --text-link-accent:       var(--hx-teal-700);
  --text-link-accent-hover: var(--hx-teal-800);
}

/* ================= SEMANTIC - DARK ================= */
[data-theme="dark"] {
  --surface-page:     var(--hx-ink-900);
  --surface-raised:   var(--hx-ink-800);
  --surface-sunken:   var(--hx-black);
  --surface-inverse:  var(--hx-white);
  --surface-accent:   var(--hx-teal);

  --text-primary:     var(--hx-white);
  --text-secondary:   var(--hx-gray-300);
  --text-muted:       var(--hx-gray-400);
  --text-inverse:     var(--hx-ink-900);
  --text-on-accent:   var(--hx-ink-900);
  --text-link:        var(--hx-white);

  --border-hairline:  var(--hx-ink-600);
  --border-default:   var(--hx-ink-500);
  --border-strong:    var(--hx-gray-200);
  --border-accent:    var(--hx-teal);

  --grid-line:        rgba(255, 255, 255, 0.05);
  --grid-tick:        rgba(255, 255, 255, 0.16);

  --accent:           var(--hx-teal);
  --accent-hover:     var(--hx-teal-300);
  --accent-contrast:  var(--hx-ink-900);

  --text-link-accent:       var(--hx-teal);
  --text-link-accent-hover: var(--hx-teal-300);
}