/* ============================================================
   DS SIGHT — Color Tokens
   The palette is intentionally narrow. Restraint is the look.
   Dark fields, luminous chrome, electric blue as punctuation.
   ============================================================ */

:root {
  /* ---- Core backgrounds (the canvas of the brand) ---- */
  --void-black:    #060608; /* Primary background, hero fields */
  --deep-black:    #0E1117; /* Secondary backgrounds, section breaks */
  --surface-dark:  #1A1E2A; /* Cards, modals, raised UI */
  --surface-raised:#222736; /* Hover/elevated card surface */

  /* ---- Chrome scale (highlight -> shadow) ---- */
  --chrome-white:    #FFFFFF; /* Pure highlight, shine line */
  --chrome-highlight:#D8DCE6; /* Top of chrome gradients, primary text on dark */
  --chrome-mid:      #9AA3B8; /* Body of chrome, secondary text */
  --chrome-muted:    #6E7485; /* Tertiary text, disabled */
  --chrome-shadow:   #505568; /* Deep metal tone */
  --chrome-deep:     #2A2D38; /* Darkest metal, borders */

  /* ---- Borders / hairlines (chrome-tinted) ---- */
  --line-soft:   #2A2E3C; /* Default hairline on dark */
  --line-chrome: #3A3D50; /* Chrome-tinted card border */

  /* ---- Electric blue accent (a flavor, never a fill) ---- */
  --blue:        #3B9EFF; /* Accent — light trails, glow, CTA highlights */
  --blue-bright: #6FB8FF; /* Hover / brighter glow */
  --blue-deep:   #0A3A7A; /* Secondary accent, depth on blue */
  --blue-glow:   rgba(59, 158, 255, 0.45); /* Glow / shadow color */

  /* ---- Semantic status ---- */
  --success: #3FB984;
  --warning: #E0A93B;
  --danger:  #E5544B;

  /* ============================================================
     SEMANTIC ALIASES — reference these in product UI
     ============================================================ */

  /* Surfaces */
  --bg-base:      var(--void-black);
  --bg-section:   var(--deep-black);
  --surface-card: var(--surface-dark);
  --surface-hover:var(--surface-raised);

  /* Text */
  --text-primary:   var(--chrome-highlight);
  --text-heading:   var(--chrome-white);
  --text-secondary: var(--chrome-mid);
  --text-muted:     var(--chrome-muted);
  --text-on-blue:   #FFFFFF;

  /* Lines */
  --border-card:    var(--line-chrome);
  --border-subtle:  var(--line-soft);

  /* Accent */
  --accent:        var(--blue);
  --accent-hover:  var(--blue-bright);
  --accent-deep:   var(--blue-deep);
  --accent-glow:   var(--blue-glow);
}