/* [THE_VAULT] // SYSTEM_V11.00 // design tokens
   Single source of truth. Import in web builds; mirror in Affinity palettes. */

:root {
  /* PALETTE */
  --void:          #050505;  /* default background */
  --signal:        #FFB300;  /* brand amber. mark, active UI */
  --granted:       #39ff14;  /* success, live, granted */
  --denied:        #ff1f4f;  /* error, locked */
  --surface-1:     #0a0a0a;  /* cards, panels */
  --surface-2:     #121212;  /* tooltips, secondary elevation */
  --border:        #262626;  /* default 1px borders */
  --text-primary:  #d4d4d4;  /* body on dark */
  --text-muted:    #666666;  /* labels, codes (large text only) */
  --text-muted-aa: #8a8a8a;  /* small muted text, AA compliant */
  --text-dim:      #333333;  /* decorative only */

  /* ALPHA */
  --signal-05: rgba(255,179,0,0.05);
  --signal-10: rgba(255,179,0,0.10);
  --signal-30: rgba(255,179,0,0.30);
  --signal-50: rgba(255,179,0,0.50);
  --granted-30: rgba(57,255,20,0.30);

  /* LIQUID GLASS // navigation + control surfaces only
     Tactical adaptation of Apple Liquid Glass: frosted, refractive,
     amber-tinted. Never on body content blocks (text, media, lists). */
  --glass-bg:            rgba(10, 10, 10, 0.55);
  --glass-bg-strong:     rgba(8, 8, 8, 0.72);
  --glass-bg-soft:       rgba(18, 18, 18, 0.42);
  --glass-border:        rgba(255, 179, 0, 0.18);
  --glass-border-soft:   rgba(255, 255, 255, 0.08);
  --glass-highlight:     rgba(255, 255, 255, 0.12);
  --glass-specular:      linear-gradient(
                           135deg,
                           rgba(255, 255, 255, 0.14) 0%,
                           rgba(255, 179, 0, 0.06) 40%,
                           transparent 70%
                         );
  --glass-blur:          18px;
  --glass-blur-strong:   28px;
  --glass-sat:           140%;
  --glass-radius:        2px;   /* sharp = cockpit, not soft iOS pill */
  --glass-shadow:        0 8px 32px rgba(0, 0, 0, 0.45),
                         inset 0 1px 0 var(--glass-highlight),
                         inset 0 0 0 1px var(--glass-border-soft);

  /* TYPE */
  --font-mono: 'JetBrains Mono', monospace;        /* 100% of UI, body, labels */
  --font-display: 'Space Grotesk', sans-serif;     /* headlines >80px only, max 2 per artifact */

  /* TYPE SCALE (base 16, ratio 1.333) */
  --fs-xs: 11px;   --fs-sm: 13px;   --fs-base: 16px;
  --fs-md: 19px;   --fs-lg: 24px;   --fs-xl: 36px;
  --fs-2xl: 56px;  --fs-3xl: 84px;  --fs-4xl: 128px;
}

/* Accessibility: reduce glass → solid surfaces */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --glass-bg: var(--surface-1);
    --glass-bg-strong: var(--surface-2);
    --glass-bg-soft: var(--surface-1);
    --glass-blur: 0px;
    --glass-blur-strong: 0px;
    --glass-sat: 100%;
  }
}