/* Shield Index — Soft Glass design tokens
   Canonical reference: docs/superpowers/specs/2026-05-11-soft-glass-design-system.md
   Supersedes Warm Editorial (2026-05-09). */

:root {
  /* ─── Surface gradient ────────────────────────────────── */
  --surface-top:    #EAF2FB;
  --surface-mid:    #E4EEFA;
  --surface-low:    #DDE9F7;
  --surface-bot:    #D6E4F4;
  --gradient-surface: linear-gradient(180deg,
    var(--surface-top) 0%,
    var(--surface-mid) 35%,
    var(--surface-low) 70%,
    var(--surface-bot) 100%);

  --gradient-surface-wide: radial-gradient(ellipse at top,
    #EFF5FC 0%, #E0EBF6 60%, #D2DFEF 100%);

  /* Solid fallbacks — cards on the white body get a pale-blue tint
     so they pop visually. Used app-wide through --surface-card. */
  --surface:        #EAF2FB;
  --surface-card:   #E8F0FE;
  --surface-muted:  #F3F7FC;
  --surface-inset:  #FFFFFF;

  /* ─── Ink ────────────────────────────────────────────── */
  --ink:        #0B2447;   /* primary body, dark navy */
  --ink-strong: #061838;
  --ink-muted:  #4A6A92;
  --ink-soft:   #7B96B8;

  /* ─── Brand ──────────────────────────────────────────── */
  --brand:        #2563EB;
  --brand-hover:  #1E4FCC;
  --brand-soft:   #DCE7FB;
  --brand-accent: #0F4FE0;

  /* ─── Borders (used by legacy app.css rules) ─────────── */
  --border:        rgba(37, 99, 235, 0.16);
  --border-strong: rgba(37, 99, 235, 0.28);
  --border-hover:  rgba(37, 99, 235, 0.40);

  /* ─── Card tiers — defined for a white background ────── */
  /* "Vibrant" — strong, hero-level cards */
  --glass-vibrant-bg:        #E8F0FE;
  --glass-vibrant-blur:      none;
  --glass-vibrant-border:    1px solid rgba(37, 99, 235, 0.14);
  --glass-vibrant-highlight: inset 0 1px 0 rgba(255, 255, 255, 1);
  --glass-vibrant-shadow:    0 10px 28px rgba(37, 99, 235, 0.10), 0 2px 6px rgba(11, 36, 71, 0.04);

  /* "Regular" — default cards (project rows, timeline summaries) */
  --glass-regular-bg:        #E8F0FE;
  --glass-regular-blur:      none;
  --glass-regular-border:    1px solid rgba(37, 99, 235, 0.10);
  --glass-regular-highlight: inset 0 1px 0 rgba(255, 255, 255, 1);
  --glass-regular-shadow:    0 4px 14px rgba(37, 99, 235, 0.07), 0 1px 3px rgba(11, 36, 71, 0.03);

  /* "Thin" — topbar / sticky chrome */
  --glass-thin-bg:        rgba(255, 255, 255, 0.92);
  --glass-thin-blur:      blur(10px);
  --glass-thin-border:    1px solid rgba(37, 99, 235, 0.08);
  --glass-thin-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --glass-thin-shadow:    0 1px 0 rgba(37, 99, 235, 0.04);

  /* ─── Severity (outlined chip + pastel fill) ──────────── */
  --sev-critical-text:   #C24A3B;
  --sev-critical-fill:   #FCE4DF;
  --sev-critical-stroke: #F1B3A8;
  --sev-critical-bar:    #F1B3A8; /* legacy alias */

  --sev-high-text:   #C77A1C;
  --sev-high-fill:   #FCEED2;
  --sev-high-stroke: #F1C57F;
  --sev-high-bar:    #F1C57F;

  --sev-medium-text:   #2860C8;
  --sev-medium-fill:   #DDEAFB;
  --sev-medium-stroke: #9FBFEE;
  --sev-medium-bar:    #9FBFEE;

  --sev-low-text:   #1F8A7A;
  --sev-low-fill:   #D8EFE9;
  --sev-low-stroke: #8FCFC1;
  --sev-low-bar:    #8FCFC1;

  --sev-info-text:   #6B57A4;
  --sev-info-fill:   #E6E0F1;
  --sev-info-stroke: #B9A8DA;
  --sev-info-bar:    #B9A8DA;

  /* ─── Spacing (8pt grid; power-design rule #15) ─────── */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;
  /* Aliases retained for existing rules */
  --space-12: 48px;

  /* ─── Radius ─────────────────────────────────────────── */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-full: 9999px;
  /* legacy aliases */
  --r-sm: var(--radius-sm);

  /* ─── Typography ─────────────────────────────────────── */
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  --text-xs:  12px;
  --text-sm:  13px;
  --text-base:15px;
  --text-lg:  17px;
  --text-xl:  20px;
  --text-2xl: 24px;
  --text-3xl: 32px;
  --text-4xl: 40px;
  --text-5xl: 56px;
  --text-6xl: 72px;

  /* ─── Shadows (legacy aliases mapped to glass shadows) ─ */
  --shadow-sm: 0 1px 2px rgba(40, 70, 130, 0.06);
  --shadow-md: 0 4px 14px rgba(40, 70, 130, 0.10);
  --shadow-lg: 0 12px 32px rgba(40, 70, 130, 0.14);

  /* ─── Layout ─────────────────────────────────────────── */
  --topbar-h:            104px;
  --sidebar-w:           240px;
  --sidebar-w-collapsed: 64px;
  --max-content:         1200px;
  --max-page:            1200px;
  --max-marketing:       1140px;
  --max-reading:         720px;
  --max-narrow:          480px;

  /* ─── Motion (ui-ux-pro-max §7) ──────────────────────── */
  --motion-fast:  150ms;
  --motion-base:  220ms;
  --motion-slow:  320ms;
  --ease-out:     cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-spring:  cubic-bezier(0.2, 1.4, 0.4, 1);

  /* ─── Z-index ────────────────────────────────────────── */
  --z-base:     0;
  --z-sticky:   10;
  --z-dropdown: 50;
  --z-modal:    100;
  --z-toast:    200;

  /* ─── Focus ring (Priority 1 a11y) ───────────────────── */
  --focus-ring:       0 0 0 3px rgba(37, 99, 235, 0.30);
  --focus-ring-color: rgba(37, 99, 235, 0.55);

  /* ─── Density ────────────────────────────────────────── */
  --row-h:             44px;
  --row-h-comfortable: 52px;

  /* ─── Legacy aliases (preserve compat with app.css) ──── */
  --bg-base:        var(--surface);
  --surface-el:     var(--surface-card);
  --text-2:         var(--ink-muted);
  --text-3:         var(--ink-soft);
  --accent-dark:    var(--brand-hover);
  --accent-light:   var(--brand-soft);
  --accent-glow:    transparent;
  --crit:           var(--sev-critical-text);
  --crit-bg:        var(--sev-critical-fill);
  --crit-border:    var(--sev-critical-stroke);
  --high:           var(--sev-high-text);
  --high-bg:        var(--sev-high-fill);
  --high-border:    var(--sev-high-stroke);
  --med:            var(--sev-medium-text);
  --med-bg:         var(--sev-medium-fill);
  --med-border:     var(--sev-medium-stroke);
  --low:            var(--sev-low-text);
  --low-bg:         var(--sev-low-fill);
  --low-border:     var(--sev-low-stroke);
}