/* ============================================================
   LeadPixel — Color tokens
   Liquid-glass, achromatic. A cool petrol-tinted near-black
   canvas, milky translucent grey glass, white as the primary
   action, and ONE warm metallic "champagne" hue used as a
   whisper (active rings, status dots, metallic edges).
   No saturated brand color — the restraint is the brand.
   ============================================================ */
:root {
  /* — Neutral ramp (cool, faintly petrol → soft white) — */
  --neutral-1000: #060709;
  --neutral-950:  #0A0C0F;
  --neutral-900:  #0E1114;
  --neutral-850:  #14181C;
  --neutral-800:  #1A1F24;
  --neutral-750:  #21272D;
  --neutral-700:  #2A3037;
  --neutral-650:  #333A42;
  --neutral-600:  #3E454E;
  --neutral-500:  #5A626C;
  --neutral-400:  #828B95;
  --neutral-300:  #A7B0BA;
  --neutral-200:  #CACFD6;
  --neutral-100:  #E5E9ED;
  --neutral-50:   #F2F4F6;
  --neutral-0:    #FFFFFF;

  /* — Petrol: the cool blue-black that tints the ambient
       background light. Desaturated, never a "color". — */
  --petrol-deep:  #0B1117;
  --petrol-900:   #0F171E;
  --petrol-800:   #16212B;
  --petrol-glow:    rgba(120, 162, 196, 0.10);
  --petrol-glow-lo: rgba(120, 162, 196, 0.05);

  /* — Champagne: the single warm metallic hue. A whisper of
       copper/rose-gold lifted from the reference product.
       Used sparingly — active state, status dot, metal edge. — */
  --champagne-700: #7E6750;
  --champagne-600: #9C7F64;
  --champagne-500: #BC9A7C;
  --champagne-400: #D2B295;   /* primary metallic */
  --champagne-300: #E2C9B2;
  --champagne-200: #EFDDCC;
  --champagne-glow:    rgba(210, 178, 149, 0.30);
  --champagne-glow-lo: rgba(210, 178, 149, 0.12);

  /* — Semantic hues (muted; used very sparingly on glass) — */
  --green-500: #6FBF9B;
  --green-600: #4E9E7C;
  --amber-500: #D6AE72;
  --amber-600: #B98F50;
  --red-500:   #D98080;
  --red-600:   #C26666;

  /* — Translucent scales (the glass is built from these) — */
  --white-a-03:   rgba(255, 255, 255, 0.03);
  --white-a-04:   rgba(255, 255, 255, 0.04);
  --white-a-06:   rgba(255, 255, 255, 0.06);
  --white-a-08:   rgba(255, 255, 255, 0.08);
  --white-a-10:   rgba(255, 255, 255, 0.10);
  --white-a-12:   rgba(255, 255, 255, 0.12);
  --white-a-18:   rgba(255, 255, 255, 0.18);
  --white-a-28:   rgba(255, 255, 255, 0.28);
  --black-a-20:   rgba(0, 0, 0, 0.20);
  --black-a-30:   rgba(0, 0, 0, 0.30);
  --black-a-50:   rgba(0, 0, 0, 0.50);
  --grid-line:    rgba(255, 255, 255, 0.028);

  /* ——————————————————————————————————————————————
     Semantic aliases (reference these in components)
     —————————————————————————————————————————————— */

  /* Backgrounds / surfaces (opaque) */
  --bg-base:        var(--neutral-950);
  --bg-raised:      var(--neutral-900);
  --bg-card:        var(--neutral-850);
  --bg-card-hover:  var(--neutral-800);
  --bg-inset:       var(--neutral-1000);

  /* Glass surfaces (translucent — pair with backdrop-blur).
     A milky cool grey; the white tint + blur make the
     "liquid glass" body, the borders make its edges. */
  --glass-tint:        rgba(38, 45, 52, 0.42);
  --glass-tint-strong: rgba(20, 25, 30, 0.60);
  --glass-tint-thin:   rgba(70, 80, 90, 0.20);
  --glass-sheen:       rgba(255, 255, 255, 0.10);
  --glass-edge:        rgba(255, 255, 255, 0.22);  /* top specular line */
  --glass-shade:       rgba(0, 0, 0, 0.22);        /* bottom inner shade */
  /* legacy names kept so older refs resolve */
  --surface-glass:        var(--glass-tint);
  --surface-glass-strong: var(--glass-tint-strong);

  /* Borders — hairlines, low-alpha white (edges of glass) */
  --border-subtle:  var(--white-a-06);
  --border-default: var(--white-a-10);
  --border-strong:  var(--white-a-18);
  --border-contrast: var(--white-a-28);

  /* Text */
  --text-primary:   var(--neutral-50);
  --text-secondary: var(--neutral-300);
  --text-muted:     var(--neutral-400);
  --text-faint:     var(--neutral-500);
  --text-inverse:   var(--neutral-950);
  --text-on-accent: var(--neutral-950);
  --text-link:      var(--champagne-300);

  /* Action — the PRIMARY action is white (the signature pill);
     the accent hue is champagne, used as a whisper only. */
  --action-fg:      var(--neutral-0);   /* white pill background */
  --action-text:    var(--neutral-950); /* ink on the white pill */

  --accent:          var(--champagne-400);
  --accent-hover:    var(--champagne-300);
  --accent-press:    var(--champagne-500);
  --accent-soft:     var(--champagne-glow-lo);
  --accent-ring:     rgba(210, 178, 149, 0.55);
  --accent-contrast: var(--neutral-950);

  /* Feedback */
  --success:  var(--green-500);
  --warning:  var(--amber-500);
  --danger:   var(--red-500);
  --info:     var(--champagne-300);

  /* Focus — soft champagne aura (achromatic-friendly) */
  --focus-ring: 0 0 0 3px rgba(210, 178, 149, 0.40);
}