/* ============================================================
   STG Consult — Color tokens
   Brand: electric purple (#9f01ed) on near-black (#070507).
   Dark-first: :root carries the dark theme. A .stg-light scope
   flips surfaces/text for light backgrounds.
   ============================================================ */

:root {
  /* ---- Brand purple — a single tone, exactly as supplied. No tints/shades. ---- */
  --purple: #9f01ed;   /* BRAND PRIMARY — the one and only purple */

  /* ---- Neutral scale (950 = #070507, the brand near-black) ----
     Subtle warm-purple cast in the darks, matching gradient end #322232. */
  --neutral-0:   #ffffff;
  --neutral-50:  #f7f6f8;
  --neutral-100: #efedf1;
  --neutral-200: #ddd9e1;
  --neutral-300: #c3bcc9;
  --neutral-400: #9d96a4;
  --neutral-500: #7a7382;
  --neutral-600: #5b5563;
  --neutral-700: #423d4a;
  --neutral-800: #2a2530;   /* near gradient end #322232 */
  --neutral-900: #151118;
  --neutral-950: #070507;   /* BRAND NEAR-BLACK */

  /* ---- Pure references ---- */
  --white: #ffffff;
  --black: #000000;

  /* ---- Semantic status (tuned to read on dark surfaces) ---- */
  --green-400:  #34d399;
  --green-500:  #16a36b;
  --amber-400:  #fbbf3c;
  --amber-500:  #e0920a;
  --red-400:    #f87171;
  --red-500:    #e03b3b;
  --blue-400:   #60a5fa;
  --blue-500:   #2a6fdb;

  /* ============================================================
     SEMANTIC ALIASES — dark theme (default)
     ============================================================ */

  /* Backgrounds */
  --bg-base:        var(--neutral-950);
  --bg-elevated:    var(--neutral-900);
  --bg-inset:       #0d0a10;

  /* Surfaces (cards, sheets, menus) */
  --surface-card:    #16121c;
  --surface-raised:  #1f1a26;
  --surface-overlay: #221d2a;
  --surface-hover:   rgba(255, 255, 255, 0.04);
  --surface-active:  rgba(255, 255, 255, 0.07);

  /* Text */
  --text-primary:   var(--neutral-0);
  --text-secondary: var(--neutral-300);
  --text-muted:     var(--neutral-400);
  --text-subtle:    var(--neutral-500);
  --text-on-accent: var(--white);
  --text-inverse:   var(--neutral-950);

  /* Accent */
  --accent:          var(--purple);
  --accent-hover:    var(--purple);   /* state shown via glow + brightness, not a new tone */
  --accent-pressed:  var(--purple);
  --accent-subtle:   rgba(159, 1, 237, 0.14);
  --accent-muted:    rgba(159, 1, 237, 0.30);
  --accent-text:     var(--purple);

  /* Borders */
  --border-subtle:  rgba(255, 255, 255, 0.08);
  --border-default: rgba(255, 255, 255, 0.14);
  --border-strong:  rgba(255, 255, 255, 0.24);
  --border-accent:  var(--purple-500);

  /* Focus ring */
  --focus-ring: rgba(159, 1, 237, 0.55);

  /* Status semantic */
  --success:        var(--green-500);
  --success-text:   var(--green-400);
  --success-subtle: rgba(22, 163, 107, 0.16);
  --warning:        var(--amber-500);
  --warning-text:   var(--amber-400);
  --warning-subtle: rgba(224, 146, 10, 0.16);
  --danger:         var(--red-500);
  --danger-text:    var(--red-400);
  --danger-subtle:  rgba(224, 59, 59, 0.16);
  --info:           var(--blue-500);
  --info-text:      var(--blue-400);
  --info-subtle:    rgba(42, 111, 219, 0.16);

  /* ---- Brand gradient — the ONLY gradient, exactly as supplied ---- */
  /* 90° flat-black → deep aubergine. Hero / section backdrops. */
  --gradient-brand:   linear-gradient(90deg, #000000 0%, #322232 100%); /* @kind color */
}

/* ============================================================
   LIGHT SCOPE — apply .stg-light on a container for light surfaces
   ============================================================ */
.stg-light {
  --bg-base:     var(--neutral-0);
  --bg-elevated: var(--neutral-50);
  --bg-inset:    var(--neutral-100);

  --surface-card:    var(--neutral-0);
  --surface-raised:  var(--neutral-0);
  --surface-overlay: var(--neutral-0);
  --surface-hover:   rgba(7, 5, 7, 0.04);
  --surface-active:  rgba(7, 5, 7, 0.07);

  --text-primary:   var(--neutral-950);
  --text-secondary: var(--neutral-700);
  --text-muted:     var(--neutral-500);
  --text-subtle:    var(--neutral-400);
  --text-on-accent: var(--white);
  --text-inverse:   var(--white);

  --accent-text:    var(--purple);
  --accent-subtle:  rgba(159, 1, 237, 0.08);

  --border-subtle:  rgba(7, 5, 7, 0.08);
  --border-default: rgba(7, 5, 7, 0.14);
  --border-strong:  rgba(7, 5, 7, 0.24);
}