/* AV Design System 3.0.0 — Design Tokens (extracted from ui.qdev.run on 2026-04-27) */

:root {
  --p-neutral-0: #ffffff;
  --p-neutral-25: #fafbfc;
  --p-neutral-50: #f5f7f9;
  --p-neutral-75: #eef1f4;
  --p-neutral-100: #e6eaee;
  --p-neutral-200: #d4dae1;
  --p-neutral-300: #b9c2cb;
  --p-neutral-400: #8d99a5;
  --p-neutral-500: #64707d;
  --p-neutral-600: #475361;
  --p-neutral-700: #2e3846;
  --p-neutral-800: #1a222e;
  --p-neutral-900: #0f141c;
  --p-neutral-950: #070a10;
  --p-blue-50: #eff6ff;
  --p-blue-100: #dbeafe;
  --p-blue-200: #bfdbfe;
  --p-blue-300: #93c5fd;
  --p-blue-400: #60a5fa;
  --p-blue-500: #3b82f6;
  --p-blue-600: #2563eb;
  --p-blue-700: #1d4ed8;
  --p-blue-800: #1e40af;
  --p-blue-900: #1e3a8a;
  --p-emerald-500: #10b981;
  --p-emerald-600: #059669;
  --p-emerald-700: #047857;
  --p-amber-400: #fbbf24;
  --p-amber-500: #f59e0b;
  --p-amber-600: #d97706;
  --p-rose-500: #f43f5e;
  --p-rose-600: #e11d48;
  --p-red-500: #ef4444;
  --p-red-600: #dc2626;
  --p-red-700: #b91c1c;
  --p-violet-500: #8b5cf6;
  --p-violet-600: #7c3aed;
  --p-cyan-400: #38bdf8;
  --p-cyan-500: #06b6d4;
  --p-teal-500: #14b8a6;
  --p-pink-500: #ec4899;
  --p-orange-500: #f97316;
  --p-orange-600: #ea580c;
  --p-paper-cream: #f5f2ea;
  --p-paper-warm: #ebe6d9;
  --p-paper-deep: #e0d9c5;
  --p-ink: #15130f;
  --p-ink-muted: #5a554b;
  --p-ink-faint: #8a8578;
  --p-rule: #cfc7b2;
  --p-editorial-navy: #0f4c81;
  --p-editorial-green: #2e6f4a;
  --p-editorial-brick: #b23b2b;
  --p-gold-paper-bg: #f8f5ee;
  --p-gold-paper-card: #ebe4d4;
  --p-gold-paper-rule: #dccfb3;
  --p-gold: #c89b37;
  --p-gold-deep: #a8832b;
  --p-terracotta: #d17a2a;
  --p-terracotta-deep: #b25f1f;
  --p-cyber-void: #0a0e17;
  --p-cyber-panel: #141c2a;
  --p-cyber-rule: #2a3a4e;
  --p-cyber-muted: #1e293b;
  --p-cyber-text: #e8edf5;
  --p-cyber-text-dim: #94a3b8;
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;
  --radius: var(--radius-md);
  --motion-duration-instant: 80ms;
  --motion-duration-fast: .14s;
  --motion-duration-base: .2s;
  --motion-duration-slow: .32s;
  --motion-duration-slower: .5s;
  --motion-ease-standard: cubic-bezier(.2, 0, 0, 1);
  --motion-ease-emphasised: cubic-bezier(.16, 1, .3, 1);
  --motion-ease-decelerate: cubic-bezier(0, 0, .2, 1);
  --motion-ease-accelerate: cubic-bezier(.4, 0, 1, 1);
  --motion-transition: var(--motion-duration-base) var(--motion-ease-emphasised);
  --z-base: 0;
  --z-raised: 10;
  --z-dropdown: 1000;
  --z-sticky: 1100;
  --z-drawer: 1200;
  --z-modal: 1300;
  --z-popover: 1400;
  --z-toast: 1500;
  --z-tooltip: 1600;
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --font-sans: "Inter", "Helvetica Neue", system-ui, sans-serif;
  --font-serif: "Source Serif 4", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 14px;
  --text-base: 15px;
  --text-lg: 17px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 36px;
  --text-5xl: 48px;
  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;
  --tracking-tight: -.02em;
  --tracking-normal: 0;
  --tracking-wide: .04em;
  --tracking-kicker: .12em;
}

[data-theme=light] {
  --color-bg: var(--p-neutral-25);
  --color-bg-subtle: var(--p-neutral-50);
  --color-surface: var(--p-neutral-0);
  --color-surface-raised: var(--p-neutral-0);
  --color-surface-sunken: var(--p-neutral-75);
  --color-surface-inverse: var(--p-neutral-900);
  --color-text: var(--p-neutral-900);
  --color-text-muted: var(--p-neutral-500);
  --color-text-faint: var(--p-neutral-400);
  --color-text-inverse: var(--p-neutral-0);
  --color-text-on-accent: var(--p-neutral-0);
  --color-border: var(--p-neutral-200);
  --color-border-strong: var(--p-neutral-300);
  --color-border-subtle: var(--p-neutral-100);
  --color-divider: var(--p-neutral-100);
  --color-accent: var(--p-blue-600);
  --color-accent-hover: var(--p-blue-700);
  --color-accent-active: var(--p-blue-800);
  --color-accent-subtle: var(--p-blue-50);
  --color-accent-muted: var(--p-blue-100);
  --color-accent-strong: var(--p-blue-800);
  --color-accent-contrast: var(--p-neutral-0);
  --color-success: var(--p-emerald-600);
  --color-success-hover: var(--p-emerald-700);
  --color-success-subtle: color-mix(in oklab, var(--p-emerald-500), white 88%);
  --color-success-muted: color-mix(in oklab, var(--p-emerald-500), white 70%);
  --color-success-contrast: var(--p-neutral-0);
  --color-warning: var(--p-amber-500);
  --color-warning-hover: var(--p-amber-600);
  --color-warning-subtle: color-mix(in oklab, var(--p-amber-500), white 88%);
  --color-warning-muted: color-mix(in oklab, var(--p-amber-500), white 70%);
  --color-warning-contrast: var(--p-neutral-900);
  --color-danger: var(--p-red-600);
  --color-danger-hover: var(--p-red-700);
  --color-danger-subtle: color-mix(in oklab, var(--p-red-500), white 88%);
  --color-danger-muted: color-mix(in oklab, var(--p-red-500), white 70%);
  --color-danger-contrast: var(--p-neutral-0);
  --color-info: var(--p-blue-500);
  --color-info-hover: var(--p-blue-600);
  --color-info-subtle: var(--p-blue-50);
  --color-info-muted: var(--p-blue-100);
  --color-info-contrast: var(--p-neutral-0);
  --color-focus-ring: var(--p-blue-500);
  --chart-1: var(--p-blue-600);
  --chart-2: var(--p-emerald-500);
  --chart-3: var(--p-amber-500);
  --chart-4: var(--p-violet-500);
  --chart-5: var(--p-rose-500);
  --chart-6: var(--p-cyan-500);
  --chart-7: var(--p-orange-500);
  --chart-8: var(--p-pink-500);
  --layer-weather: var(--p-cyan-400);
  --layer-hydro: var(--p-blue-500);
  --layer-seismic: var(--p-red-500);
  --layer-financial: var(--p-violet-500);
  --layer-media: var(--p-pink-500);
  --layer-epi: var(--p-rose-500);
  --layer-solar: var(--p-amber-400);
  --layer-space: var(--p-violet-600);
  --layer-economy: var(--p-emerald-500);
  --score-high: var(--color-success);
  --score-mid: var(--color-warning);
  --score-low: var(--color-danger);
  --shadow-xs: 0 1px 2px rgb(15 20 28 / .04);
  --shadow-sm: 0 1px 3px rgb(15 20 28 / .06), 0 1px 2px rgb(15 20 28 / .04);
  --shadow-md: 0 4px 8px rgb(15 20 28 / .06), 0 2px 4px rgb(15 20 28 / .04);
  --shadow-lg: 0 8px 20px rgb(15 20 28 / .08), 0 4px 8px rgb(15 20 28 / .04);
  --shadow-xl: 0 16px 32px rgb(15 20 28 / .1);
  --shadow-focus: 0 0 0 3px color-mix(in oklab, var(--color-focus-ring), transparent 70%);
  --background: 216 20% 97%;
  --foreground: 220 25% 10%;
  --card: 216 18% 98%;
  --card-foreground: 220 25% 10%;
  --card-border: 216 12% 92%;
  --popover: 216 18% 96%;
  --popover-foreground: 220 25% 10%;
  --popover-border: 216 12% 88%;
  --primary: 217 91% 53%;
  --primary-foreground: 0 0% 100%;
  --secondary: 216 14% 91%;
  --secondary-foreground: 220 25% 10%;
  --muted: 216 12% 92%;
  --muted-foreground: 216 10% 45%;
  --accent: 210 16% 90%;
  --accent-foreground: 220 25% 10%;
  --destructive: 0 72% 48%;
  --destructive-foreground: 0 0% 99%;
  --border: 216 12% 88%;
  --input: 216 12% 78%;
  --ring: 217 91% 53%;
  --sidebar: 218 22% 95%;
  --sidebar-foreground: 220 25% 10%;
  --sidebar-border: 216 12% 90%;
  --sidebar-primary: 217 91% 53%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 216 14% 88%;
  --sidebar-accent-foreground: 220 25% 10%;
  --sidebar-ring: 217 91% 53%;
}

[data-theme=dark] {
  --color-bg: var(--p-neutral-950);
  --color-bg-subtle: var(--p-neutral-900);
  --color-surface: var(--p-neutral-800);
  --color-surface-raised: var(--p-neutral-700);
  --color-surface-sunken: var(--p-neutral-900);
  --color-surface-inverse: var(--p-neutral-50);
  --color-text: var(--p-neutral-50);
  --color-text-muted: var(--p-neutral-400);
  --color-text-faint: var(--p-neutral-500);
  --color-text-inverse: var(--p-neutral-900);
  --color-text-on-accent: var(--p-neutral-0);
  --color-border: var(--p-neutral-700);
  --color-border-strong: var(--p-neutral-600);
  --color-border-subtle: var(--p-neutral-800);
  --color-divider: var(--p-neutral-800);
  --color-accent: var(--p-blue-500);
  --color-accent-hover: var(--p-blue-400);
  --color-accent-active: var(--p-blue-300);
  --color-accent-subtle: color-mix(in oklab, var(--p-blue-500), black 70%);
  --color-accent-muted: color-mix(in oklab, var(--p-blue-500), black 55%);
  --color-accent-strong: var(--p-blue-300);
  --color-accent-contrast: var(--p-neutral-950);
  --color-success: var(--p-emerald-500);
  --color-success-hover: var(--p-emerald-600);
  --color-warning: var(--p-amber-400);
  --color-warning-hover: var(--p-amber-500);
  --color-danger: var(--p-red-500);
  --color-danger-hover: var(--p-red-600);
  --color-info: var(--p-blue-400);
  --color-info-hover: var(--p-blue-500);
  --shadow-xs: 0 1px 2px rgb(0 0 0 / .3);
  --shadow-sm: 0 1px 3px rgb(0 0 0 / .4), 0 1px 2px rgb(0 0 0 / .3);
  --shadow-md: 0 4px 8px rgb(0 0 0 / .4), 0 2px 4px rgb(0 0 0 / .25);
  --shadow-lg: 0 8px 20px rgb(0 0 0 / .5);
  --shadow-xl: 0 16px 32px rgb(0 0 0 / .6);
  --background: 220 18% 8%;
  --foreground: 216 12% 92%;
  --card: 220 16% 10%;
  --card-foreground: 216 12% 92%;
  --primary: 217 91% 65%;
  --primary-foreground: 0 0% 100%;
  --muted: 220 10% 22%;
  --muted-foreground: 216 8% 55%;
  --border: 220 12% 18%;
  --input: 220 12% 28%;
  --ring: 217 91% 65%;
}

.theme-institutional {
  --color-bg: var(--p-paper-cream);
  --color-bg-subtle: var(--p-paper-warm);
  --color-surface: var(--p-neutral-0);
  --color-surface-raised: var(--p-neutral-0);
  --color-surface-sunken: var(--p-paper-warm);
  --color-text: var(--p-ink);
  --color-text-muted: var(--p-ink-muted);
  --color-text-faint: var(--p-ink-faint);
  --color-border: var(--p-rule);
  --color-border-strong: var(--p-paper-deep);
  --color-border-subtle: var(--p-paper-warm);
  --color-divider: var(--p-paper-warm);
  --color-accent: var(--p-editorial-navy);
  --color-accent-hover: color-mix(in oklab, var(--p-editorial-navy), black 10%);
  --color-accent-active: color-mix(in oklab, var(--p-editorial-navy), black 20%);
  --color-accent-subtle: color-mix(in oklab, var(--p-editorial-navy), white 88%);
  --color-accent-muted: color-mix(in oklab, var(--p-editorial-navy), white 75%);
  --color-accent-contrast: var(--p-paper-cream);
  --color-success: var(--p-editorial-green);
  --color-danger: var(--p-editorial-brick);
  --color-warning: var(--p-amber-600);
  --score-high: var(--p-editorial-green);
  --score-mid: var(--p-amber-600);
  --score-low: var(--p-editorial-brick);
  --chart-1: var(--p-editorial-navy);
  --chart-2: var(--p-editorial-green);
  --chart-3: var(--p-amber-600);
  --chart-4: var(--p-violet-600);
  --chart-5: var(--p-editorial-brick);
  --radius: var(--radius-sm);
  --font-sans: "Satoshi", "Inter", sans-serif;
  --paper: var(--p-paper-cream);
  --paper-2: var(--p-paper-warm);
  --paper-3: var(--p-paper-deep);
  --ink: var(--p-ink);
  --ink-muted: var(--p-ink-muted);
  --ink-faint: var(--p-ink-faint);
  --rule: var(--p-rule);
  --background: 42 27% 94%;
  --foreground: 36 14% 7%;
  --card: 0 0% 100%;
  --card-foreground: 36 14% 7%;
  --primary: 207 79% 28%;
  --primary-foreground: 42 27% 94%;
  --muted: 40 27% 88%;
  --muted-foreground: 34 7% 32%;
  --border: 40 21% 79%;
  --ring: 207 79% 28%;
}

.theme-cyber-dark {
  --color-bg: var(--p-cyber-void);
  --color-bg-subtle: var(--p-cyber-panel);
  --color-surface: var(--p-cyber-panel);
  --color-surface-raised: color-mix(in oklab, var(--p-cyber-panel), white 5%);
  --color-surface-sunken: var(--p-cyber-void);
  --color-surface-inverse: var(--p-cyber-text);
  --color-text: var(--p-cyber-text);
  --color-text-muted: var(--p-cyber-text-dim);
  --color-text-faint: color-mix(in oklab, var(--p-cyber-text-dim), var(--p-cyber-panel) 40%);
  --color-text-inverse: var(--p-cyber-void);
  --color-border: var(--p-cyber-rule);
  --color-border-strong: color-mix(in oklab, var(--p-cyber-rule), white 15%);
  --color-border-subtle: var(--p-cyber-muted);
  --color-divider: var(--p-cyber-muted);
  --color-accent: var(--p-teal-500);
  --color-accent-hover: color-mix(in oklab, var(--p-teal-500), white 10%);
  --color-accent-active: color-mix(in oklab, var(--p-teal-500), white 20%);
  --color-accent-subtle: color-mix(in oklab, var(--p-teal-500), var(--p-cyber-void) 75%);
  --color-accent-muted: color-mix(in oklab, var(--p-teal-500), var(--p-cyber-void) 50%);
  --color-accent-contrast: var(--p-cyber-void);
  --color-success: var(--p-emerald-500);
  --color-warning: var(--p-amber-400);
  --color-danger: var(--p-rose-500);
  --color-info: var(--p-cyan-400);
  --chart-1: var(--p-teal-500);
  --chart-2: var(--p-emerald-500);
  --chart-3: var(--p-violet-500);
  --chart-4: var(--p-amber-500);
  --chart-5: var(--p-rose-500);
  --shadow-xs: 0 1px 2px rgb(0 0 0 / .4);
  --shadow-sm: 0 1px 3px rgb(0 0 0 / .5);
  --shadow-md: 0 4px 8px rgb(0 0 0 / .5);
  --shadow-lg: 0 8px 20px rgb(0 0 0 / .6);
  --shadow-xl: 0 16px 32px rgb(0 0 0 / .7);
  color-scheme:dark;
  --background: 218 39% 7%;
  --foreground: 215 36% 93%;
  --card: 217 33% 12%;
  --card-foreground: 215 36% 93%;
  --primary: 172 82% 40%;
  --primary-foreground: 218 39% 7%;
  --muted: 215 28% 17%;
  --muted-foreground: 214 20% 66%;
  --border: 214 30% 23%;
  --ring: 172 82% 40%;
}

.theme-golden-paper {
  --color-bg: var(--p-gold-paper-bg);
  --color-bg-subtle: var(--p-gold-paper-card);
  --color-surface: var(--p-neutral-0);
  --color-surface-raised: var(--p-neutral-0);
  --color-surface-sunken: var(--p-gold-paper-card);
  --color-text: var(--p-ink);
  --color-text-muted: color-mix(in oklab, var(--p-ink), var(--p-gold-paper-bg) 40%);
  --color-text-faint: color-mix(in oklab, var(--p-ink), var(--p-gold-paper-bg) 65%);
  --color-border: var(--p-gold-paper-rule);
  --color-border-strong: color-mix(in oklab, var(--p-gold-paper-rule), black 15%);
  --color-border-subtle: var(--p-gold-paper-card);
  --color-divider: var(--p-gold-paper-card);
  --color-accent: var(--p-gold);
  --color-accent-hover: var(--p-gold-deep);
  --color-accent-active: color-mix(in oklab, var(--p-gold-deep), black 15%);
  --color-accent-subtle: color-mix(in oklab, var(--p-gold), white 85%);
  --color-accent-muted: color-mix(in oklab, var(--p-gold), white 70%);
  --color-accent-contrast: var(--p-gold-paper-bg);
  --color-success: var(--p-editorial-green);
  --color-warning: var(--p-terracotta);
  --color-danger: var(--p-terracotta-deep);
  --chart-1: var(--p-gold);
  --chart-2: var(--p-terracotta);
  --chart-3: var(--p-editorial-green);
  --chart-4: color-mix(in oklab, var(--p-ink), var(--p-gold-paper-card) 30%);
  --chart-5: var(--p-terracotta-deep);
  --background: 40 30% 96%;
  --foreground: 30 16% 14%;
  --card: 0 0% 100%;
  --card-foreground: 30 16% 14%;
  --primary: 38 59% 50%;
  --primary-foreground: 40 30% 96%;
  --muted: 40 24% 90%;
  --muted-foreground: 30 10% 40%;
  --border: 36 24% 83%;
  --ring: 38 59% 50%;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration-instant: 0ms;
    --motion-duration-fast: 0ms;
    --motion-duration-base: 0ms;
    --motion-duration-slow: 0ms;
    --motion-duration-slower: 0ms;
  }
}