/* clos. doc-vault — deep-field design tokens, both themes.
   Pair with style.css + styleguide.css (canonical components). */
:root, :root[data-theme='white'] {
  --color-page:           #F4F5F7;
  --color-surface:        #FFFFFF;
  --color-panel:          #FFFFFF;
  --color-subtle:         #f0f2f8;
  --color-deep:           #edf0f6;
  --color-border:         rgba(20,40,80,0.08);
  --color-border-hover:   rgba(20,40,80,0.15);
  --color-ink:            #1A2744;
  --color-ink-secondary:  #4A5A78;
  --color-ink-muted:      #8090A8;
  --color-ink-faint:      #B8C4D4;
  --color-text-300:       #2a3e5e;
  --color-text-500:       #5a6e8a;
  --color-text-700:       #8a9ab4;
  --color-accent:         #2B5E8C;
  --color-accent-ghost:   rgba(43,94,140,0.06);
  --color-accent-subtle:  rgba(43,94,140,0.10);
  --color-on-accent:      #ffffff;
  --color-warn:           #C0400A;
  --color-surface-alt:    rgba(20,40,80,0.04);
  --color-actor-agent:    #3a5ba0;
  --color-actor-distributor: #7a4a1a;
  --color-secondary:      #2D8A5E;
  --color-amber:          #B08A28;
  --color-wine:           #6B5090;
  --color-risk-high:      #C0400A;
  --color-risk-med:       #B08A28;
  --color-risk-low:       #2D8A5E;
  --color-risk-neutral:   #8090A8;
  --color-chrome-bg:      #1E3F36;
  --color-chrome-text:    #E0EAE6;
  --color-chrome-muted:   #6A8A7E;
  --color-chrome-surface: rgba(255,255,255,0.06);
  --color-grid:           rgba(20,40,80,0.025);
  --color-nav-bg:         rgba(244,246,250,0.92);
  --color-overlay:        rgba(0,0,0,0.3);
  --shadow-sm:        0 1px 3px rgba(20,40,80,0.08);
  --shadow-ink:       0 2px 8px rgba(20,40,80,0.12);
  --shadow-ink-hover: 0 4px 16px rgba(20,40,80,0.18);
  --shadow-ink-press: 0 1px 4px rgba(20,40,80,0.10);
  --shadow-ink-modal: 0 20px 60px rgba(20,40,80,0.20);
  --shadow-focus:     0 0 0 2px rgba(43,94,140,0.35);
  --shadow-panel:     -4px 0 24px rgba(20,40,80,0.12);
  --font-sans:   'Barlow', 'Helvetica Neue', sans-serif;
  --font-mono:   'IBM Plex Mono', 'SF Mono', monospace;
  --font-serif:  'Instrument Serif', 'Georgia', serif;
  --font-badge:  'Barlow Semi Condensed', 'Barlow', sans-serif;
  --font-tracking-nav: 0.12em;
  --radius-xs: 2px;  --radius-sm: 4px;  --radius-md: 6px;
  --radius-lg: 10px; --radius-xl: 14px;
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px;
  --space-9: 48px; --space-10: 64px;
  --font-size-2xs: 7px;  --font-size-xs: 8px;     --font-size-sm: 9px;
  --font-size-sm-plus: 10px;   --font-size-base-mono: 11px;
  --font-size-xs-sans: 12px;   --font-size-sm-sans: 13px;
  --font-size-base: 15px;      --font-size-base-ui: 16px;
  --font-size-md: 17px;        --font-size-lg: 21px;
  --font-size-xl: 22px;        --font-size-kpi: 28px;
  --font-size-kpi-xl: 32px;    --font-size-display: 48px;
  --duration-instant: 80ms;    --duration-fast: 120ms;
  --duration-base: 200ms;      --duration-slow: 300ms;
  --duration-expand: 240ms;    --duration-theme: 500ms;
  --duration-shimmer: 1500ms;  --duration-spinner: 600ms;
  --duration-pulse: 2000ms;    --duration-blink: 1000ms;
  --ease-out:    cubic-bezier(0.0,0.0,0.2,1.0);
  --ease-in:     cubic-bezier(0.4,0.0,1.0,1.0);
  --ease-in-out: cubic-bezier(0.4,0.0,0.2,1.0);
  --ease-linear: linear;
  --ease-step:   step-end;
}

:root[data-theme='dark'] {
  --color-page:           #0C0C0C;
  --color-surface:        #181818;
  --color-panel:          #222222;
  --color-subtle:         #161616;
  --color-deep:           #080808;
  --color-border:         rgba(255,255,255,0.12);
  --color-border-hover:   rgba(255,255,255,0.22);
  --color-ink:            #CCCCCC;
  --color-ink-secondary:  #888888;
  --color-ink-muted:      #666666;
  --color-ink-faint:      #444444;
  --color-accent:         #00FF88;
  --color-accent-ghost:   rgba(0,255,136,0.08);
  --color-accent-subtle:  rgba(0,255,136,0.12);
  --color-on-accent:      #0C0C0C;
  --color-warn:           #FF5A3A;
  --color-secondary:      #00FF88;
  --color-amber:          #FFD644;
  --color-wine:           #B58AFF;
  --color-risk-high:      #FF5A3A;
  --color-risk-med:       #FFD644;
  --color-risk-low:       #00FF88;
  --color-risk-neutral:   #666666;
  --color-overlay:        rgba(0,0,0,0.5);
  --color-nav-bg:         rgba(10,10,10,0.92);
}