/*!
 * ============================================================================
 * sg-tokens.css -- Canonical SignalGround Design Tokens
 * ============================================================================
 * PROPRIETARY AND CONFIDENTIAL -- AUTHORIZED USE ONLY
 * Copyright (c) 2026 New Vision Security LLC. All rights reserved.
 *
 * SignalGround is a product of New Vision Security LLC, an SDVOSB.
 * Contact: laura@newvisionsecurity.com
 * ----------------------------------------------------------------------------
 *
 * PURPOSE:
 *   One canonical set of design tokens for the SignalGround fleet, injected by
 *   the shell middleware in 04-api-server.js into every HTML page (before
 *   sg-shell.css). Establishes the go-forward "--sg-*" token namespace AND a
 *   backward-compatible legacy-alias layer so existing dashboards render
 *   identically with zero per-file rewrites.
 *
 * WHY TWO LAYERS (canonical + legacy):
 *   The fleet grew two divergent design lineages:
 *     (A) Fluent lineage  -- "--azure/--az" naming; green #107C10, red #A4262C,
 *                            text #1B1B1F, border #E1E4E8. (majority of FB-*)
 *     (B) Emerald/slate   -- "--blue" naming; green #059669, red #DC2626,
 *                            text #1A1A1A, border #E2E8F0. (FB-490, FB-MW,
 *                            LicenseIQ, SpectrumCounsel, WHO-BENEFITS)
 *   Both agree on azure #0078D4, azure-dark #005A9E, azure-deeper #003B6F,
 *   azure-mid #C7E0F4. Navy, text, and status colors genuinely differ per
 *   lineage. We cannot collapse them without changing one lineage's look, so:
 *     - Canonical "--sg-*" tokens (this file, on :root) are the single source
 *       of truth for NEW components (e.g. sg-svc-nav.js).
 *     - Legacy aliases (--azure/--az/--blue/--txt/etc.) are defined on
 *       :where(:root), which has ZERO specificity. Any page's own :root{}
 *       block (specificity 0,1,0) therefore overrides these aliases regardless
 *       of stylesheet load order. Result: pages that define their own tokens
 *       are untouched; pages that merely REFERENCE a token they forgot to
 *       define get a sane fallback at the dominant historical value.
 *
 * ZERO-REGRESSION GUARANTEE:
 *   Because legacy aliases live on :where(:root) (0 specificity), no existing
 *   :root declaration can be overridden by this file. Injection order is
 *   irrelevant to correctness.
 *
 * CANONICAL PALETTE (Fluent light system):
 *   azure #0078D4 | azure-deep #004E8C | navy #0C2340 + status colors in use.
 * ============================================================================
 */

/* ----------------------------------------------------------------------------
 * LAYER 1 -- CANONICAL TOKENS (go-forward; authoritative on :root)
 * New components should consume these "--sg-*" names only.
 * -------------------------------------------------------------------------- */
:root {
  /* Brand / primary (Fluent azure ramp) */
  --sg-azure:          #0078D4;
  --sg-azure-deep:     #004E8C;   /* canonical deep -- per sprint spec */
  --sg-azure-dark:     #005A9E;   /* fleet-wide historical "dark" */
  --sg-azure-deeper:   #003B6F;   /* fleet-wide historical "deeper" */
  --sg-azure-mid:      #C7E0F4;
  --sg-azure-light:    #EFF6FC;
  --sg-azure-tint:     #F4F9FD;
  --sg-navy:           #0C2340;   /* canonical navy -- per sprint spec */

  /* Neutrals / surfaces */
  --sg-bg:             #F8F9FA;
  --sg-surface:        #F8FAFC;
  --sg-card:           #FFFFFF;
  --sg-white:          #FFFFFF;
  --sg-border:         #E1E4E8;

  /* Text ramp */
  --sg-text:           #1B1B1F;
  --sg-text-2:         #444650;
  --sg-text-3:         #737780;

  /* Status -- greens */
  --sg-green:          #107C10;
  --sg-green-light:    #DFF6DD;
  --sg-green-deep:     #047857;

  /* Status -- ambers / warning */
  --sg-amber:          #C27D0A;
  --sg-amber-light:    #FFF4CE;
  --sg-orange:         #D83B01;

  /* Status -- reds / danger */
  --sg-red:            #A4262C;
  --sg-red-light:      #FDE7E9;

  /* Accents */
  --sg-purple:         #5C2D91;
  --sg-purple-light:   #F4EBF3;
  --sg-cyan:           #0891B2;

  /* Radius scale */
  --sg-radius-sm:      4px;
  --sg-radius:         8px;
  --sg-radius-lg:      14px;
  --sg-radius-pill:    999px;

  /* Elevation / shadow scale */
  --sg-shadow-sm:      0 1px 3px rgba(0,0,0,0.06);
  --sg-shadow:         0 4px 16px rgba(0,0,0,0.08);
  --sg-shadow-lg:      0 10px 30px rgba(0,0,0,0.12);

  /* Typography */
  --sg-font: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
}

/* ----------------------------------------------------------------------------
 * LAYER 2 -- LEGACY ALIASES (zero specificity; safe fallback only)
 * :where(:root) => specificity (0,0,0). Any real page :root{} wins over these.
 * Values are the DOMINANT historical value for each name so an
 * undefined-reference fallback matches the majority look.
 * -------------------------------------------------------------------------- */
:where(:root) {
  /* azure / blue primary -- unanimous #0078D4 across fleet */
  --azure:        var(--sg-azure);
  --az:           var(--sg-azure);
  --blue:         var(--sg-azure);

  /* azure dark / deeper -- unanimous historical values */
  --azure-dark:   var(--sg-azure-dark);
  --az-dk:        var(--sg-azure-dark);
  --blue-dk:      var(--sg-azure-dark);
  --azure-deeper: var(--sg-azure-deeper);
  --az-dp:        var(--sg-azure-deeper);

  /* azure light -- Fluent lineage #EFF6FC; emerald lineage uses #E8F0FE */
  --azure-light:  var(--sg-azure-light);
  --az-lt:        var(--sg-azure-light);
  --blue-light:   #E8F0FE;

  /* azure mid / tint */
  --azure-mid:    var(--sg-azure-mid);
  --az-md:        var(--sg-azure-mid);
  --azure-tint:   var(--sg-azure-tint);

  /* navy -- dominant historical #001B3D (emerald lineage); Fluent uses #0C2340 */
  --navy:         #001B3D;

  /* neutrals / surfaces */
  --bg:           var(--sg-bg);
  --surface:      var(--sg-surface);
  --surf:         var(--sg-surface);
  --card:         var(--sg-card);
  --white:        var(--sg-white);
  --wht:          var(--sg-white);
  --border:       var(--sg-border);
  --bdr:          var(--sg-border);

  /* text ramp -- dominant Fluent literals */
  --text:         var(--sg-text);
  --txt:          #1e293b;
  --text2:        var(--sg-text-2);
  --txt2:         #64748b;
  --text3:        var(--sg-text-3);
  --txt3:         #94a3b8;

  /* status -- greens (Fluent #107C10 dominant) */
  --green:        var(--sg-green);
  --grn:          var(--sg-green);
  --green-light:  var(--sg-green-light);
  --grn-lt:       var(--sg-green-light);

  /* status -- ambers / warning */
  --amber:        var(--sg-amber);
  --amb:          var(--sg-amber);
  --amber-light:  var(--sg-amber-light);
  --amb-lt:       var(--sg-amber-light);
  --orange:       var(--sg-orange);

  /* status -- reds / danger */
  --red:          var(--sg-red);
  --red-light:    var(--sg-red-light);
  --red-lt:       var(--sg-red-light);

  /* accents */
  --purple:       var(--sg-purple);
  --pur:          var(--sg-purple);
  --purple-light: var(--sg-purple-light);
  --pur-lt:       var(--sg-purple-light);
  --cyan:         var(--sg-cyan);
  --gray:         #6B7280;

  /* radius / shadow legacy names */
  --radius:       var(--sg-radius);
  --shadow:       var(--sg-shadow);
  --shadow-sm:    var(--sg-shadow-sm);
}

/* UX-3 (WCAG 2.1 AA 2.4.7 / 1.4.11): a single fleet-wide keyboard focus
   indicator. :focus-visible keeps mouse clicks clean while guaranteeing a
   high-contrast ring for keyboard/AT users on every interactive element. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--sg-azure, #0078D4);
  outline-offset: 2px;
  border-radius: 2px;
}