/* assets/css/sdp-tokens.css
 * Tokens canônicos do Sistema Disciplinar Pantanal
 * Gerado por scripts/design-audit.js --apply em 2026-06-01
 * Fonte: docs/design-audit-2026-06-01.md
 *
 * NÃO EDITAR DIRETAMENTE. Para mudar um token:
 *   1. Editar a ficha de decisões correspondente
 *   2. Rodar 'node scripts/design-audit.js --apply <ficha>'
 */

:root {
  --bg-active: rgba(181, 144, 74, 0.15);
  --bg-body: linear-gradient(135deg, #16243C 0%, #B5904A 50%, #C9A560 100%);
  --bg-card: #ffffff;
  --bg-hover: rgba(181, 144, 74, 0.1);
  --bg-input: rgba(255, 255, 255, 0.1);
  --bg-input-focus: rgba(255, 255, 255, 0.2);
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-sidebar: rgba(255, 255, 255, 0.95);
  --bg-table-header: #faf9f8;
  --bg-table-row-hover: #f8f7f6;
  --bg-tertiary: #e9ecef;
  --bol-accent-amber: #f59e0b;
  --bol-accent-coral: #ef4444;
  --bol-accent-emerald: #10b981;
  --bol-accent-gold: #B5904A;
  --bol-accent-gold-light: #D4B470;
  --bol-danger: #ff5252;
  --bol-gradient-aurora: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  --bol-gradient-emerald: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
  --bol-gradient-gold: linear-gradient(135deg, #8A6A2C 0%, #B5904A 100%);
  --bol-gradient-gold-soft: linear-gradient(135deg, #B5904A 0%, #D4B470 100%);
  --bol-gradient-ocean: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  --bol-gradient-primary: linear-gradient(135deg, #1F2D4A 0%, #1D357F 100%);
  --bol-gradient-sunset: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
  --bol-info: #4facfe;
  --bol-primary: #1D357F;
  --bol-primary-dark: #1F2D4A;
  --bol-secondary: #8A6A2C;
  --bol-success: #00c853;
  --bol-warning: #ff9100;
  --border-card: rgba(255, 255, 255, 0.2);
  --border-color: #e1dfdd;
  --border-focus: #C9A560;
  --border-light: #e1dfdd;
  --border-primary: #B5904A;
  --bp-lg: 1024px;
  --bp-md: 768px;
  --bp-sm: 480px;
  --bp-xl: 1280px;
  --card-bg: #ffffff;
  --color-action-active: var(--color-surface-3);
  --color-action-disabled: #E5E7EB;
  --color-action-hover: var(--color-surface-2);
  --color-action-selected: var(--color-gold-100);
  --color-border-strong: #C8BFA8;
  --color-border-subtle: var(--color-surface-3);
  --color-danger: #E53935;
  --color-danger-border: #FECACA;
  --color-danger-soft: #FEF2F2;
  --color-focus-border: var(--color-gold-500);
  --color-focus-ring: rgba(181, 144, 74, 0.42);
  --color-gold-100: #F7F0DC;
  --color-gold-200: #EDD99A;
  --color-gold-400: #C9A560;
  --color-gold-50: #FBF7EC;
  --color-gold-500: #B5904A;
  --color-info: #0078d4;
  --color-info-soft: #DBEAFE;
  --color-navy-100: #E8EDF4;
  --color-navy-600: #445782;
  --color-navy-700: #36476B;
  --color-navy-800: #2A3A5C;
  --color-navy-900: #1F2D4A;
  --color-navy-950: #16243C;
  --color-selection-bg: var(--color-gold-100);
  --color-selection-text: var(--color-navy-950);
  --color-status-danger: #DC2626;
  --color-status-info: #2563EB;
  --color-status-success: #16A34A;
  --color-status-warning: #CA8A04;
  --color-success: #107c10;
  --color-success-soft: #DCFCE7;
  --color-surface-0: #FFFFFF;
  --color-surface-1: #F6F4EE;
  --color-surface-2: #EFEBE0;
  --color-surface-3: #DDD6C4;
  --color-surface-elevated: #FFFFFF;
  --color-text-inverse: #FAF8F2;
  --color-text-muted: #6B7280;
  --color-text-primary: #111827;
  --color-text-secondary: #4B5563;
  --color-text-subtle: #9CA3AF;
  --color-warning: #FFB300;
  --color-warning-soft: #FEF3C7;
  --content-max-width: 1280px;
  --control-bg: var(--color-surface-1);
  --control-bg-active: var(--color-action-active);
  --control-bg-hover: var(--color-action-hover);
  --control-border: var(--color-border-subtle);
  --control-border-hover: var(--color-border-strong);
  --control-disabled-bg: var(--color-action-disabled);
  --control-disabled-text: var(--color-text-subtle);
  --control-gap: var(--space-2);
  --control-height-lg: 44px;
  --control-height-md: 40px;
  --control-height-sm: 32px;
  --control-muted: var(--color-text-muted);
  --control-padding-x: var(--space-3);
  --control-text: var(--color-text-primary);
  --danger-gradient: linear-gradient(135deg, #A12B2B 0%, #C0392B 100%);
  --dp-bg: #f0f4f8;
  --dp-border: #e2e8f0;
  --dp-border-subtle: #f1f5f9;
  --dp-danger: #dc2626;
  --dp-font-body: 'Plus Jakarta Sans', sans-serif;
  --dp-font-display: 'Space Grotesk', sans-serif;
  --dp-gold: #FFB300;
  --dp-gold-soft: #fff8e1;
  --dp-info: #0284c7;
  --dp-primary: #16243C;
  --dp-primary-dark: #0f1d4a;
  --dp-primary-light: #2d4a9e;
  --dp-radius-lg: 24px;
  --dp-radius-md: 16px;
  --dp-radius-sm: 12px;
  --dp-radius-xl: 32px;
  --dp-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);
  --dp-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --dp-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --dp-shadow-xl: 0 24px 48px rgba(15, 23, 42, 0.16);
  --dp-success: #059669;
  --dp-surface: #ffffff;
  --dp-surface-elevated: #ffffff;
  --dp-teal: #B5904A;
  --dp-teal-light: #C9A560;
  --dp-text: #0f172a;
  --dp-text-muted: #94a3b8;
  --dp-text-secondary: #475569;
  --dp-warning: #d97706;
  --ep-border: #E8E4DC;
  --ep-border-light: #F0ECE4;
  --ep-card: #FFFFFF;
  --ep-cream: #FAF8F4;
  --ep-ease: cubic-bezier(.4, 0, .2, 1);
  --ep-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ep-font-body: 'DM Sans', system-ui, -apple-system, sans-serif;
  --ep-font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --ep-gold: #D4A843;
  --ep-gold-light: #E8C36A;
  --ep-gold-pale: #FBF4E4;
  --ep-navy: #0C2D48;
  --ep-radius: 20px;
  --ep-radius-sm: 12px;
  --ep-radius-xs: 8px;
  --ep-shadow: 0 2px 8px rgba(12,45,72,.05), 0 8px 32px rgba(12,45,72,.04);
  --ep-shadow-lg: 0 8px 40px rgba(12,45,72,.08), 0 2px 12px rgba(12,45,72,.04);
  --ep-shadow-sm: 0 1px 2px rgba(12,45,72,.04), 0 2px 8px rgba(12,45,72,.03);
  --ep-shadow-xl: 0 16px 64px rgba(12,45,72,.12);
  --ep-teal: #145369;
  --ep-teal-light: #1A6E8E;
  --ep-terracotta: #C45D3E;
  --ep-text: #1A1A2E;
  --ep-text-muted: #8896A6;
  --ep-text-soft: #4A5568;
  --ep-warm-white: #FFFEFA;
  --ficai-amber: #f59e0b;
  --ficai-bg-card: var(--bg-card, #ffffff);
  --ficai-border: rgba(181, 144, 74, 0.22);
  --ficai-gradient: linear-gradient(135deg, #B5904A, #8A6A2C);
  --ficai-gradient-light: linear-gradient(135deg, rgba(181, 144, 74, 0.06), rgba(29, 53, 127, 0.03));
  --ficai-gray: #6b7280;
  --ficai-green: #10b981;
  --ficai-light: #FAF6EE;
  --ficai-primary: #1D357F;
  --ficai-red: #ef4444;
  --ficai-secondary: #B5904A;
  --ficai-text: var(--text-body, #374151);
  --ficai-text-muted: var(--text-muted, #9ca3af);
  --ficai-whatsapp: #25d366;
  --ficai-whatsapp-dark: #128c7e;
  --ficha-accent-emerald: #10b981;
  --ficha-accent-gold: #f59e0b;
  --ficha-accent-rose: #f43f5e;
  --ficha-accent-sky: #0ea5e9;
  --ficha-danger: #ef4444;
  --ficha-gradient-emerald: linear-gradient(135deg, #10b981 0%, #34d399 100%);
  --ficha-gradient-gold: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
  --ficha-gradient-primary: linear-gradient(135deg, #16243C 0%, #5b21b6 100%);
  --ficha-gradient-rose: linear-gradient(135deg, #f43f5e 0%, #fb7185 100%);
  --ficha-gradient-royal: linear-gradient(135deg, #5b21b6 0%, #7c3aed 100%);
  --ficha-gradient-sky: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 100%);
  --ficha-gradient-slate: linear-gradient(135deg, #334155 0%, #475569 100%);
  --ficha-info: #3b82f6;
  --ficha-primary: #16243C;
  --ficha-secondary: #5b21b6;
  --ficha-success: #22c55e;
  --ficha-warning: #eab308;
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-fallback: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --font-family-base: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-family-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-sm: 0.875rem;
  --font-size-xl: 1.25rem;
  --font-size-xs: 0.75rem;
  --font-weight-bold: 700;
  --font-weight-medium: 500;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --form-accent: #C9A560;
  --form-bg-card: rgba(255, 255, 255, 0.95);
  --form-bg-hover: #F3F4F6;
  --form-bg-input: #FAFBFC;
  --form-border: #E5E7EB;
  --form-border-focus: #B5904A;
  --form-danger: #EF4444;
  --form-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --form-font-display: 'Space Grotesk', sans-serif;
  --form-primary: #16243C;
  --form-secondary: #B5904A;
  --form-shadow-glow: 0 0 0 3px rgba(181, 144, 74, 0.15);
  --form-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --form-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --form-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --form-success: #10B981;
  --form-transition: cubic-bezier(0.4, 0, 0.2, 1);
  --form-warning: #F59E0B;
  --freq-accent-amber: #f59e0b;
  --freq-accent-coral: #ef4444;
  --freq-accent-emerald: #10b981;
  --freq-accent-teal: #C9A560;
  --freq-danger: #ff5252;
  --freq-gradient-aurora: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  --freq-gradient-emerald: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
  --freq-gradient-ocean: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  --freq-gradient-primary: linear-gradient(135deg, #16243C 0%, #B5904A 100%);
  --freq-gradient-sunset: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
  --freq-gradient-teal: linear-gradient(135deg, #B5904A 0%, #C9A560 100%);
  --freq-info: #4facfe;
  --freq-primary: #16243C;
  --freq-secondary: #B5904A;
  --freq-success: #00c853;
  --freq-warning: #ff9100;
  --glass-bg: rgba(255, 255, 255, 0.15);
  --glass-bg-solid: rgba(255, 255, 255, 0.95);
  --glass-border: rgba(255, 255, 255, 0.2);
  --hub-accent: #C9A560;
  --hub-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --hub-font-body: 'Plus Jakarta Sans', sans-serif;
  --hub-font-display: 'Space Grotesk', sans-serif;
  --hub-gradient-1: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  --hub-gradient-2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  --hub-gradient-3: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
  --hub-gradient-4: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
  --hub-gradient-5: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --hub-gradient-6: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
  --hub-primary: #16243C;
  --hub-secondary: #B5904A;
  --hub-shadow-glow: 0 0 40px rgba(181, 144, 74, 0.25);
  --hub-shadow-lg: 0 15px 50px rgba(0, 0, 0, 0.15);
  --hub-shadow-md: 0 8px 30px rgba(0, 0, 0, 0.12);
  --hub-shadow-sm: 0 4px 15px rgba(0, 0, 0, 0.08);
  --hub-transition: cubic-bezier(0.4, 0, 0.2, 1);
  --info-gradient: linear-gradient(135deg, #16243C 0%, #1F2D4A 100%);
  --input-bg: #ffffff;
  --letter-spacing-base: 0em;
  --letter-spacing-tight: 0em;
  --letter-spacing-wide: 0.04em;
  --letter-spacing-widest: 0.11em;
  --line-height-base: 1.5;
  --line-height-loose: 1.75;
  --line-height-tight: 1.2;
  --medida-accent: #C9A560;
  --medida-bg-card: #FFFFFF;
  --medida-bg-input: #F9FAFB;
  --medida-bg-page: #F8FAFC;
  --medida-border: #E2E8F0;
  --medida-border-focus: var(--medida-secondary);
  --medida-danger: #DC2626;
  --medida-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --medida-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --medida-font-display: 'Space Grotesk', sans-serif;
  --medida-header-gradient: linear-gradient(;
  --medida-info: #16243C;
  --medida-primary: #16243C;
  --medida-secondary: #B5904A;
  --medida-shadow-glow: 0 0 0 3px rgba(181, 144, 74, 0.12);
  --medida-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);
  --medida-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --medida-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --medida-shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.15);
  --medida-success: #059669;
  --medida-warning: #B5904A;
  --pp-accent: #FFB300;
  --pp-accent-light: #ffca28;
  --pp-accent-soft: #fff8e1;
  --pp-bg-body: #f8fafc;
  --pp-bg-card: #ffffff;
  --pp-bg-elevated: #ffffff;
  --pp-border: #e2e8f0;
  --pp-border-light: #f1f5f9;
  --pp-danger: #dc2626;
  --pp-danger-soft: #fee2e2;
  --pp-font-display: 'Space Grotesk', sans-serif;
  --pp-font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --pp-font-serif: 'Space Grotesk', sans-serif;
  --pp-info: #0284c7;
  --pp-info-soft: #e0f2fe;
  --pp-primary: #16243C;
  --pp-primary-dark: #152860;
  --pp-primary-light: #2d4a9e;
  --pp-primary-muted: #eff6ff;
  --pp-primary-soft: #dbeafe;
  --pp-radius-full: 9999px;
  --pp-radius-lg: 16px;
  --pp-radius-md: 12px;
  --pp-radius-sm: 8px;
  --pp-radius-xl: 24px;
  --pp-secondary: #B5904A;
  --pp-secondary-dark: #8B7035;
  --pp-secondary-light: #C9A560;
  --pp-secondary-soft: #e0f2f1;
  --pp-shadow-card-hover: 0 20px 40px -10px rgba(0, 0, 0, 0.1), 0 0 30px rgba(22, 36, 60, 0.1);
  --pp-shadow-glow: 0 0 40px rgba(22, 36, 60, 0.15);
  --pp-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
  --pp-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --pp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.06);
  --pp-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.03);
  --pp-success: #059669;
  --pp-success-soft: #d1fae5;
  --pp-text-muted: #94a3b8;
  --pp-text-primary: #1e293b;
  --pp-text-secondary: #475569;
  --pp-transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --pp-transition-bounce: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --pp-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --pp-transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
  --pp-warning: #d97706;
  --pp-warning-soft: #fef3c7;
  --primary-gradient: linear-gradient(135deg, #16243C 0%, #B5904A 100%);
  --radius-full: 9999px;
  --radius-lg: 10px;
  --radius-md: 8px;
  --radius-sm: 4px;
  --radius-xl: 14px;
  --rel-accent-coral: #ff6b6b;
  --rel-accent-cyan: #C9A560;
  --rel-accent-gold: #ffc107;
  --rel-accent-purple: #7c4dff;
  --rel-danger: #ff5252;
  --rel-gradient-aurora: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  --rel-gradient-cosmic: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --rel-gradient-emerald: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
  --rel-gradient-ocean: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  --rel-gradient-primary: linear-gradient(135deg, #16243C 0%, #B5904A 100%);
  --rel-gradient-sunset: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
  --rel-info: #448aff;
  --rel-primary: #16243C;
  --rel-secondary: #B5904A;
  --rel-success: #00c853;
  --rel-warning: #ff9100;
  --sdp-accent: #B5904A;
  --sdp-accent-hover: #9A7840;
  --sdp-brand-gold: #B5904A;
  --sdp-brand-navy: #16243C;
  --sdp-control-h: 44px;
  --sdp-error: #DC2626;
  --sdp-focus: rgba(181, 144, 74, 0.55);
  --sdp-font: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --sdp-grid-min: 280px;
  --sdp-icon-md: 24px;
  --sdp-primary: #16243C;
  --sdp-radius: 12px;
  --sdp-secondary: #1F2D4A;
  --sdp-sidebar-rail-w: 72px;
  --sdp-sidebar-w: 288px;
  --sdp-success: #059669;
  --sdp-surface-card: #FFFFFF;
  --sdp-surface-page: #F8F6F1;
  --sdp-text: #16243C;
  --sdp-text-muted: #566174;
  --secondary-gradient: linear-gradient(135deg, #C9A560 0%, #D4B574 100%);
  --section-gradient-alunos: linear-gradient(135deg, #00d2ff 0%, #3a7bd5 100%);
  --section-gradient-frequencia: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
  --section-gradient-inicio: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  --section-gradient-medidas: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  --section-gradient-relatorios: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-card-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --shadow-colored: 0 10px 40px rgba(181, 144, 74, 0.2);
  --shadow-focus: 0 0 0 3px var(--color-focus-ring);
  --shadow-glow: 0 0 40px rgba(22, 36, 60, 0.15);
  --shadow-gold: 0 0 0 2px rgba(181, 144, 74, 0.35);
  --shadow-heavy: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-institutional: 0 1px 0 rgba(31, 45, 74, 0.06), 0 10px 24px rgba(31, 45, 74, 0.08);
  --shadow-lg: 0 8px 20px rgba(31, 45, 74, 0.10), 0 2px 5px rgba(31, 45, 74, 0.06);
  --shadow-light: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 1px 3px rgba(31, 45, 74, 0.08), 0 1px 2px rgba(31, 45, 74, 0.05);
  --shadow-medium: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-sm: 0 1px 2px rgba(31, 45, 74, 0.06);
  --shadow-xl: 0 16px 36px rgba(31, 45, 74, 0.14), 0 6px 14px rgba(31, 45, 74, 0.08);
  --sidebar-collapsed: 68px;
  --sidebar-width: 288px;
  --space-1: 0.25rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --stat-icon-bg: rgba(0, 0, 0, 0.06);
  --stat-icon-color: #555;
  --success-gradient: linear-gradient(135deg, #1F7A4D 0%, #2D8F5E 100%);
  --text-body: #323130;
  --text-light: #B5904A;
  --text-muted: #212529;
  --text-on-primary: #ffffff;
  --text-placeholder: #6b7280;
  --text-primary: #16243C;
  --text-secondary: #8B7035;
  --text-sidebar: #323130;
  --theme-transition: 0.3s ease;
  --topbar-bg: var(--color-surface-elevated);
  --topbar-border: var(--color-border-subtle);
  --topbar-height: 64px;
  --topbar-muted: var(--color-text-muted);
  --topbar-shadow: var(--shadow-institutional);
  --topbar-text: var(--color-text-primary);
  --transition-base: 220ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 360ms cubic-bezier(0.4, 0, 0.2, 1);
  --tutorial-accent: #6366f1;
  --tutorial-danger: #ef4444;
  --tutorial-font-body: 'Plus Jakarta Sans', sans-serif;
  --tutorial-font-display: 'Space Grotesk', sans-serif;
  --tutorial-primary: #16243C;
  --tutorial-shadow-glow: 0 0 30px rgba(99, 102, 241, 0.25);
  --tutorial-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.16);
  --tutorial-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.12);
  --tutorial-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --tutorial-success: #10b981;
  --tutorial-transition: cubic-bezier(0.4, 0, 0.2, 1);
  --tutorial-warning: #f59e0b;
  --warning-gradient: linear-gradient(135deg, #B5904A 0%, #C9A560 100%);
  --z-index-dropdown: 1050;
  --z-index-modal: 1100;
  --z-index-topbar: 1000;
}