/* ============================================================
   VINDICOR — Color tokens
   Derived from the brand mark: deep navy field, steel-silver
   phoenix, oxblood/crimson accents. A command-center palette:
   authoritative, technical, with red reserved for signal.
   ============================================================ */
:root {
  /* --- Base: Navy field (sampled from logo background) --- */
  --navy-950: #070d15;   /* deepest — near black-blue */
  --navy-900: #0c1420;   /* canvas dark — matches mark field */
  --navy-850: #101a28;
  --navy-800: #15212f;   /* panels on dark */
  --navy-750: #18293a;
  --navy-700: #1c2c3b;   /* raised panels, hairline-dark */
  --navy-600: #28394a;
  --navy-500: #36495b;
  --navy-400: #45596c;

  /* --- Base: Steel neutrals (sampled from phoenix) --- */
  --steel-50:  #f4f6f8;
  --steel-100: #eef1f4;
  --steel-200: #dce1e7;
  --steel-300: #c2cbd3;
  --steel-400: #a1adb7;  /* brightest steel from mark */
  --steel-500: #7e8c98;
  --steel-600: #5f6e7b;
  --steel-700: #45525e;
  --steel-800: #2f3a44;
  --steel-900: #1f272e;

  /* --- Base: Brand red (sampled from wing accents) --- */
  --red-300: #e0717a;
  --red-400: #cc4250;
  --red-500: #b5232f;    /* brand red — primary signal/CTA */
  --red-600: #97202a;    /* active / pressed */
  --red-700: #7a1a22;
  --oxblood: #611c24;    /* deep wing crimson — accent fills */

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

  /* --- Signal / status (security telemetry) --- */
  --signal-online:  #34b27b;  /* armed / online */
  --signal-warning: #e0a430;  /* degraded / attention */
  --signal-alert:   #cc4250;  /* breach / error (red family) */
  --signal-info:    #4d86c4;  /* steel-blue informational */

  /* ============================================================
     SEMANTIC ALIASES
     ============================================================ */

  /* Brand */
  --brand-red: var(--red-500);
  --brand-red-active: var(--red-600);
  --brand-red-deep: var(--oxblood);
  --brand-steel: var(--steel-400);
  --brand-navy: var(--navy-900);

  /* Light context surfaces (marketing body, portal cards) */
  --surface-canvas: var(--steel-50);     /* default light page floor */
  --surface-raised: var(--white);        /* cards on light */
  --surface-sunken: var(--steel-100);    /* wells, inputs ground */
  --surface-muted:  var(--steel-200);    /* chips, soft bands */

  /* Dark context surfaces (hero, portal shell, slides) */
  --surface-navy:        var(--navy-900);   /* dark page floor */
  --surface-navy-raised: var(--navy-800);   /* panels on dark */
  --surface-navy-panel:  var(--navy-700);   /* elevated panels */
  --surface-navy-sunken: var(--navy-950);   /* code wells on dark */

  /* Text on light */
  --text-strong: var(--navy-900);
  --text-body:   var(--steel-800);
  --text-muted:  var(--steel-600);
  --text-soft:   var(--steel-500);

  /* Text on dark */
  --text-on-dark-strong: var(--steel-50);
  --text-on-dark:        var(--steel-300);
  --text-on-dark-muted:  var(--steel-500);

  /* On-fill */
  --on-red: var(--white);

  /* Borders / hairlines */
  --hairline:        var(--steel-200);            /* on light */
  --hairline-strong: var(--steel-300);
  --hairline-dark:   rgba(161,173,183,0.14);      /* on dark */
  --hairline-dark-strong: rgba(161,173,183,0.24);

  /* Focus ring */
  --focus-ring: rgba(181,35,47,0.40);
}