/* ============================================================
   COMPIE — COLOR TOKENS
   Brand palette: 4 expressive colors + 1 anchor neutral.
   Raw scales (--brand-*) live in components/fig-tokens.css
   (generated from the Figma Variables). This file adds the
   readable brand aliases + semantic, role-based tokens.
   ============================================================ */

:root {
  /* ---- Brand cores (the five named brand colors) ---- */
  --neon-pulse:    var(--brand-neon-pulse-500);    /* #CEFF00 — primary, energy + innovation */
  --digital-surge: var(--brand-digital-surge-500); /* #00FFFF — clarity + intelligence */
  --pixel-spark:   var(--brand-pixel-spark-500);   /* #FF00E7 — creativity + boldness */
  --nebula-mist:   var(--brand-nebula-mist-500);   /* #8691B2 — calm, futuristic neutral */
  --midnight-core: var(--brand-midnight-core-500); /* #01040D — depth, the anchor surface */

  /* ---- Service-division accents ---- */
  --division-software:  rgb(0,86,255);
  --division-cloud:     rgb(0,174,255);
  --division-c4isr:     rgb(119,147,60);
  --division-outsource: rgb(166,77,255);
  --division-studio:    rgb(242,24,41);
  --division-xaas:      rgb(255,153,0);

  /* ============================================================
     SEMANTIC ROLES — default theme is DARK (the brand's native mode)
     ============================================================ */

  /* Surfaces */
  --surface-base:      var(--brand-midnight-core-500); /* #01040D page */
  --surface-raised:    var(--brand-midnight-core-450); /* #1B1D25 card / panel */
  --surface-overlay:   var(--brand-midnight-core-400); /* #34363D popovers, inputs */
  --surface-inverse:   var(--brand-nebula-mist-0);     /* #FFFFFF light card */

  /* Text */
  --text-primary:   #ffffff;
  --text-secondary: var(--brand-nebula-mist-500);  /* #8691B2 muted body */
  --text-tertiary:  var(--brand-midnight-core-300);/* #55575D faint / captions */
  --text-on-accent: var(--brand-midnight-core-500);/* dark ink on neon fills */
  --text-inverse:   var(--brand-midnight-core-500);/* on light surfaces */

  /* Accents (interactive) */
  --accent:          var(--neon-pulse);
  --accent-hover:    var(--brand-neon-pulse-400);  /* #D8FF33 brighter */
  --accent-pressed:  var(--brand-neon-pulse-600);  /* #BBE800 deeper */
  --accent-subtle:   rgba(206,255,0,0.12);

  /* Borders / dividers */
  --border-subtle:   rgba(134,145,178,0.18);
  --border-default:  rgba(134,145,178,0.32);
  --border-strong:   var(--brand-nebula-mist-700); /* #5F677E */
  --divider:         var(--brand-nebula-mist-800); /* #4A5062 */

  /* Feedback */
  --success: var(--brand-digital-surge-500);
  --warning: var(--division-xaas);
  --danger:  var(--division-studio);
  --info:    var(--digital-surge);

  /* Focus ring */
  --focus-ring: var(--neon-pulse);
}

/* ---- LIGHT theme scope (collateral printed on white) ---- */
:root[data-theme="light"] {
  --surface-base:    var(--brand-nebula-mist-0);
  --surface-raised:  var(--brand-nebula-mist-50);
  --surface-overlay: #ffffff;
  --surface-inverse: var(--brand-midnight-core-500);

  --text-primary:   var(--brand-midnight-core-500);
  --text-secondary: var(--brand-nebula-mist-700);
  --text-tertiary:  var(--brand-nebula-mist-500);
  --text-inverse:   #ffffff;

  --border-subtle:  rgba(1,4,13,0.10);
  --border-default: rgba(1,4,13,0.18);
  --divider:        var(--brand-nebula-mist-200);
}