/**
 * VoiceAI Design System
 *
 * Auto-generated from design tokens.
 * DO NOT EDIT DIRECTLY - modify tokens/*.json and rebuild.
 *
 * Build: 2026-03-05T09:41:17.002Z
 */

/* ========================================
   DEFAULT THEME (Midnight)
   ======================================== */
:root {
  --color-background-primary: #584840;
  --color-background-secondary: #60504a;
  --color-background-tertiary: #685852;
  --color-background-elevated: #70605a;
  --color-background-glass: rgba(230, 195, 160, 0.08);
  --color-background-overlay: rgba(88, 72, 64, 0.95);
  --color-glass-ultra-thin-background: rgba(255, 255, 255, 0.02);
  --color-glass-ultra-thin-blur: 4px;
  --color-glass-ultra-thin-border: rgba(255, 255, 255, 0.04);
  --color-glass-thin-background: rgba(255, 255, 255, 0.04);
  --color-glass-thin-blur: 8px;
  --color-glass-thin-border: rgba(255, 255, 255, 0.06);
  --color-glass-regular-background: rgba(255, 255, 255, 0.08);
  --color-glass-regular-blur: 16px;
  --color-glass-regular-border: rgba(255, 255, 255, 0.10);
  --color-glass-thick-background: rgba(255, 255, 255, 0.12);
  --color-glass-thick-blur: 24px;
  --color-glass-thick-border: rgba(255, 255, 255, 0.14);
  --color-glass-ultra-thick-background: rgba(255, 255, 255, 0.16);
  --color-glass-ultra-thick-blur: 40px;
  --color-glass-ultra-thick-border: rgba(255, 255, 255, 0.18);
  --color-glass-chromatic-background: rgba(212, 168, 74, 0.06);
  --color-glass-chromatic-blur: 20px;
  --color-glass-chromatic-border: rgba(212, 168, 74, 0.12);
  --color-tonal-surface1-background: rgba(230, 195, 160, 0.04);
  --color-tonal-surface2-background: rgba(230, 195, 160, 0.08);
  --color-tonal-surface3-background: rgba(230, 195, 160, 0.12);
  --color-tonal-surface-hover-background: rgba(230, 195, 160, 0.16);
  --color-tonal-surface-active-background: rgba(230, 195, 160, 0.20);
  --color-text-primary: #faf6f0;
  --color-text-secondary: #f0ebe4;
  --color-text-muted: #e8e2da;
  --color-text-dimmed: #e0d8ce;
  --color-text-inverse: #2a2420;
  --color-border-subtle: rgba(215, 185, 145, 0.12);
  --color-border-medium: rgba(215, 185, 145, 0.20);
  --color-border-strong: rgba(215, 185, 145, 0.30);
  --color-accent-primary: #d4a84a;
  --color-accent-hover: #e0bc6a;
  --color-accent-pressed: #c49a3a;
  --color-accent-glow: rgba(212, 168, 74, 0.22);
  --color-accent-subtle: rgba(212, 168, 74, 0.08);
  --color-accent-text: #e8c870;
  --color-semantic-success: #6bc48f;
  --color-semantic-success-glow: rgba(107, 196, 143, 0.22);
  --color-semantic-success-tint: rgba(107, 196, 143, 0.12);
  --color-semantic-error: #e07575;
  --color-semantic-error-glow: rgba(224, 117, 117, 0.22);
  --color-semantic-error-tint: rgba(224, 117, 117, 0.12);
  --color-semantic-warning: #e0b860;
  --color-semantic-warning-glow: rgba(224, 184, 96, 0.22);
  --color-semantic-warning-tint: rgba(224, 184, 96, 0.12);
  --color-semantic-info: #7da6cf;
  --color-semantic-info-glow: rgba(125, 166, 207, 0.22);
  --color-semantic-info-tint: rgba(125, 166, 207, 0.12);
  --color-utility-focus-ring: rgba(212, 168, 74, 0.3);
  --color-utility-focus-ring-subtle: rgba(212, 168, 74, 0.1);
  --color-utility-backdrop: rgba(20, 16, 14, 0.7);
  --color-utility-backdrop-light: rgba(20, 16, 14, 0.5);
  --color-utility-scrim: rgba(20, 16, 14, 0.85);
  --color-natural-cedar: #a08060;
  --color-natural-cedar-light: #c4a882;
  --color-natural-cedar-dark: #584840;
  --color-natural-moonlight: #e8e4dc;
  --color-natural-bamboo: #7a8660;
  --color-natural-bamboo-light: #9aaa80;
  --color-natural-stone: #6b635a;
  --color-natural-stone-light: #8a8278;
  --color-natural-moss: #5a7040;
  --color-natural-moss-light: #7a9060;
  --color-natural-paper: #f0ebe2;
  --color-natural-paper-cream: #faf8f5;
  --color-natural-paper-sand: #f5f2ed;
  --color-natural-ink: #3a342e;
  --color-natural-ink-light: #5c544a;
  --color-natural-tea: #c4a77d;
  --color-natural-tea-light: #d8c4a0;
  --color-natural-forest-green: #2d4a35;
  --color-natural-warm-amber: #d4a84a;
  --color-natural-warm-amber-light: #e8c870;
  --color-natural-highlight: #fff8e6;
  --color-natural-highlight-glow: rgba(255, 248, 230, 0.6);
  color-scheme: dark;
}

/* ========================================
   THEME VARIANTS
   ======================================== */
/* Theme: Cedar Night */
/* Warm cedar wood tones - Japanese zen garden under moonlight, open and welcoming */
[data-theme="midnight"] {
  color-scheme: dark;
  --color-background-primary: #584840;
  --color-background-secondary: #60504a;
  --color-background-tertiary: #685852;
  --color-background-elevated: #70605a;
  --color-background-glass: rgba(230, 195, 160, 0.08);
  --color-background-overlay: rgba(88, 72, 64, 0.95);
  --color-glass-ultra-thin-background: rgba(255, 255, 255, 0.02);
  --color-glass-ultra-thin-blur: 4px;
  --color-glass-ultra-thin-border: rgba(255, 255, 255, 0.04);
  --color-glass-thin-background: rgba(255, 255, 255, 0.04);
  --color-glass-thin-blur: 8px;
  --color-glass-thin-border: rgba(255, 255, 255, 0.06);
  --color-glass-regular-background: rgba(255, 255, 255, 0.08);
  --color-glass-regular-blur: 16px;
  --color-glass-regular-border: rgba(255, 255, 255, 0.10);
  --color-glass-thick-background: rgba(255, 255, 255, 0.12);
  --color-glass-thick-blur: 24px;
  --color-glass-thick-border: rgba(255, 255, 255, 0.14);
  --color-glass-ultra-thick-background: rgba(255, 255, 255, 0.16);
  --color-glass-ultra-thick-blur: 40px;
  --color-glass-ultra-thick-border: rgba(255, 255, 255, 0.18);
  --color-glass-chromatic-background: rgba(212, 168, 74, 0.06);
  --color-glass-chromatic-blur: 20px;
  --color-glass-chromatic-border: rgba(212, 168, 74, 0.12);
  --color-tonal-surface1-background: rgba(230, 195, 160, 0.04);
  --color-tonal-surface2-background: rgba(230, 195, 160, 0.08);
  --color-tonal-surface3-background: rgba(230, 195, 160, 0.12);
  --color-tonal-surface-hover-background: rgba(230, 195, 160, 0.16);
  --color-tonal-surface-active-background: rgba(230, 195, 160, 0.20);
  --color-text-primary: #faf6f0;
  --color-text-secondary: #f0ebe4;
  --color-text-muted: #e8e2da;
  --color-text-dimmed: #e0d8ce;
  --color-text-inverse: #2a2420;
  --color-border-subtle: rgba(215, 185, 145, 0.12);
  --color-border-medium: rgba(215, 185, 145, 0.20);
  --color-border-strong: rgba(215, 185, 145, 0.30);
  --color-accent-primary: #d4a84a;
  --color-accent-hover: #e0bc6a;
  --color-accent-pressed: #c49a3a;
  --color-accent-glow: rgba(212, 168, 74, 0.22);
  --color-accent-subtle: rgba(212, 168, 74, 0.08);
  --color-accent-text: #e8c870;
  --color-semantic-success: #6bc48f;
  --color-semantic-success-glow: rgba(107, 196, 143, 0.22);
  --color-semantic-success-tint: rgba(107, 196, 143, 0.12);
  --color-semantic-error: #e07575;
  --color-semantic-error-glow: rgba(224, 117, 117, 0.22);
  --color-semantic-error-tint: rgba(224, 117, 117, 0.12);
  --color-semantic-warning: #e0b860;
  --color-semantic-warning-glow: rgba(224, 184, 96, 0.22);
  --color-semantic-warning-tint: rgba(224, 184, 96, 0.12);
  --color-semantic-info: #7da6cf;
  --color-semantic-info-glow: rgba(125, 166, 207, 0.22);
  --color-semantic-info-tint: rgba(125, 166, 207, 0.12);
  --color-utility-focus-ring: rgba(212, 168, 74, 0.3);
  --color-utility-focus-ring-subtle: rgba(212, 168, 74, 0.1);
  --color-utility-backdrop: rgba(20, 16, 14, 0.7);
  --color-utility-backdrop-light: rgba(20, 16, 14, 0.5);
  --color-utility-scrim: rgba(20, 16, 14, 0.85);
  --color-natural-cedar: #a08060;
  --color-natural-cedar-light: #c4a882;
  --color-natural-cedar-dark: #584840;
  --color-natural-moonlight: #e8e4dc;
  --color-natural-bamboo: #7a8660;
  --color-natural-bamboo-light: #9aaa80;
  --color-natural-stone: #6b635a;
  --color-natural-stone-light: #8a8278;
  --color-natural-moss: #5a7040;
  --color-natural-moss-light: #7a9060;
  --color-natural-paper: #f0ebe2;
  --color-natural-paper-cream: #faf8f5;
  --color-natural-paper-sand: #f5f2ed;
  --color-natural-ink: #3a342e;
  --color-natural-ink-light: #5c544a;
  --color-natural-tea: #c4a77d;
  --color-natural-tea-light: #d8c4a0;
  --color-natural-forest-green: #2d4a35;
  --color-natural-warm-amber: #d4a84a;
  --color-natural-warm-amber-light: #e8c870;
  --color-natural-highlight: #fff8e6;
  --color-natural-highlight-glow: rgba(255, 248, 230, 0.6);
}

/* Theme: Zen Garden */
/* Warm paper, natural ink, Japanese garden serenity - human and organic */
[data-theme="zen"] {
  color-scheme: light;
  --color-background-primary: #faf8f5;
  --color-background-secondary: #f5f2ed;
  --color-background-tertiary: #ebe6df;
  --color-background-elevated: #fffdfb;
  --color-background-glass: rgba(139, 119, 91, 0.03);
  --color-background-overlay: rgba(250, 248, 245, 0.95);
  --color-glass-ultra-thin-background: rgba(255, 255, 255, 0.50);
  --color-glass-ultra-thin-blur: 4px;
  --color-glass-ultra-thin-border: rgba(44, 37, 32, 0.04);
  --color-glass-thin-background: rgba(255, 255, 255, 0.60);
  --color-glass-thin-blur: 8px;
  --color-glass-thin-border: rgba(44, 37, 32, 0.06);
  --color-glass-regular-background: rgba(255, 255, 255, 0.70);
  --color-glass-regular-blur: 16px;
  --color-glass-regular-border: rgba(44, 37, 32, 0.08);
  --color-glass-thick-background: rgba(255, 255, 255, 0.80);
  --color-glass-thick-blur: 24px;
  --color-glass-thick-border: rgba(44, 37, 32, 0.10);
  --color-glass-ultra-thick-background: rgba(255, 255, 255, 0.90);
  --color-glass-ultra-thick-blur: 40px;
  --color-glass-ultra-thick-border: rgba(44, 37, 32, 0.12);
  --color-glass-chromatic-background: rgba(61, 90, 69, 0.06);
  --color-glass-chromatic-blur: 20px;
  --color-glass-chromatic-border: rgba(61, 90, 69, 0.12);
  --color-tonal-surface1-background: rgba(44, 37, 32, 0.02);
  --color-tonal-surface2-background: rgba(44, 37, 32, 0.04);
  --color-tonal-surface3-background: rgba(44, 37, 32, 0.06);
  --color-tonal-surface-hover-background: rgba(44, 37, 32, 0.08);
  --color-tonal-surface-active-background: rgba(44, 37, 32, 0.12);
  --color-text-primary: #2c2520;
  --color-text-secondary: #5c544a;
  --color-text-muted: #6b635a;
  --color-text-dimmed: #756a5e;
  --color-text-inverse: #faf8f5;
  --color-border-subtle: rgba(44, 37, 32, 0.05);
  --color-border-medium: rgba(44, 37, 32, 0.10);
  --color-border-strong: rgba(44, 37, 32, 0.18);
  --color-accent-primary: #3D5A45;
  --color-accent-hover: #4a6b52;
  --color-accent-pressed: #2d4535;
  --color-accent-glow: rgba(61, 90, 69, 0.15);
  --color-accent-subtle: rgba(61, 90, 69, 0.05);
  --color-accent-text: #3D5A45;
  --color-semantic-success: #3d7a52;
  --color-semantic-success-glow: rgba(61, 122, 82, 0.18);
  --color-semantic-success-tint: rgba(61, 122, 82, 0.08);
  --color-semantic-error: #b5453a;
  --color-semantic-error-glow: rgba(181, 69, 58, 0.18);
  --color-semantic-error-tint: rgba(181, 69, 58, 0.08);
  --color-semantic-warning: #a67c35;
  --color-semantic-warning-glow: rgba(166, 124, 53, 0.18);
  --color-semantic-warning-tint: rgba(166, 124, 53, 0.08);
  --color-semantic-info: #3a6b9c;
  --color-semantic-info-glow: rgba(58, 107, 156, 0.18);
  --color-semantic-info-tint: rgba(58, 107, 156, 0.08);
  --color-utility-focus-ring: rgba(61, 90, 69, 0.3);
  --color-utility-focus-ring-subtle: rgba(61, 90, 69, 0.1);
  --color-utility-backdrop: rgba(44, 37, 32, 0.6);
  --color-utility-backdrop-light: rgba(44, 37, 32, 0.4);
  --color-utility-scrim: rgba(44, 37, 32, 0.8);
  --color-natural-wood: #a8896c;
  --color-natural-wood-light: #d4c4b0;
  --color-natural-wood-dark: #8a7060;
  --color-natural-bamboo: #7a8f5a;
  --color-natural-bamboo-light: #9aaf7a;
  --color-natural-stone: #8a8075;
  --color-natural-stone-light: #a8a095;
  --color-natural-sand: #e8e0d5;
  --color-natural-sand-light: #f5f0e8;
  --color-natural-moss: #5a7a3d;
  --color-natural-moss-light: #7a9a5d;
  --color-natural-paper: #faf8f5;
  --color-natural-paper-cream: #fffdfb;
  --color-natural-paper-warm: #f5efe8;
  --color-natural-ink: #2c2520;
  --color-natural-ink-light: #5c544a;
  --color-natural-tea: #c4a77d;
  --color-natural-tea-light: #d8c4a0;
  --color-natural-forest-green: #3d5a45;
  --color-natural-warm-amber: #a67c35;
  --color-natural-warm-amber-light: #c49a50;
  --color-natural-highlight: #fff8e6;
  --color-natural-highlight-glow: rgba(255, 248, 230, 0.5);
}

/* ========================================
   PERSONA THEMES
   ======================================== */

/* Persona: _description */
[data-persona="_description"] {
  --persona-primary: undefined;
  --persona-secondary: undefined;
  --persona-text: #ffffff;
  --persona-glow: undefined;
  --persona-tint: undefined;
}

/* Persona: _textOnDarkNote */
[data-persona="_text-on-dark-note"] {
  --persona-primary: undefined;
  --persona-secondary: undefined;
  --persona-text: #ffffff;
  --persona-glow: undefined;
  --persona-tint: undefined;
}

/* Persona: ferni */
[data-persona="ferni"] {
  --persona-primary: #4a6741;
  --persona-secondary: #3d5a35;
  --persona-text: #ffffff;
  --persona-glow: rgba(74, 103, 65, 0.28);
  --persona-tint: rgba(74, 103, 65, 0.06);
}

/* Persona: jack */
[data-persona="jack"] {
  --persona-primary: #9a7b5a;
  --persona-secondary: #7d6348;
  --persona-text: #ffffff;
  --persona-glow: rgba(154, 123, 90, 0.28);
  --persona-tint: rgba(154, 123, 90, 0.06);
}

/* Persona: peter */
[data-persona="peter"] {
  --persona-primary: #3a6b73;
  --persona-secondary: #2d5359;
  --persona-text: #ffffff;
  --persona-glow: rgba(58, 107, 115, 0.28);
  --persona-tint: rgba(58, 107, 115, 0.06);
}

/* Persona: alex */
[data-persona="alex"] {
  --persona-primary: #5a6b8a;
  --persona-secondary: #4a5a73;
  --persona-text: #ffffff;
  --persona-glow: rgba(90, 107, 138, 0.28);
  --persona-tint: rgba(90, 107, 138, 0.06);
}

/* Persona: maya */
[data-persona="maya"] {
  --persona-primary: #a67a6a;
  --persona-secondary: #8a635a;
  --persona-text: #ffffff;
  --persona-glow: rgba(166, 122, 106, 0.28);
  --persona-tint: rgba(166, 122, 106, 0.06);
}

/* Persona: jordan */
[data-persona="jordan"] {
  --persona-primary: #c4856a;
  --persona-secondary: #a86d55;
  --persona-text: #ffffff;
  --persona-glow: rgba(196, 133, 106, 0.28);
  --persona-tint: rgba(196, 133, 106, 0.06);
}

/* Persona: nayan */
[data-persona="nayan"] {
  --persona-primary: #b8956a;
  --persona-secondary: #9a7a52;
  --persona-text: #ffffff;
  --persona-glow: rgba(184, 149, 106, 0.28);
  --persona-tint: rgba(184, 149, 106, 0.06);
}

/* Persona: joel */
[data-persona="joel"] {
  --persona-primary: #9A0718;
  --persona-secondary: #7A0514;
  --persona-text: #ffffff;
  --persona-glow: rgba(154, 7, 24, 0.28);
  --persona-tint: rgba(154, 7, 24, 0.06);
}

/* Persona: _marketplace_description */
[data-persona="_marketplace_description"] {
  --persona-primary: undefined;
  --persona-secondary: undefined;
  --persona-text: #ffffff;
  --persona-glow: undefined;
  --persona-tint: undefined;
}

/* Persona: eli */
[data-persona="eli"] {
  --persona-primary: #6B5B95;
  --persona-secondary: #4A4063;
  --persona-text: #ffffff;
  --persona-glow: rgba(107, 91, 149, 0.28);
  --persona-tint: rgba(107, 91, 149, 0.06);
}

/* Persona: marcus */
[data-persona="marcus"] {
  --persona-primary: #2D5A4A;
  --persona-secondary: #1E3D32;
  --persona-text: #ffffff;
  --persona-glow: rgba(45, 90, 74, 0.28);
  --persona-tint: rgba(45, 90, 74, 0.06);
}

/* Persona: kenji */
[data-persona="kenji"] {
  --persona-primary: #2C3E50;
  --persona-secondary: #1A252F;
  --persona-text: #ffffff;
  --persona-glow: rgba(44, 62, 80, 0.28);
  --persona-tint: rgba(44, 62, 80, 0.06);
}

/* Persona: carmen */
[data-persona="carmen"] {
  --persona-primary: #D4A373;
  --persona-secondary: #A67B5B;
  --persona-text: #ffffff;
  --persona-glow: rgba(212, 163, 115, 0.28);
  --persona-tint: rgba(212, 163, 115, 0.06);
}

/* Persona: amara */
[data-persona="amara"] {
  --persona-primary: #7B6BA8;
  --persona-secondary: #5A4D80;
  --persona-text: #ffffff;
  --persona-glow: rgba(123, 107, 168, 0.28);
  --persona-tint: rgba(123, 107, 168, 0.06);
}

/* Persona: sasha */
[data-persona="sasha"] {
  --persona-primary: #E07B53;
  --persona-secondary: #B85C3C;
  --persona-text: #ffffff;
  --persona-glow: rgba(224, 123, 83, 0.28);
  --persona-tint: rgba(224, 123, 83, 0.06);
}

/* Persona: ray */
[data-persona="ray"] {
  --persona-primary: #4A5568;
  --persona-secondary: #2D3748;
  --persona-text: #ffffff;
  --persona-glow: rgba(74, 85, 104, 0.28);
  --persona-tint: rgba(74, 85, 104, 0.06);
}

/* ========================================
   EXTERNAL BRAND COLORS
   ======================================== */
:root {
  --external-claude-primary: #D97757;
  --external-claude-secondary: #B85F42;
  --external-claude-glow: rgba(217, 119, 87, 0.35);
  --external-claude-gradient: linear-gradient(135deg, #B85F42, #D97757);
  --external-gemini-primary: #4285F4;
  --external-gemini-secondary: #2B6AD9;
  --external-gemini-glow: rgba(66, 133, 244, 0.35);
  --external-gemini-gradient: linear-gradient(135deg, #2B6AD9, #4285F4);
  --external-gpt-primary: #10A37F;
  --external-gpt-secondary: #0B7A5E;
  --external-gpt-glow: rgba(16, 163, 127, 0.35);
  --external-gpt-gradient: linear-gradient(135deg, #0B7A5E, #10A37F);
  --external-google-primary: #4285F4;
  --external-google-gradient: linear-gradient(135deg, #4285F4, #4285F4);
  --external-apple-primary: #000000;
  --external-apple-gradient: linear-gradient(135deg, #000000, #000000);
  --external-spotify-primary: #1DB954;
  --external-spotify-secondary: #191414;
  --external-spotify-gradient: linear-gradient(135deg, #191414, #1DB954);
  --external-slack-primary: #4A154B;
  --external-slack-gradient: linear-gradient(135deg, #4A154B, #4A154B);
}

/* ========================================
   MARKETPLACE CATEGORY COLORS
   ======================================== */
:root {
  --category-mentorship-primary: #3a6b73;
  --category-mentorship-secondary: #2d5359;
  --category-mentorship-glow: rgba(58, 107, 115, 0.4);
  --category-mentorship-gradient: linear-gradient(135deg, #2d5359, #3a6b73);
  --category-mentorship-text: #3a6b73;
  --category-mentorship-tint: rgba(58, 107, 115, 0.4);
  --category-finance-primary: #4a5d8a;
  --category-finance-secondary: #3a4d73;
  --category-finance-glow: rgba(74, 93, 138, 0.4);
  --category-finance-gradient: linear-gradient(135deg, #3a4d73, #4a5d8a);
  --category-finance-text: #4a5d8a;
  --category-finance-tint: rgba(74, 93, 138, 0.4);
  --category-health-primary: #a67a6a;
  --category-health-secondary: #8a635a;
  --category-health-glow: rgba(166, 122, 106, 0.4);
  --category-health-gradient: linear-gradient(135deg, #8a635a, #a67a6a);
  --category-health-text: #a67a6a;
  --category-health-tint: rgba(166, 122, 106, 0.4);
  --category-productivity-primary: #b89a5a;
  --category-productivity-secondary: #9a7d42;
  --category-productivity-glow: rgba(184, 154, 90, 0.4);
  --category-productivity-gradient: linear-gradient(135deg, #9a7d42, #b89a5a);
  --category-productivity-text: #b89a5a;
  --category-productivity-tint: rgba(184, 154, 90, 0.4);
  --category-lifestyle-primary: #c4856a;
  --category-lifestyle-secondary: #a86d55;
  --category-lifestyle-glow: rgba(196, 133, 106, 0.4);
  --category-lifestyle-gradient: linear-gradient(135deg, #a86d55, #c4856a);
  --category-lifestyle-text: #c4856a;
  --category-lifestyle-tint: rgba(196, 133, 106, 0.4);
  --category-education-primary: #5a8a6a;
  --category-education-secondary: #4a735a;
  --category-education-glow: rgba(90, 138, 106, 0.4);
  --category-education-gradient: linear-gradient(135deg, #4a735a, #5a8a6a);
  --category-education-text: #5a8a6a;
  --category-education-tint: rgba(90, 138, 106, 0.4);
  --category-entertainment-primary: #8a6a7a;
  --category-entertainment-secondary: #735a6a;
  --category-entertainment-glow: rgba(138, 106, 122, 0.4);
  --category-entertainment-gradient: linear-gradient(135deg, #735a6a, #8a6a7a);
  --category-entertainment-text: #8a6a7a;
  --category-entertainment-tint: rgba(138, 106, 122, 0.4);
  --category-custom-primary: #8a7a6a;
  --category-custom-secondary: #736a5a;
  --category-custom-glow: rgba(138, 122, 106, 0.4);
  --category-custom-gradient: linear-gradient(135deg, #736a5a, #8a7a6a);
  --category-custom-text: #8a7a6a;
  --category-custom-tint: rgba(138, 122, 106, 0.4);
}

/* ========================================
   CINEMATIC COLORS (HERO SECTIONS)
   ======================================== */
:root {
  /* Cinematic - Storytelling Colors */
  --cinematic-black-primary: #0a0908;
  --cinematic-black-deep: #141210;
  --cinematic-black-rich: #1a1613;
  --cinematic-text-hero: #ffffff;
  --cinematic-text-hero-subtle: rgba(255, 255, 255, 0.9);
  --cinematic-text-hero-muted: rgba(255, 255, 255, 0.7);
  --cinematic-glow-warm: rgba(212, 168, 74, 0.4);
  --cinematic-glow-cool: rgba(125, 166, 207, 0.4);
  --cinematic-glow-magic: rgba(168, 139, 250, 0.35);
}

/* ========================================
   GRADIENT SYSTEM
   ======================================== */
:root {
  /* Gradient System */
  --gradient-hero-light-start: #faf8f5;
  --gradient-hero-light-end: #f5f2ed;
  --gradient-hero-light: linear-gradient(180deg, #faf8f5 0%, #f5f2ed 100%);
  --gradient-hero-dark-start: #584840;
  --gradient-hero-dark-end: #3a302a;
  --gradient-hero-dark: linear-gradient(180deg, #584840 0%, #3a302a 100%);
  --gradient-warm-sunrise-start: #faf8f5;
  --gradient-warm-sunrise-mid: #f5efe8;
  --gradient-warm-sunrise-end: #f0ebe4;
  --gradient-warm-sunrise: linear-gradient(180deg, #faf8f5 0%, #f5efe8 50%, #f0ebe4 100%);
  --gradient-cool-evening-start: #584840;
  --gradient-cool-evening-mid: #4a3a35;
  --gradient-cool-evening-end: #3a2a25;
  --gradient-cool-evening: linear-gradient(180deg, #584840 0%, #4a3a35 50%, #3a2a25 100%);
  --gradient-accent-fade-start: rgba(61, 90, 69, 0.12);
  --gradient-accent-fade-end: rgba(61, 90, 69, 0.02);
  --gradient-accent-fade: linear-gradient(180deg, rgba(61, 90, 69, 0.12) 0%, rgba(61, 90, 69, 0.02) 100%);
}

/* ========================================
   COMPARISON COLORS
   ======================================== */
:root {
  /* Comparison Colors - Before/After, Good/Bad */
  --comparison-before-background: #f5f2ed;
  --comparison-before-border: rgba(44, 37, 32, 0.08);
  --comparison-before-text: #756a5e;
  --comparison-after-background: rgba(61, 90, 69, 0.06);
  --comparison-after-border: rgba(61, 90, 69, 0.15);
  --comparison-after-text: #3D5A45;
  --comparison-after-glow: rgba(61, 90, 69, 0.12);
  --comparison-bad-background: rgba(181, 69, 58, 0.06);
  --comparison-bad-border: rgba(181, 69, 58, 0.15);
  --comparison-bad-text: #b5453a;
  --comparison-bad-hover: rgba(181, 69, 58, 0.12);
  --comparison-good-background: rgba(61, 122, 82, 0.06);
  --comparison-good-border: rgba(61, 122, 82, 0.15);
  --comparison-good-text: #3d7a52;
  --comparison-good-hover: rgba(61, 122, 82, 0.12);
}

/* ========================================
   VISUALIZATION COLORS
   Better Than Human data storytelling
   ======================================== */
:root {
  /* Visualization Colors - Better Than Human Data Storytelling */

  /* Kintsugi */
  --viz-kintsugi-primary: #C9A227;
  --viz-kintsugi-bright: #E5C84B;
  --viz-kintsugi-deep: #9A7B1C;
  --viz-kintsugi-subtle: #B8956A;
  --viz-kintsugi-glow: rgba(201, 162, 39, 0.4);
  --viz-kintsugi-tint: rgba(201, 162, 39, 0.12);
  --viz-kintsugi-gradient-start: #C9A227;
  --viz-kintsugi-gradient-end: #E5C84B;

  /* River */
  --viz-river-user: #3a6b73;
  --viz-river-ferni: #4a6741;
  --viz-river-silence: rgba(139, 119, 91, 0.3);
  --viz-river-flow: rgba(58, 107, 115, 0.6);

  /* Constellation */
  --viz-constellation-node: #b8956a;
  --viz-constellation-edge: rgba(184, 149, 106, 0.4);
  --viz-constellation-highlight: #E5C84B;
  --viz-constellation-cluster: rgba(166, 122, 106, 0.3);

  /* Seasons */
  --viz-seasons-spring: #7a9060;
  --viz-seasons-summer: #C9A227;
  --viz-seasons-autumn: #c4856a;
  --viz-seasons-winter: #5a6b8a;

  /* Energy */
  --viz-energy-source: #4a6741;
  --viz-energy-drain: #c4856a;
  --viz-energy-neutral: #8a7a6a;
  --viz-energy-flow: rgba(74, 103, 65, 0.5);

  /* Growth */
  --viz-growth-ring: rgba(74, 103, 65, 0.15);
  --viz-growth-ring-active: #4a6741;
  --viz-growth-milestone: #C9A227;
  --viz-growth-potential: rgba(201, 162, 39, 0.3);

  /* Moods */
  --viz-moods-calm: #3D5A45;
  --viz-moods-joyful: #c4956a;
  --viz-moods-anxious: #b5453a;
  --viz-moods-tired: #756a5e;
  --viz-moods-focused: #3a6b73;
  --viz-moods-reflective: #7a6a8a;
  --viz-moods-stressed: #a54545;
  --viz-moods-energized: #4a7a52;
  --viz-moods-peaceful: #5a8a73;
  --viz-moods-uncertain: #6a6a6a;

  /* Status */
  --viz-status-thriving: #3d7a52;
  --viz-status-balanced: #3D5A45;
  --viz-status-stretched: #a67c35;
  --viz-status-depleted: #c67840;
  --viz-status-critical: #b5453a;

  /* Priority */
  --viz-priority-high: #b5453a;
  --viz-priority-medium: #a67c35;
  --viz-priority-low: #756a5e;

  /* Chapters */
  --viz-chapters-growth: #3D5A45;
  --viz-chapters-challenge: #b5453a;
  --viz-chapters-transition: #c4956a;
  --viz-chapters-celebration: #4a7a52;
  --viz-chapters-reflection: #7a6a8a;
}

/* ========================================
   TYPOGRAPHY
   ======================================== */
/* Font Families */
:root {
  --font-_comment: All themes now use consistent brand fonts per FERNI-BRAND-GUIDELINES.md;
  --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
  --font-accent: 'Sora', 'Plus Jakarta Sans', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
  --font-_google-fonts-import: undefined;

  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Font Sizes */
  --text-2xs: 0.625rem;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-lg: 1.0625rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;

  /* Line Heights */
  --leading-none: 1;
  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;
  --leading-loose: 2;

  /* Letter Spacing */
  --tracking-tighter: -0.03em;
  --tracking-tight: -0.015em;
  --tracking-normal: 0;
  --tracking-wide: 0.015em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;
}

/* Theme-specific fonts */
[data-theme="zen"] {
  --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
  --font-accent: 'Sora', 'Plus Jakarta Sans', sans-serif;
}

/* ========================================
   SPACING & LAYOUT
   ======================================== */
:root {
  /* MA (間) Spacing - Japanese intentional negative space */
  /* Based on Fibonacci sequence - approximates golden ratio */
  --ma-breath: 8px;
  --ma-pause: 13px;
  --ma-rest: 21px;
  --ma-silence: 34px;
  --ma-meditation: 55px;
  --ma-contemplation: 89px;
  --ma-vastness: 144px;

  /* Golden Ratio Scales (φ = 1.618) */
  --phi-xs: 0.382rem;
  --phi-sm: 0.618rem;
  --phi-md: 1rem;
  --phi-lg: 1.618rem;
  --phi-xl: 2.618rem;
  --phi-2xl: 4.236rem;
  --phi-3xl: 6.854rem;

  /* Spacing Scale */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-9: 2.25rem;
  --space-10: 2.5rem;
  --space-11: 2.75rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-28: 7rem;
  --space-32: 8rem;
  --space-36: 9rem;
  --space-40: 10rem;
  --space-44: 11rem;
  --space-48: 12rem;
  --space-52: 13rem;
  --space-56: 14rem;
  --space-60: 15rem;
  --space-64: 16rem;
  --space-72: 18rem;
  --space-80: 20rem;
  --space-96: 24rem;
  --space-px: 1px;
  --space-0_5: 0.125rem;
  --space-1_5: 0.375rem;
  --space-2_5: 0.625rem;
  --space-3_5: 0.875rem;

  /* Semantic Spacing */
  --spacing-_documentation: Golden ratio (φ = 1.618) based spacing for harmonious visual rhythm;
  --spacing-2xs: 0.125rem;
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.618rem;
  --spacing-xl: 2.618rem;
  --spacing-2xl: 4.236rem;
  --spacing-3xl: 6.854rem;
  --spacing-4xl: 11.09rem;

  /* Border Radius */
  --radius-none: 0;
  --radius-xs: 0.25rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --radius-2xl: 1.5rem;
  --radius-3xl: 2rem;
  --radius-full: 9999px;

  /* Z-Index Scale */
  --z-hide: -1;
  --z-auto: auto;
  --z-base: 0;
  --z-docked: 10;
  --z-dropdown: 1000;
  --z-sticky: 1100;
  --z-banner: 1200;
  --z-overlay: 1300;
  --z-modal: 1400;
  --z-popover: 1500;
  --z-skip-link: 1600;
  --z-toast: 1700;
  --z-tooltip: 1800;

  /* Breakpoints */
  --breakpoint-xs: 375px;
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;

  /* Container Sizes */
  --container-xs: 20rem;
  --container-sm: 24rem;
  --container-md: 28rem;
  --container-lg: 32rem;
  --container-xl: 36rem;
  --container-2xl: 42rem;
  --container-3xl: 48rem;
  --container-4xl: 56rem;
  --container-5xl: 64rem;
  --container-6xl: 72rem;
  --container-7xl: 80rem;
  --container-full: 100%;

  /* Gradient Tokens - Use instead of hardcoding linear-gradient() */
  --gradient-surface-subtle: linear-gradient(180deg, var(--color-background-primary) 0%, var(--color-background-secondary) 100%);
  --gradient-surface-warm: linear-gradient(135deg, var(--color-background-elevated) 0%, var(--color-background-secondary) 100%);
  --gradient-surface-elevated: linear-gradient(180deg, var(--color-background-elevated) 0%, var(--color-background-tertiary) 100%);
  --gradient-persona-glow: linear-gradient(135deg, var(--persona-tint) 0%, transparent 100%);
  --gradient-persona-intense: linear-gradient(135deg, var(--persona-primary) 0%, var(--persona-secondary) 100%);
  --gradient-persona-subtle: linear-gradient(135deg, var(--persona-tint) 0%, transparent 50%, transparent 100%);
  --gradient-persona-radial: radial-gradient(circle at center, var(--persona-glow) 0%, transparent 70%);
  --gradient-persona-spotlight: radial-gradient(ellipse at top, var(--persona-tint) 0%, transparent 50%);
  --gradient-accent-primary: linear-gradient(135deg, var(--color-accent-primary) 0%, var(--color-accent-pressed) 100%);
  --gradient-accent-hover: linear-gradient(135deg, var(--color-accent-hover) 0%, var(--color-accent-primary) 100%);
  --gradient-accent-glow: linear-gradient(180deg, var(--color-accent-glow) 0%, transparent 100%);
  --gradient-semantic-success: linear-gradient(135deg, var(--color-semantic-success) 0%, var(--color-semantic-successGlow) 100%);
  --gradient-semantic-error: linear-gradient(135deg, var(--color-semantic-error) 0%, var(--color-semantic-errorGlow) 100%);
  --gradient-semantic-warning: linear-gradient(135deg, var(--color-semantic-warning) 0%, var(--color-semantic-warningGlow) 100%);
  --gradient-semantic-info: linear-gradient(135deg, var(--color-semantic-info) 0%, var(--color-semantic-infoGlow) 100%);
  --gradient-shimmer: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.1) 50%, transparent 100%);
  --gradient-fade-out: linear-gradient(180deg, var(--color-background-primary) 0%, transparent 100%);
  --gradient-fade-in: linear-gradient(180deg, transparent 0%, var(--color-background-primary) 100%);
  --gradient-vignette: radial-gradient(ellipse at center, transparent 40%, var(--color-background-overlay) 100%);
  --gradient-glass-specular: linear-gradient(135deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.05) 40%, transparent 60%);
  --gradient-glass-fresnel: linear-gradient(to bottom, rgba(255,255,255,0.1) 0%, transparent 30%, transparent 70%, rgba(255,255,255,0.05) 100%);
  --gradient-glass-tint: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%);
  --gradient-progress-bar: linear-gradient(90deg, var(--persona-secondary) 0%, var(--persona-primary) 100%);
  --gradient-progress-shimmer: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%);
}

/* Shadows - Midnight Theme */
[data-theme="midnight"] {
  --shadow-2xs: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(0, 0, 0, 0.4);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.25);
  --shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.25), 0 8px 16px rgba(0, 0, 0, 0.2);
  --shadow-2xl: 0 24px 48px rgba(0, 0, 0, 0.3), 0 12px 24px rgba(0, 0, 0, 0.2);
  --shadow-glow: 0 0 20px var(--color-accent-glow);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.4);
}

/* Shadows - Zen Theme */
[data-theme="zen"] {
  --shadow-2xs: 0 1px 2px rgba(0, 0, 0, 0.03), 0 1px 1px rgba(0, 0, 0, 0.04);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.05);
  --shadow-2xl: 0 24px 48px rgba(0, 0, 0, 0.12), 0 12px 24px rgba(0, 0, 0, 0.06);
  --shadow-glow: 0 0 20px var(--color-accent-glow);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.04);
}

/* ========================================
   GLASS MORPHISM - Apple Liquid Glass Style
   ======================================== */

[data-theme="midnight"] {
  --glass-surface-1: rgba(26, 26, 46, 0.7);
  --glass-surface-2: rgba(26, 26, 46, 0.8);
  --glass-surface-3: rgba(26, 26, 46, 0.9);
  --glass-blur-subtle: 8px;
  --glass-blur-medium: 16px;
  --glass-blur-strong: 24px;
  --glass-blur-intense: 40px;
  --glass-border-subtle: 1px solid rgba(255, 255, 255, 0.06);
  --glass-border-light: 1px solid rgba(255, 255, 255, 0.1);
  --glass-border-medium: 1px solid rgba(255, 255, 255, 0.15);
  --glass-inner-glow: inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
}

[data-theme="zen"] {
  --glass-surface-1: rgba(255, 255, 255, 0.6);
  --glass-surface-2: rgba(255, 255, 255, 0.75);
  --glass-surface-3: rgba(255, 255, 255, 0.9);
  --glass-blur-subtle: 8px;
  --glass-blur-medium: 16px;
  --glass-blur-strong: 24px;
  --glass-blur-intense: 40px;
  --glass-border-subtle: 1px solid rgba(0, 0, 0, 0.04);
  --glass-border-light: 1px solid rgba(0, 0, 0, 0.08);
  --glass-border-medium: 1px solid rgba(0, 0, 0, 0.12);
  --glass-inner-glow: inset 0 1px 0 0 rgba(255, 255, 255, 0.8);
}

/* Vibrancy - iOS-style saturation boost */
:root {
  --glass-vibrancy-none: saturate(1) contrast(1);
  --glass-vibrancy-subtle: saturate(1.2) contrast(1.02);
  --glass-vibrancy-medium: saturate(1.5) contrast(1.05);
  --glass-vibrancy-high: saturate(1.8) contrast(1.1);
  --glass-vibrancy-ultra: saturate(2) contrast(1.15);
}

/* Specular - Light reflection effects */
:root {
  --glass-specular-gradient: linear-gradient(135deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.05) 40%, transparent 60%);
  --glass-specular-position: top left;
  --glass-specular-size: 200% 200%;
  --glass-shimmer-gradient: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.1) 50%, transparent 100%);
  --glass-shimmer-animation: specularShimmer 3s ease-in-out infinite;
  --glass-fresnel-light: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, transparent 30%, transparent 70%, rgba(255,255,255,0.05) 100%);
  --glass-fresnel-dark: linear-gradient(to bottom, rgba(255,255,255,0.08) 0%, transparent 30%, transparent 70%, rgba(255,255,255,0.03) 100%);
}

/* Noise - Organic grain texture */
:root {
  --glass-noise-opacity-subtle: 0.015;
  --glass-noise-opacity-medium: 0.025;
  --glass-noise-opacity-visible: 0.04;
  --glass-noise-texture: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  --glass-noise-blend: overlay;
}

/* Interaction - Dynamic response */
:root {
  --glass-hover-blur-increase: 2px;
  --glass-active-scale: 0.98;
  --glass-focus-ring: 0 0 0 2px var(--persona-primary);
  --glass-tilt-max: 5deg;
  --glass-tilt-perspective: 1000px;
  --glass-tilt-transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --glass-ripple-duration: 600ms;
  --glass-ripple-easing: cubic-bezier(0.16, 1, 0.3, 1);
  --glass-ripple-color: rgba(255, 255, 255, 0.15);
}

/* Chromatic - Light refraction at edges */
:root {
  --glass-chromatic-offset: 0.5px;
  --glass-chromatic-red: rgba(255, 0, 0, 0.03);
  --glass-chromatic-blue: rgba(0, 0, 255, 0.03);
}

/* ========================================
   ANIMATION
   ======================================== */
:root {
  /* Easing Functions */
  --ease-linear: linear;
  --ease-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-ease-in-out-quint: cubic-bezier(0.83, 0, 0.17, 1);
  --ease-spring: cubic-bezier(0.5, 1.5, 0.5, 1);
  --ease-spring-bouncy: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-smooth: cubic-bezier(0.45, 0, 0.55, 1);
  --ease-organic: cubic-bezier(0.4, 0.2, 0.2, 1.1);
  --ease-elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6);
  --ease-anticipate: cubic-bezier(0.38, -0.4, 0.88, 0.65);
  --ease-decelerate: cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-gentle: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-playful: cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* Durations */
  --duration-instant: 0ms;
  --duration-fastest: 50ms;
  --duration-faster: 100ms;
  --duration-fast: 150ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;
  --duration-slower: 400ms;
  --duration-slowest: 500ms;
  --duration-deliberate: 700ms;
  --duration-dramatic: 1000ms;
  --duration-glacial: 1500ms;
  --duration-meditative: 3000ms;
  --duration-ambient: 8000ms;

  /* Transitions */
  --transition-none: none;
  --transition-opacity: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-transform: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-colors: color 200ms, background-color 200ms, border-color 200ms;
  --transition-all: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-all-fast: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-all-slow: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-spring-in: transform 500ms cubic-bezier(0.5, 1.5, 0.5, 1);
  --transition-smooth: all 200ms cubic-bezier(0.45, 0, 0.55, 1);
  --transition-magical: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --transition-organic: all 400ms cubic-bezier(0.4, 0.2, 0.2, 1.1);
  --transition-gentle: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Keyframe Animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes slideUp {
  from { transform: translateY(10px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes slideDown {
  from { transform: translateY(-10px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes scaleIn {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

@keyframes breathe {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

@keyframes avatarBreathe {
  0%, 100% { transform: scale3d(1, 1, 1) translateY(0); }
  40% { transform: scale3d(0.994, 1.012, 1) translateY(-2px); }
  50% { transform: scale3d(0.994, 1.012, 1) translateY(-2px); }
  90% { transform: scale3d(1, 1, 1) translateY(0); }
}

@keyframes avatarFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33% { transform: translateY(-4px) rotate(0.5deg); }
  66% { transform: translateY(-2px) rotate(-0.5deg); }
}

@keyframes avatarGlowRing {
  0%, 100% { opacity: 0.15; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.02); }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes glow {
  0% { box-shadow: 0 0 5px var(--color-accent-glow); }
  50% { box-shadow: 0 0 20px var(--color-accent-glow); }
  100% { box-shadow: 0 0 5px var(--color-accent-glow); }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes warmthGlow {
  0% { box-shadow: 0 0 0 0 var(--persona-glow); opacity: 1; }
  50% { box-shadow: 0 0 30px 10px var(--persona-glow); opacity: 0.95; }
  100% { box-shadow: 0 0 0 0 var(--persona-glow); opacity: 1; }
}

@keyframes softBreathe {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.02); opacity: 0.97; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes gentleBounce {
  0% { transform: scale(1); }
  30% { transform: scale(1.03); }
  60% { transform: scale(0.98); }
  100% { transform: scale(1); }
}

@keyframes connectionWarmth {
  0% { box-shadow: 0 0 0 0 var(--color-semantic-success-glow); transform: scale(1); }
  40% { box-shadow: 0 0 25px 8px var(--color-semantic-success-glow); transform: scale(1.02); }
  100% { box-shadow: 0 0 0 0 var(--color-semantic-success-glow); transform: scale(1); }
}

@keyframes presencePulse {
  0% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.01); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes acknowledgement {
  0% { transform: scale(1); }
  50% { transform: scale(1.015); }
  100% { transform: scale(1); }
}

@keyframes aurora {
  0% { background-position: 0% 50%; filter: hue-rotate(0deg); }
  50% { background-position: 100% 50%; filter: hue-rotate(30deg); }
  100% { background-position: 0% 50%; filter: hue-rotate(0deg); }
}

@keyframes float {
  0% { transform: translateY(0px) rotate(0deg); }
  33% { transform: translateY(-8px) rotate(1deg); }
  66% { transform: translateY(-4px) rotate(-1deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

@keyframes morphBlob {
  0% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  25% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
  50% { border-radius: 50% 60% 30% 60% / 30% 60% 70% 40%; }
  75% { border-radius: 60% 40% 60% 30% / 70% 30% 50% 60%; }
  100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
}

@keyframes sparkle {
  0% { transform: scale(0) rotate(0deg); opacity: 0; }
  50% { transform: scale(1) rotate(180deg); opacity: 1; }
  100% { transform: scale(0) rotate(360deg); opacity: 0; }
}

@keyframes ripple {
  0% { transform: scale(0); opacity: 0.6; }
  100% { transform: scale(4); opacity: 0; }
}

@keyframes celebrate {
  0% { transform: scale(1) rotate(0deg); }
  10% { transform: scale(1.1) rotate(-3deg); }
  20% { transform: scale(1.1) rotate(3deg); }
  30% { transform: scale(1.1) rotate(-3deg); }
  40% { transform: scale(1.1) rotate(3deg); }
  50% { transform: scale(1.1) rotate(0deg); }
  100% { transform: scale(1) rotate(0deg); }
}

@keyframes heartbeat {
  0% { transform: scale(1); }
  14% { transform: scale(1.1); }
  28% { transform: scale(1); }
  42% { transform: scale(1.1); }
  70% { transform: scale(1); }
}

@keyframes wiggle {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
  75% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}

@keyframes levitate {
  0% { transform: translateY(0); box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1); }
  50% { transform: translateY(-10px); box-shadow: 0 25px 15px 0 rgba(0,0,0,0.05); }
  100% { transform: translateY(0); box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1); }
}

@keyframes magneticPull {
  0% { transform: translate(var(--magnetic-x, 0), var(--magnetic-y, 0)); }
  100% { transform: translate(0, 0); }
}

@keyframes textReveal {
  0% { clip-path: inset(0 100% 0 0); opacity: 0; }
  100% { clip-path: inset(0 0 0 0); opacity: 1; }
}

@keyframes waveHand {
  0% { transform: rotate(0deg); }
  10% { transform: rotate(14deg); }
  20% { transform: rotate(-8deg); }
  30% { transform: rotate(14deg); }
  40% { transform: rotate(-4deg); }
  50% { transform: rotate(10deg); }
  60% { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes unfold {
  0% { transform: scaleY(0); transform-origin: top; opacity: 0; }
  100% { transform: scaleY(1); transform-origin: top; opacity: 1; }
}

@keyframes dustFloat {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(-100px) translateX(20px); opacity: 0; }
}

@keyframes typewriter {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes blinkCursor {
  0% { border-color: transparent; }
  50% { border-color: var(--color-accent-primary); }
  100% { border-color: transparent; }
}

@keyframes pixarBounce {
  0% { transform: translateY(0) scaleX(1) scaleY(1); opacity: 0.5; }
  15% { transform: translateY(2px) scaleX(1.2) scaleY(0.8); opacity: 0.7; }
  35% { transform: translateY(-10px) scaleX(0.8) scaleY(1.2); opacity: 1; }
  45% { transform: translateY(-12px) scaleX(0.85) scaleY(1.15); opacity: 1; }
  55% { transform: translateY(-6px) scaleX(0.9) scaleY(1.1); opacity: 0.9; }
  70% { transform: translateY(1px) scaleX(1.15) scaleY(0.85); opacity: 0.6; }
  85% { transform: translateY(-1px) scaleX(1.05) scaleY(0.95); opacity: 0.5; }
  100% { transform: translateY(0) scaleX(1) scaleY(1); opacity: 0.5; }
}

@keyframes pixarAnticipate {
  0% { transform: scale(1) rotate(0deg); }
  30% { transform: scale(0.95) rotate(-2deg); }
  100% { transform: scale(1.1) rotate(3deg); }
}

@keyframes pixarSettle {
  0% { transform: scale(1.1); }
  40% { transform: scale(0.97); }
  70% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

@keyframes pixarThinkingTilt {
  0% { transform: rotate(0deg) translateX(0); }
  50% { transform: rotate(3deg) translateX(2px); }
  100% { transform: rotate(0deg) translateX(0); }
}

@keyframes pixarJoyBounce {
  0% { transform: translateY(0) scale(1); }
  20% { transform: translateY(-15px) scaleX(0.9) scaleY(1.1); }
  40% { transform: translateY(0) scaleX(1.1) scaleY(0.9); }
  60% { transform: translateY(-8px) scaleX(0.95) scaleY(1.05); }
  80% { transform: translateY(0) scaleX(1.02) scaleY(0.98); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes pixarSadSlump {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  50% { transform: translateY(3px) scaleY(0.95); opacity: 0.9; }
  100% { transform: translateY(5px) scaleY(0.92); opacity: 0.85; }
}

@keyframes pixarAttention {
  0% { transform: scale(1) rotate(0deg); }
  30% { transform: scale(1.05) rotate(-1deg); }
  60% { transform: scale(1.02) rotate(0.5deg); }
  100% { transform: scale(1) rotate(0deg); }
}

@keyframes pixarBreathe {
  0% { transform: scale(1); }
  40% { transform: scale(1.015); }
  60% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

@keyframes pixarFloat {
  0% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-5px) rotate(1deg); }
  50% { transform: translateY(-8px) rotate(-0.5deg); }
  75% { transform: translateY(-4px) rotate(0.5deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

@keyframes avatarNod {
  0% { transform: scale3d(1, 1, 1) translate3d(0, 0, 0) rotate(0deg); }
  15% { transform: scale3d(1.02, 0.98, 1) translate3d(0, 3px, 0) rotate(3deg); }
  30% { transform: scale3d(0.98, 1.03, 1) translate3d(0, -5px, 0) rotate(-4deg); }
  50% { transform: scale3d(1.01, 0.99, 1) translate3d(0, 2px, 0) rotate(2deg); }
  65% { transform: scale3d(0.99, 1.01, 1) translate3d(0, -2px, 0) rotate(-1.5deg); }
  80% { transform: scale3d(1.005, 0.995, 1) translate3d(0, 1px, 0) rotate(0.5deg); }
  92% { transform: scale3d(0.998, 1.002, 1) translate3d(0, -0.3px, 0) rotate(-0.2deg); }
  100% { transform: scale3d(1, 1, 1) translate3d(0, 0, 0) rotate(0deg); }
}

@keyframes avatarShake {
  0% { transform: scale3d(1, 1, 1) translate3d(0, 0, 0) rotate(0deg); }
  15% { transform: scale3d(0.98, 1.02, 1) translate3d(-4px, 0, 0) rotate(-2deg); }
  30% { transform: scale3d(1.02, 0.98, 1) translate3d(4px, 0, 0) rotate(2deg); }
  45% { transform: scale3d(0.99, 1.01, 1) translate3d(-3px, 0, 0) rotate(-1.5deg); }
  60% { transform: scale3d(1.01, 0.99, 1) translate3d(2px, 0, 0) rotate(1deg); }
  75% { transform: scale3d(1, 1, 1) translate3d(-1px, 0, 0) rotate(-0.5deg); }
  88% { transform: scale3d(1, 1, 1) translate3d(0.5px, 0, 0) rotate(0.2deg); }
  100% { transform: scale3d(1, 1, 1) translate3d(0, 0, 0) rotate(0deg); }
}

@keyframes avatarBounce {
  0% { transform: scale3d(1, 1, 1) translate3d(0, 0, 0); }
  12% { transform: scale3d(1.08, 0.92, 1) translate3d(0, 2px, 0); }
  28% { transform: scale3d(0.94, 1.08, 1) translate3d(0, -12px, 0); }
  35% { transform: scale3d(0.92, 1.1, 1) translate3d(0, -15px, 0); }
  48% { transform: scale3d(0.96, 1.05, 1) translate3d(0, -8px, 0); }
  58% { transform: scale3d(1.1, 0.9, 1) translate3d(0, 3px, 0); }
  70% { transform: scale3d(0.97, 1.04, 1) translate3d(0, -4px, 0); }
  80% { transform: scale3d(1.03, 0.97, 1) translate3d(0, 1px, 0); }
  90% { transform: scale3d(0.99, 1.01, 1) translate3d(0, -0.5px, 0); }
  100% { transform: scale3d(1, 1, 1) translate3d(0, 0, 0); }
}

@keyframes avatarPulse {
  0% { transform: scale3d(1, 1, 1); filter: brightness(1); }
  25% { transform: scale3d(1.05, 1.05, 1); filter: brightness(1.08); }
  35% { transform: scale3d(1.06, 1.06, 1); filter: brightness(1.1); }
  55% { transform: scale3d(0.98, 0.98, 1); filter: brightness(1.03); }
  70% { transform: scale3d(1.02, 1.02, 1); filter: brightness(1.02); }
  85% { transform: scale3d(0.995, 0.995, 1); filter: brightness(1); }
  100% { transform: scale3d(1, 1, 1); filter: brightness(1); }
}

@keyframes avatarCuriousTilt {
  0% { transform: rotate(0deg) translate3d(0, 0, 0); }
  30% { transform: rotate(-4deg) translate3d(-2px, 0, 0); }
  60% { transform: rotate(3deg) translate3d(1px, 0, 0); }
  100% { transform: rotate(0deg) translate3d(0, 0, 0); }
}

@keyframes avatarAttentiveLean {
  0% { transform: scale(1) translate3d(0, 0, 0) rotate(0deg); }
  40% { transform: scale(1.02) translate3d(0, -2px, 0) rotate(2deg); }
  70% { transform: scale(1.015) translate3d(0, -1px, 0) rotate(1deg); }
  100% { transform: scale(1) translate3d(0, 0, 0) rotate(0deg); }
}

/* ========================================================================
   PIXAR-INSPIRED ANIMATION CLASSES
   Use these classes to trigger Pixar-quality squash & stretch animations
   ======================================================================== */

.pixar-bounce { animation: pixarBounce 500ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.pixar-anticipate { animation: pixarAnticipate 200ms cubic-bezier(0.38, -0.4, 0.88, 0.65) forwards; }
.pixar-settle { animation: pixarSettle 300ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards; }
.pixar-thinking-tilt { animation: pixarThinkingTilt 2s ease-in-out infinite; }
.pixar-joy-bounce { animation: pixarJoyBounce 600ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.pixar-sad-slump { animation: pixarSadSlump 800ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards; }
.pixar-attention { animation: pixarAttention 400ms cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.pixar-breathe { animation: pixarBreathe 5s ease-in-out infinite; }
.pixar-float { animation: pixarFloat 6s ease-in-out infinite; }

/* Avatar Reaction Classes - Pixar-quality squash & stretch */
.avatar-nod { animation: avatarNod 400ms cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.avatar-shake { animation: avatarShake 400ms cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.avatar-bounce { animation: avatarBounce 500ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.avatar-pulse { animation: avatarPulse 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.avatar-curious-tilt { animation: avatarCuriousTilt 600ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards; }
.avatar-attentive-lean { animation: avatarAttentiveLean 800ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards; }


/* ========================================
   CIRCADIAN SYSTEM
   Time-aware design that adapts to human rhythms
   "Dark mode is not enough. Ferni knows the difference
    between 10am focus and 2am presence."
   ======================================== */

:root {
  /* Circadian CSS Variables - Updated by JavaScript based on time */
  --circadian-warmth: 0;
  --circadian-brightness: 1;
  --circadian-animation-speed: 1;
  --circadian-filter: none;

  /* Circadian warmth filter formula */
  --circadian-filter-computed: sepia(calc(var(--circadian-warmth) * 0.15)) saturate(calc(1 + var(--circadian-warmth) * 0.1));
}

/* Circadian Period Data Attributes */
/* Apply [data-circadian="periodName"] to body for time-aware theming */

[data-circadian="earlyMorning"] {
  --circadian-warmth: 0.15;
  --circadian-brightness: 0.95;
  --circadian-animation-speed: 0.9;
  --circadian-period-name: "Dawn";
  --circadian-presence: "gentle awakening";
  --circadian-filter: sepia(calc(var(--circadian-warmth) * 0.15)) saturate(calc(1 + var(--circadian-warmth) * 0.1));
}

[data-circadian="morning"] {
  --circadian-warmth: 0.1;
  --circadian-brightness: 1;
  --circadian-animation-speed: 1.1;
  --circadian-period-name: "Morning";
  --circadian-presence: "fresh and energetic";
  --circadian-filter: sepia(calc(var(--circadian-warmth) * 0.15)) saturate(calc(1 + var(--circadian-warmth) * 0.1));
}

[data-circadian="midday"] {
  --circadian-warmth: 0;
  --circadian-brightness: 1;
  --circadian-animation-speed: 1;
  --circadian-period-name: "Midday";
  --circadian-presence: "clear and focused";
  --circadian-filter: sepia(calc(var(--circadian-warmth) * 0.15)) saturate(calc(1 + var(--circadian-warmth) * 0.1));
}

[data-circadian="afternoon"] {
  --circadian-warmth: 0.05;
  --circadian-brightness: 1;
  --circadian-animation-speed: 1;
  --circadian-period-name: "Afternoon";
  --circadian-presence: "productive calm";
  --circadian-filter: sepia(calc(var(--circadian-warmth) * 0.15)) saturate(calc(1 + var(--circadian-warmth) * 0.1));
}

[data-circadian="evening"] {
  --circadian-warmth: 0.2;
  --circadian-brightness: 0.95;
  --circadian-animation-speed: 0.9;
  --circadian-period-name: "Evening";
  --circadian-presence: "winding down";
  --circadian-filter: sepia(calc(var(--circadian-warmth) * 0.15)) saturate(calc(1 + var(--circadian-warmth) * 0.1));
}

[data-circadian="night"] {
  --circadian-warmth: 0.3;
  --circadian-brightness: 0.85;
  --circadian-animation-speed: 0.8;
  --circadian-period-name: "Night";
  --circadian-presence: "intimate and calm";
  --circadian-filter: sepia(calc(var(--circadian-warmth) * 0.15)) saturate(calc(1 + var(--circadian-warmth) * 0.1));
}

[data-circadian="lateNight"] {
  --circadian-warmth: 0.35;
  --circadian-brightness: 0.8;
  --circadian-animation-speed: 0.7;
  --circadian-period-name: "Late Night";
  --circadian-presence: "fully present at 2am";
  --circadian-filter: sepia(calc(var(--circadian-warmth) * 0.15)) saturate(calc(1 + var(--circadian-warmth) * 0.1));
}

[data-circadian="deepNight"] {
  --circadian-warmth: 0.25;
  --circadian-brightness: 0.75;
  --circadian-animation-speed: 0.6;
  --circadian-period-name: "Deep Night";
  --circadian-presence: "quiet companion";
  --circadian-filter: sepia(calc(var(--circadian-warmth) * 0.15)) saturate(calc(1 + var(--circadian-warmth) * 0.1));
}

/* Circadian Animation Speed Modifiers */
.circadian-aware {
  animation-duration: calc(var(--base-duration, 1s) / var(--circadian-animation-speed, 1));
}

/* Apply circadian warmth filter to any element */
.circadian-warm {
  filter: var(--circadian-filter, none);
  transition: filter 2s ease-in-out;
}

/* Late Night Presence - Extra warmth and slower animations */
[data-circadian="lateNight"], [data-circadian="deepNight"] {
  --color-bg-primary-circadian: color-mix(in oklch, var(--color-bg-primary) 95%, var(--color-warm) 5%);
  --transition-duration-circadian: calc(var(--duration-normal, 200ms) * 1.3);
}

@media (prefers-reduced-motion: reduce) {
  .circadian-aware {
    animation-duration: 0s;
  }
}

/* ========================================
   BREATH-SYNC ANIMATION SYSTEM
   "Traditional UI animations are robotic.
    Ferni breathes with you."
   ======================================== */

:root {
  /* Breath-Sync CSS Variables */
  --breath-duration: 5000ms;
  --breath-inhale: 40%;
  --breath-hold: 20%;
  --breath-exhale: 40%;
  --breath-scale-min: 1;
  --breath-scale-max: 1.03;
  --breath-easing: cubic-bezier(0.4, 0.0, 0.6, 1);
}

/* Breath-Sync Keyframes */

@keyframes breathSync-calm {
  0% { transform: scale(1); opacity: 0.9; }
  40% { transform: scale(1.03); opacity: 1; }
  60% { transform: scale(1.03); opacity: 1; }
  100% { transform: scale(1); opacity: 0.9; }
}

@keyframes breathSync-relaxed {
  0% { transform: scale(1); opacity: 0.92; }
  35% { transform: scale(1.02); opacity: 1; }
  65% { transform: scale(1.02); opacity: 1; }
  100% { transform: scale(1); opacity: 0.92; }
}

@keyframes breathSync-attentive {
  0% { transform: scale(1); opacity: 0.88; }
  45% { transform: scale(1.04); opacity: 1; }
  55% { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(1); opacity: 0.88; }
}

@keyframes breathSync-concerned {
  0% { transform: scale(0.98); opacity: 0.9; }
  50% { transform: scale(1.02); opacity: 1; }
  60% { transform: scale(1.02); opacity: 1; }
  100% { transform: scale(0.98); opacity: 0.9; }
}

/* Breath-Sync Preset Data Attributes */
/* Apply [data-breath="presetName"] to enable preset */

[data-breath="calm"] {
  --breath-duration: 5000ms;
  --breath-inhale: 40%;
  --breath-hold: 20%;
  --breath-exhale: 40%;
  --breath-scale-min: 1;
  --breath-scale-max: 1.03;
  --breath-easing: cubic-bezier(0.4, 0.0, 0.6, 1);
}

[data-breath="relaxed"] {
  --breath-duration: 6000ms;
  --breath-inhale: 35%;
  --breath-hold: 30%;
  --breath-exhale: 35%;
  --breath-scale-min: 1;
  --breath-scale-max: 1.02;
  --breath-easing: cubic-bezier(0.33, 0.0, 0.67, 1);
}

[data-breath="attentive"] {
  --breath-duration: 4000ms;
  --breath-inhale: 45%;
  --breath-hold: 10%;
  --breath-exhale: 45%;
  --breath-scale-min: 1;
  --breath-scale-max: 1.04;
  --breath-easing: cubic-bezier(0.4, 0.0, 0.2, 1);
}

[data-breath="concerned"] {
  --breath-duration: 3500ms;
  --breath-inhale: 50%;
  --breath-hold: 10%;
  --breath-exhale: 40%;
  --breath-scale-min: 0.98;
  --breath-scale-max: 1.02;
  --breath-easing: cubic-bezier(0.5, 0.0, 0.3, 1);
}

/* Breath-Sync Utility Classes */
.breath-sync {
  animation: breathSync-calm var(--breath-duration, 5000ms) var(--breath-easing, ease-in-out) infinite;
}

.breath-sync-calm {
  animation: breathSync-calm 5000ms cubic-bezier(0.4, 0.0, 0.6, 1) infinite;
}

.breath-sync-relaxed {
  animation: breathSync-relaxed 6000ms cubic-bezier(0.33, 0.0, 0.67, 1) infinite;
}

.breath-sync-attentive {
  animation: breathSync-attentive 4000ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite;
}

.breath-sync-concerned {
  animation: breathSync-concerned 3500ms cubic-bezier(0.5, 0.0, 0.3, 1) infinite;
}

/* Dynamic Breath-Sync - Uses CSS Variables */
@keyframes breathSyncDynamic {
  0% { transform: scale(var(--breath-scale-min, 1)); opacity: 0.9; }
  40% { transform: scale(var(--breath-scale-max, 1.03)); opacity: 1; }
  60% { transform: scale(var(--breath-scale-max, 1.03)); opacity: 1; }
  100% { transform: scale(var(--breath-scale-min, 1)); opacity: 0.9; }
}

.breath-sync-dynamic {
  animation: breathSyncDynamic var(--breath-duration, 5000ms) var(--breath-easing, ease-in-out) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .breath-sync,
  .breath-sync-calm,
  .breath-sync-relaxed,
  .breath-sync-attentive,
  .breath-sync-concerned,
  .breath-sync-dynamic {
    animation: none;
  }
}

/* ========================================
   EMOTIONAL THEMING SYSTEM
   "Apple gives you light/dark mode.
    Ferni gives you emotional presence."
   ======================================== */

:root {
  /* Emotional Theming CSS Variables */
  --emotional-temperature: 0;
  --emotional-warmth: 0.5;
  --emotional-saturation: 1;
  --emotional-animation-intensity: 1;
  --emotional-filter: none;

  /* Computed emotional filter */
  --emotional-filter-computed: sepia(calc(var(--emotional-warmth) * 0.2)) saturate(var(--emotional-saturation, 1));
}

/* Emotional Theme Data Attributes */
/* Apply [data-emotion="themeName"] for context-aware theming */

[data-emotion="embrace"] {
  --emotional-temperature: 0.4;
  --emotional-warmth: 0.8;
  --emotional-saturation: 0.9;
  --emotional-animation-intensity: 0.7;
  --emotional-state: "comfort";
  --emotional-name: "Warm Embrace";
  --emotional-filter: sepia(0.16000000000000003) saturate(0.9);
}

[data-emotion="energize"] {
  --emotional-temperature: -0.1;
  --emotional-warmth: 0.4;
  --emotional-saturation: 1.1;
  --emotional-animation-intensity: 1.3;
  --emotional-state: "excited";
  --emotional-name: "Morning Energy";
  --emotional-filter: hue-rotate(-1deg) saturate(1.1);
}

[data-emotion="focus"] {
  --emotional-temperature: -0.2;
  --emotional-warmth: 0.3;
  --emotional-saturation: 0.85;
  --emotional-animation-intensity: 0.6;
  --emotional-state: "thinking";
  --emotional-name: "Deep Focus";
  --emotional-filter: hue-rotate(-2deg) saturate(0.85);
}

[data-emotion="reflect"] {
  --emotional-temperature: 0.1;
  --emotional-warmth: 0.55;
  --emotional-saturation: 0.8;
  --emotional-animation-intensity: 0.5;
  --emotional-state: "contemplative";
  --emotional-name: "Quiet Reflection";
  --emotional-filter: sepia(0.11000000000000001) saturate(0.8);
}

/* Emotional Theme Utilities */
.emotion-aware {
  transition: filter 1.5s ease-in-out, background 1.5s ease-in-out;
}

.emotion-filter {
  filter: var(--emotional-filter, none);
}

/* Embrace - For comfort moments */
[data-emotion="embrace"] .emotion-surface {
  background: color-mix(in oklch, var(--color-bg-primary) 90%, #e6a96a 10%);
}

/* Energize - For high-energy moments */
[data-emotion="energize"] .emotion-surface {
  background: color-mix(in oklch, var(--color-bg-primary) 95%, var(--color-accent) 5%);
}

/* Focus - For deep work */
[data-emotion="focus"] {
  --shadow-strength: 0.5;
  --border-strength: 0.7;
}

/* Reflect - For processing moments */
[data-emotion="reflect"] {
  --color-saturation-modifier: 0.85;
}

/* Animation Intensity based on emotional state */
.emotion-animated {
  animation-duration: calc(var(--base-duration, 1s) / var(--emotional-animation-intensity, 1));
}

/* ========================================
   PERSONA AURA SYSTEM
   "Google Material gives you color schemes.
    Ferni personas have atmospheric presence."
   ======================================== */

:root {
  /* Persona Aura CSS Variables */
  --persona-aura-gradient: none;
  --persona-aura-glow: transparent;
  --persona-aura-spread: 0px;
  --persona-aura-pulse: 5s;
  --persona-aura-filter: none;
}

/* Aura Pulse Animation */
@keyframes aura-pulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* Persona Aura Data Attributes */
/* Apply [data-persona="personaName"] for persona-specific atmosphere */

[data-persona="ferni"] {
  --persona-aura-gradient: radial-gradient(ellipse 120% 100% at 50% -20%, rgba(74, 103, 65, 0.15) 0%, transparent 70%);
  --persona-aura-glow: rgba(74, 103, 65, 0.25);
  --persona-aura-spread: 80px;
  --persona-aura-pulse: 5s;
  --persona-aura-filter: saturate(1.02);
  --persona-presence: "grounding";
}

[data-persona="maya"] {
  --persona-aura-gradient: radial-gradient(ellipse 120% 100% at 50% -20%, rgba(139, 90, 173, 0.15) 0%, transparent 70%);
  --persona-aura-glow: rgba(139, 90, 173, 0.25);
  --persona-aura-spread: 70px;
  --persona-aura-pulse: 4s;
  --persona-aura-filter: saturate(1.05);
  --persona-presence: "energizing";
}

[data-persona="peter"] {
  --persona-aura-gradient: radial-gradient(ellipse 120% 100% at 50% -20%, rgba(46, 125, 154, 0.12) 0%, transparent 70%);
  --persona-aura-glow: rgba(46, 125, 154, 0.2);
  --persona-aura-spread: 90px;
  --persona-aura-pulse: 6s;
  --persona-aura-filter: saturate(0.98);
  --persona-presence: "clarifying";
}

[data-persona="jordan"] {
  --persona-aura-gradient: radial-gradient(ellipse 120% 100% at 50% -20%, rgba(209, 122, 71, 0.15) 0%, transparent 70%);
  --persona-aura-glow: rgba(209, 122, 71, 0.25);
  --persona-aura-spread: 75px;
  --persona-aura-pulse: 4.5s;
  --persona-aura-filter: saturate(1.08);
  --persona-presence: "exciting";
}

[data-persona="alex"] {
  --persona-aura-gradient: radial-gradient(ellipse 120% 100% at 50% -20%, rgba(90, 143, 123, 0.12) 0%, transparent 70%);
  --persona-aura-glow: rgba(90, 143, 123, 0.2);
  --persona-aura-spread: 85px;
  --persona-aura-pulse: 5.5s;
  --persona-aura-filter: saturate(1.0);
  --persona-presence: "calming";
}

[data-persona="nayan"] {
  --persona-aura-gradient: radial-gradient(ellipse 120% 100% at 50% -20%, rgba(139, 107, 74, 0.15) 0%, transparent 70%);
  --persona-aura-glow: rgba(139, 107, 74, 0.22);
  --persona-aura-spread: 100px;
  --persona-aura-pulse: 7s;
  --persona-aura-filter: saturate(0.95) sepia(0.05);
  --persona-presence: "deepening";
}

/* Aura Background - Apply to a pseudo-element or dedicated div */
.persona-aura {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 50vh;
  background: var(--persona-aura-gradient, none);
  pointer-events: none;
  z-index: -1;
  animation: aura-pulse var(--persona-aura-pulse, 5s) ease-in-out infinite;
  transition: background 1s ease-in-out;
}

/* Aura Glow - Ambient light around avatar */
.persona-glow {
  box-shadow: 0 0 var(--persona-aura-spread, 60px) var(--persona-aura-glow, transparent);
  transition: box-shadow 0.6s ease-in-out;
}

/* Aura Filter - Subtle atmosphere adjustment */
.persona-atmosphere {
  filter: var(--persona-aura-filter, none);
  transition: filter 0.8s ease-in-out;
}

/* ========================================
   RELATIONSHIP DEPTH SYSTEM
   "Apple treats every session the same.
    Ferni UI grows with your relationship."
   ======================================== */

:root {
  /* Relationship Depth CSS Variables */
  --relationship-stage: "new";
  --relationship-richness: 0.5;
  --relationship-animation-complexity: 1;
  --relationship-personalization: 0;
}

/* Relationship Stage Data Attributes */
/* Apply [data-relationship="stageName"] for progressive UI richness */

[data-relationship="new"] {
  --relationship-stage: "new";
  --relationship-richness: 0.5;
  --relationship-animation-complexity: 0.5;
  --relationship-personalization: 0.2;
}

[data-relationship="gettingToKnow"] {
  --relationship-stage: "gettingToKnow";
  --relationship-richness: 0.65;
  --relationship-animation-complexity: 0.7;
  --relationship-personalization: 0.4;
}

[data-relationship="buildingTrust"] {
  --relationship-stage: "buildingTrust";
  --relationship-richness: 0.8;
  --relationship-animation-complexity: 0.85;
  --relationship-personalization: 0.6;
}

[data-relationship="established"] {
  --relationship-stage: "established";
  --relationship-richness: 0.9;
  --relationship-animation-complexity: 0.95;
  --relationship-personalization: 0.8;
}

[data-relationship="deepPartnership"] {
  --relationship-stage: "deepPartnership";
  --relationship-richness: 1;
  --relationship-animation-complexity: 1;
  --relationship-personalization: 1;
}

/* Progressive UI Richness */

.relationship-animation {
  animation-iteration-count: calc(var(--relationship-animation-complexity, 1) * 1);
}

.relationship-shadow {
  --shadow-multiplier: var(--relationship-richness, 0.5);
  box-shadow: 0 4px calc(12px * var(--shadow-multiplier)) rgba(0, 0, 0, calc(0.1 * var(--shadow-multiplier)));
}

/* New User - Clean and focused */
[data-relationship="new"] .advanced-feature {
  display: none;
}
[data-relationship="new"] .relationship-decorative {
  opacity: 0;
}

/* Getting to Know - Personality emerging */
[data-relationship="gettingToKnow"] .growth-feature {
  display: block;
}
[data-relationship="gettingToKnow"] .relationship-decorative {
  opacity: 0.5;
}

/* Building Trust - Full team available */
[data-relationship="buildingTrust"] .team-feature {
  display: block;
}
[data-relationship="buildingTrust"] .relationship-decorative {
  opacity: 0.75;
}

/* Established - Rich interactions */
[data-relationship="established"] .advanced-feature {
  display: block;
}
[data-relationship="established"] .relationship-decorative {
  opacity: 0.9;
}

/* Deep Partnership - Full UI richness */
[data-relationship="deepPartnership"] .relationship-decorative {
  opacity: 1;
}
[data-relationship="deepPartnership"] .insight-preview {
  display: block;
}

/* Relationship Depth Indicator */
.relationship-indicator {
  display: flex;
  gap: 4px;
}
.relationship-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-text-muted);
  opacity: 0.3;
  transition: opacity 0.3s ease, background 0.3s ease;
}
.relationship-dot.filled {
  opacity: 1;
  background: var(--color-accent);
}

/* ========================================
   EFFECTS & MAGICAL UTILITIES
   ======================================== */
/* Blur Utilities */
:root {
  --blur-none: 0;
  --blur-xs: 2px;
  --blur-sm: 4px;
  --blur-md: 8px;
  --blur-lg: 16px;
  --blur-xl: 24px;
  --blur-2xl: 40px;
  --blur-glass: 12px;
}

/* Gradients */
[data-theme="midnight"] {
  --gradient-aurora: linear-gradient(135deg, rgba(74, 103, 65, 0.15) 0%, rgba(212, 168, 74, 0.15) 50%, rgba(92, 184, 132, 0.15) 100%);
  --gradient-warm-glow: radial-gradient(circle at 50% 50%, rgba(212, 168, 74, 0.15) 0%, transparent 70%);
  --gradient-sunbeam: linear-gradient(180deg, rgba(212, 168, 74, 0.08) 0%, transparent 50%);
  --gradient-mesh: radial-gradient(at 40% 20%, rgba(74, 103, 65, 0.1) 0px, transparent 50%), radial-gradient(at 80% 0%, rgba(212, 168, 74, 0.1) 0px, transparent 50%), radial-gradient(at 0% 50%, rgba(92, 184, 132, 0.08) 0px, transparent 50%);
}
[data-theme="zen"] {
  --gradient-aurora: linear-gradient(135deg, rgba(45, 90, 61, 0.08) 0%, rgba(196, 167, 125, 0.08) 50%, rgba(168, 137, 108, 0.08) 100%);
  --gradient-warm-glow: radial-gradient(circle at 50% 50%, rgba(196, 167, 125, 0.1) 0%, transparent 70%);
  --gradient-sunbeam: linear-gradient(180deg, rgba(250, 248, 245, 1) 0%, rgba(245, 242, 237, 1) 100%);
  --gradient-mesh: radial-gradient(at 40% 20%, rgba(45, 90, 61, 0.06) 0px, transparent 50%), radial-gradient(at 80% 0%, rgba(196, 167, 125, 0.06) 0px, transparent 50%), radial-gradient(at 0% 50%, rgba(90, 122, 61, 0.04) 0px, transparent 50%);
}
:root {
  --gradient-persona-glow: radial-gradient(circle at 50% 50%, var(--persona-glow) 0%, transparent 60%);
}

/* Glow Effects */
:root {
  --glow-_philosophy: Glows should be felt, not seen. Subliminal warmth, not visible effects.;
  --glow-soft: 0 0 16px -8px;
  --glow-medium: 0 0 24px -12px;
  --glow-large: 0 0 40px -20px;
  --glow-persona-ring: none;
  --glow-connection: 0 0 16px 0 var(--color-semantic-success-glow);
  --glow-thinking: 0 0 12px 2px var(--color-accent-glow);
}

/* Chromatic Aberration Effects */
:root {
  --effect-chromatic-red: #ff0000;
  --effect-chromatic-red-tint: rgba(255, 0, 0, 0.2);
  --effect-chromatic-cyan: #00ffff;
  --effect-chromatic-cyan-tint: rgba(0, 255, 255, 0.2);
  --effect-chromatic-offset-subtle: 1px;
  --effect-chromatic-offset-normal: 2px;
  --effect-chromatic-offset-strong: 4px;
}

/* ========================================
   MAGICAL UTILITY CLASSES
   ======================================== */

/* Paper texture overlay - add to any element */
.texture-paper::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  opacity: 0.025;
  pointer-events: none;
  mix-blend-mode: overlay;
}

/* Aurora gradient background */
.aurora-bg {
  background: var(--gradient-aurora);
  background-size: 400% 400%;
  animation: aurora 15s ease-in-out infinite;
}

/* Mesh gradient background */
.mesh-bg {
  background: var(--gradient-mesh);
}

/* Organic blob shape - morphing border radius */
.blob {
  animation: morphBlob 8s ease-in-out infinite;
}

.blob-subtle {
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}

/* Floating/levitating effect */
.float {
  animation: float 6s ease-in-out infinite;
}

.levitate {
  animation: levitate 3s ease-in-out infinite;
}

/* Glow effects */
.glow {
  animation: glow 2s ease-in-out infinite;
}

.glow-persona {
  /* Removed: harsh glow effects break warm, grounded aesthetic */
  /* Use subtle borders or tints instead */
}

.glow-connection {
  box-shadow: var(--glow-connection);
  animation: connectionWarmth 1.5s ease forwards;
}

/* Living animations - makes elements feel alive */
.breathing {
  animation: softBreathe 5s ease-in-out infinite;
}

.heartbeat {
  animation: heartbeat 1.5s ease-in-out infinite;
}

.pulse-soft {
  animation: presencePulse 3s ease-in-out infinite;
}

/* Celebration/delight animations */
.celebrate {
  animation: celebrate 800ms ease-in-out forwards;
}

.wiggle {
  animation: wiggle 500ms ease-in-out;
}

.wave {
  animation: waveHand 2s ease-in-out;
  transform-origin: 70% 70%;
  display: inline-block;
}

/* Ripple effect container */
.ripple-container {
  position: relative;
  overflow: hidden;
}

.ripple {
  position: absolute;
  border-radius: 50%;
  background: var(--color-accent-glow);
  animation: ripple 600ms ease-out forwards;
  pointer-events: none;
}

/* Sparkle effect */
.sparkle {
  animation: sparkle 700ms ease-out forwards;
}

/* Staggered cascade animations for lists */
.cascade > * {
  opacity: 0;
  animation: slideUp 400ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.cascade > *:nth-child(1) { animation-delay: 0ms; }
.cascade > *:nth-child(2) { animation-delay: 50ms; }
.cascade > *:nth-child(3) { animation-delay: 100ms; }
.cascade > *:nth-child(4) { animation-delay: 150ms; }
.cascade > *:nth-child(5) { animation-delay: 200ms; }
.cascade > *:nth-child(6) { animation-delay: 250ms; }
.cascade > *:nth-child(7) { animation-delay: 300ms; }
.cascade > *:nth-child(8) { animation-delay: 350ms; }
.cascade > *:nth-child(9) { animation-delay: 400ms; }
.cascade > *:nth-child(10) { animation-delay: 450ms; }

.cascade-slow > * {
  opacity: 0;
  animation: slideUp 500ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.cascade-slow > *:nth-child(1) { animation-delay: 0ms; }
.cascade-slow > *:nth-child(2) { animation-delay: 100ms; }
.cascade-slow > *:nth-child(3) { animation-delay: 200ms; }
.cascade-slow > *:nth-child(4) { animation-delay: 300ms; }
.cascade-slow > *:nth-child(5) { animation-delay: 400ms; }

/* Magnetic hover effect */
.magnetic {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform: translate(calc(var(--magnetic-x, 0) * 1px), calc(var(--magnetic-y, 0) * 1px));
}

/* Text reveal animation */
.text-reveal {
  animation: textReveal 800ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.typewriter {
  overflow: hidden;
  white-space: nowrap;
  animation: typewriter 2s steps(40) forwards;
  border-right: 2px solid var(--color-accent-primary);
}

.typewriter.blink {
  animation: typewriter 2s steps(40) forwards, blinkCursor 1s step-end infinite;
}

/* Glass morphism */
.glass {
  background: var(--color-background-glass);
  backdrop-filter: blur(var(--blur-glass));
  -webkit-backdrop-filter: blur(var(--blur-glass));
  border: 1px solid var(--color-border-subtle);
}

.glass-strong {
  background: var(--color-background-overlay);
  backdrop-filter: blur(var(--blur-lg));
  -webkit-backdrop-filter: blur(var(--blur-lg));
}

/* Advanced Glass Layers */
.glass-layer-1 {
  background: var(--glass-surface-1);
  backdrop-filter: blur(var(--glass-blur-subtle));
  -webkit-backdrop-filter: blur(var(--glass-blur-subtle));
  border: var(--glass-border-subtle);
  box-shadow: var(--glass-inner-glow);
}

.glass-layer-2 {
  background: var(--glass-surface-2);
  backdrop-filter: blur(var(--glass-blur-medium));
  -webkit-backdrop-filter: blur(var(--glass-blur-medium));
  border: var(--glass-border-light);
  box-shadow: var(--glass-inner-glow);
}

.glass-layer-3 {
  background: var(--glass-surface-3);
  backdrop-filter: blur(var(--glass-blur-strong));
  -webkit-backdrop-filter: blur(var(--glass-blur-strong));
  border: var(--glass-border-medium);
  box-shadow: var(--glass-inner-glow);
}

/* ========================================
   LIQUID GLASS - iOS 26 Inspired
   Apple's new translucent, vibrant design
   ======================================== */

/* Liquid Glass Base - Use on modals, cards, overlays */
.glass-liquid {
  position: relative;
  background: var(--glass-surface-2);
  backdrop-filter: blur(var(--glass-blur-medium)) var(--glass-vibrancy-medium);
  -webkit-backdrop-filter: blur(var(--glass-blur-medium)) var(--glass-vibrancy-medium);
  border: var(--glass-border-light);
  box-shadow: var(--glass-inner-glow);
  overflow: hidden;
  transition: 
    backdrop-filter 300ms var(--ease-gentle),
    transform 300ms var(--ease-spring),
    box-shadow 300ms var(--ease-gentle);
}

/* Specular highlight layer (pseudo-element) */
.glass-liquid::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--glass-specular-gradient);
  background-size: var(--glass-specular-size);
  background-position: var(--glass-specular-position);
  opacity: 0.6;
  pointer-events: none;
  transition: opacity 300ms var(--ease-gentle);
}

/* Noise texture layer */
.glass-liquid::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--glass-noise-texture);
  background-size: 128px 128px;
  opacity: var(--glass-noise-opacity-subtle);
  mix-blend-mode: var(--glass-noise-blend);
  pointer-events: none;
}

/* Hover: Deeper blur, brighter specular */
.glass-liquid:hover {
  backdrop-filter: blur(calc(var(--glass-blur-medium) + var(--glass-hover-blur-increase))) var(--glass-vibrancy-high);
  -webkit-backdrop-filter: blur(calc(var(--glass-blur-medium) + var(--glass-hover-blur-increase))) var(--glass-vibrancy-high);
}

.glass-liquid:hover::before {
  opacity: 0.8;
}

/* Active: Slight press */
.glass-liquid:active {
  transform: scale(var(--glass-active-scale));
}

/* Focus: Persona-colored ring */
.glass-liquid:focus-visible {
  outline: none;
  box-shadow: var(--glass-inner-glow), var(--glass-focus-ring);
}

/* Liquid Glass - Light variant */
.glass-liquid-light {
  background: var(--glass-surface-1);
  backdrop-filter: blur(var(--glass-blur-subtle)) var(--glass-vibrancy-subtle);
  -webkit-backdrop-filter: blur(var(--glass-blur-subtle)) var(--glass-vibrancy-subtle);
}

/* Liquid Glass - Heavy variant */
.glass-liquid-heavy {
  background: var(--glass-surface-3);
  backdrop-filter: blur(var(--glass-blur-intense)) var(--glass-vibrancy-ultra);
  -webkit-backdrop-filter: blur(var(--glass-blur-intense)) var(--glass-vibrancy-ultra);
}

/* Liquid Glass with Tilt Effect (3D) */
.glass-liquid-tilt {
  transform-style: preserve-3d;
  perspective: var(--glass-tilt-perspective);
  transition: var(--glass-tilt-transition);
}

.glass-liquid-tilt:hover {
  /* JS should set --tilt-x and --tilt-y based on cursor position */
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
}

/* Liquid Glass with Shimmer Animation */
.glass-liquid-shimmer::before {
  background: var(--glass-shimmer-gradient);
  background-size: 200% 100%;
  animation: var(--glass-shimmer-animation);
}

@keyframes specularShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Liquid Glass with Fresnel Edge Effect */
.glass-liquid-fresnel::before {
  background: var(--glass-fresnel-light);
}

[data-theme="midnight"] .glass-liquid-fresnel::before {
  background: var(--glass-fresnel-dark);
}

/* Liquid Glass with Chromatic Aberration */
.glass-liquid-chromatic {
  position: relative;
}

.glass-liquid-chromatic::before {
  box-shadow: 
    calc(var(--glass-chromatic-offset) * -1) 0 0 var(--glass-chromatic-red),
    var(--glass-chromatic-offset) 0 0 var(--glass-chromatic-blue);
}

/* Liquid Glass Ripple Effect */
.glass-liquid-ripple {
  overflow: hidden;
}

.glass-liquid-ripple .ripple {
  position: absolute;
  border-radius: 50%;
  background: var(--glass-ripple-color);
  transform: scale(0);
  animation: glassRipple var(--glass-ripple-duration) var(--glass-ripple-easing) forwards;
  pointer-events: none;
}

@keyframes glassRipple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* Reduced Motion: Disable animations */
@media (prefers-reduced-motion: reduce) {
  .glass-liquid,
  .glass-liquid::before,
  .glass-liquid::after {
    transition: none;
    animation: none;
  }
  
  .glass-liquid-tilt:hover {
    transform: none;
  }
  
  .glass-liquid-shimmer::before {
    animation: none;
  }
  
  .glass-liquid-ripple .ripple {
    animation: none;
    display: none;
  }
}

/* ========================================
   ANTICIPATION HOVER STATES
   Pixar's "wind-up before the pitch"
   ======================================== */

/* Button with anticipation */
.btn-anticipate {
  transition: transform 200ms var(--ease-gentle);
}

.btn-anticipate:hover {
  transform: scale(0.98) translateY(1px);
  transition: transform 80ms cubic-bezier(0.38, -0.4, 0.88, 0.65);
}

.btn-anticipate:hover:active {
  transform: scale(0.95) translateY(2px);
  transition: transform 50ms ease-in;
}

.btn-anticipate:not(:hover) {
  transform: scale(1) translateY(0);
  transition: transform 200ms var(--ease-gentle);
}

/* Card with lift anticipation */
.card-anticipate {
  transition: all 200ms var(--ease-gentle);
}

.card-anticipate:hover {
  transform: scale(1.01) translateY(-4px);
  box-shadow: var(--shadow-lg);
  transition: all 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Icon with spring anticipation */
.icon-anticipate {
  transition: transform 150ms var(--ease-gentle);
}

.icon-anticipate:hover {
  transform: rotate(3deg) scale(1.1);
  transition: transform 150ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Focus ring with anticipation */
.focus-anticipate:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-focus-ring);
  transition: box-shadow 150ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ========================================
   WABI-SABI ORGANIC TEXTURES
   侘寂 - Beauty in imperfection
   ======================================== */

/* Subtle noise overlay for breaking digital perfection */
.texture-noise::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  opacity: 0.03;
  pointer-events: none;
  mix-blend-mode: overlay;
}

[data-theme="zen"] .texture-noise::before {
  opacity: 0.02;
}

/* Imperfect border radius - organic shapes */
.radius-organic-sm {
  border-radius: 8px 7px 9px 8px / 7px 8px 8px 9px;
}

.radius-organic-md {
  border-radius: 16px 14px 18px 15px / 14px 16px 15px 17px;
}

.radius-organic-lg {
  border-radius: 24px 22px 26px 23px / 22px 25px 23px 24px;
}

/* Ink bleed text effect - soft edges like brush strokes */
.text-ink {
  filter: blur(0.3px);
  text-shadow: 0 0 0.5px currentColor;
}

/* Breathing gradient background */
@keyframes breathingGradient {
  0% { background-position: 0% 50%; opacity: 1; }
  25% { background-position: 50% 0%; opacity: 0.98; }
  50% { background-position: 100% 50%; opacity: 0.96; }
  75% { background-position: 50% 100%; opacity: 0.98; }
  100% { background-position: 0% 50%; opacity: 1; }
}

.gradient-breathing {
  background-size: 200% 200%;
  animation: breathingGradient 20s ease-in-out infinite;
}

/* ========================================
   MA (間) SPACING UTILITIES
   Japanese intentional negative space
   ======================================== */

/* MA padding */
.p-ma-breath { padding: var(--ma-breath); }
.p-ma-pause { padding: var(--ma-pause); }
.p-ma-rest { padding: var(--ma-rest); }
.p-ma-silence { padding: var(--ma-silence); }
.p-ma-meditation { padding: var(--ma-meditation); }
.p-ma-contemplation { padding: var(--ma-contemplation); }
.p-ma-vastness { padding: var(--ma-vastness); }

/* MA margin */
.m-ma-breath { margin: var(--ma-breath); }
.m-ma-pause { margin: var(--ma-pause); }
.m-ma-rest { margin: var(--ma-rest); }
.m-ma-silence { margin: var(--ma-silence); }
.m-ma-meditation { margin: var(--ma-meditation); }
.m-ma-contemplation { margin: var(--ma-contemplation); }
.m-ma-vastness { margin: var(--ma-vastness); }

/* MA gap */
.gap-ma-breath { gap: var(--ma-breath); }
.gap-ma-pause { gap: var(--ma-pause); }
.gap-ma-rest { gap: var(--ma-rest); }
.gap-ma-silence { gap: var(--ma-silence); }
.gap-ma-meditation { gap: var(--ma-meditation); }

/* Golden ratio spacing */
.gap-phi-sm { gap: var(--phi-sm); }
.gap-phi-md { gap: var(--phi-md); }
.gap-phi-lg { gap: var(--phi-lg); }
.gap-phi-xl { gap: var(--phi-xl); }

/* Gradient text */
.gradient-text {
  background: var(--gradient-aurora);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientShift 8s ease infinite;
}

/* Depth/parallax layers */
.depth-bg { z-index: 0; }
.depth-mid { z-index: 10; }
.depth-fg { z-index: 20; }
.depth-overlay { z-index: 30; }

[data-parallax] {
  will-change: transform;
}

/* Warm vignette overlay */
.vignette::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 50%, var(--color-background-primary) 150%);
  pointer-events: none;
  opacity: 0.4;
}

/* ========================================
   PIXAR AVATAR ANIMATIONS
   Squash & stretch, anticipation, follow-through
   ======================================== */

/* Avatar reaction classes - apply to .avatar-container */
.animate-avatar-nod {
  animation: avatarNod 500ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.animate-avatar-shake {
  animation: avatarShake 500ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.animate-avatar-bounce {
  animation: avatarBounce 600ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.animate-avatar-pulse {
  animation: avatarPulse 700ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.animate-avatar-curious {
  animation: avatarCuriousTilt 800ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.animate-avatar-attentive {
  animation: avatarAttentiveLean 500ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Pixar-style Luxo Jr. bounce - for thinking dots */
.animate-pixar-bounce {
  animation: pixarBounce 1.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite;
}

/* Pixar-style breathing - living presence */
.animate-pixar-breathe {
  animation: pixarBreathe 5s ease-in-out infinite;
}

/* Pixar-style floating - like balloons in Up */
.animate-pixar-float {
  animation: pixarFloat 6s ease-in-out infinite;
}

/* Pixar-style joy bounce */
.animate-pixar-joy {
  animation: pixarJoyBounce 600ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ========================================
   ANTICIPATION EFFECTS - "Wind-up Before the Pitch"
   Apply on hover/focus for alive-feeling interactions
   ======================================== */

/* Button anticipation - squash on hover */
.anticipate-btn {
  transition: transform 80ms cubic-bezier(0.38, -0.4, 0.88, 0.65);
}
.anticipate-btn:hover {
  transform: scale(0.98) translateY(1px);
}
.anticipate-btn:active {
  transform: scale(0.95) translateY(2px);
  transition: transform 50ms ease-in;
}

/* Card anticipation - lift on hover */
.anticipate-card {
  transition: all 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.anticipate-card:hover {
  transform: scale(1.01) translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.anticipate-card:active {
  transform: scale(0.98) translateY(1px);
  transition: transform 80ms ease-in;
}

/* Icon anticipation - rotate spring */
.anticipate-icon {
  transition: transform 150ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.anticipate-icon:hover {
  transform: rotate(3deg) scale(1.1);
}

/* Focus ring with anticipation pulse */
.anticipate-focus:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-accent-primary);
  animation: focusAnticipate 150ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes focusAnticipate {
  0% { box-shadow: 0 0 0 0px var(--color-accent-primary); }
  50% { box-shadow: 0 0 0 4px var(--color-accent-primary); }
  100% { box-shadow: 0 0 0 3px var(--color-accent-primary); }
}

/* Page enter with anticipation */
.anticipate-enter {
  animation: anticipateEnter 280ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes anticipateEnter {
  0% { opacity: 0; transform: scale(0.96) translateY(8px); }
  30% { opacity: 0.3; transform: scale(0.98) translateY(4px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* Page exit with anticipation */
.anticipate-exit {
  animation: anticipateExit 210ms ease-out forwards;
}

@keyframes anticipateExit {
  0% { opacity: 1; transform: scale(1); }
  30% { opacity: 0.8; transform: scale(1.02); }
  100% { opacity: 0; transform: scale(0.95); }
}

/* ========================================
   VOICE EMOTION GLOW - Avatar responds to speaking tone
   ======================================== */

/* Base voice glow setup - uses Ferni sage green (brand compliant) */
.voice-glow {
  --glow-color: var(--persona-glow, rgba(74, 103, 65, 0.5));
  --glow-color-alt: rgba(74, 103, 65, 0.4);
  --glow-intensity: 0.6;
  --glow-spread: 20px;
  --glow-pulse-speed: 3s;
  transition: var(--glow-transition, all 800ms cubic-bezier(0.4, 0, 0.2, 1));
}

/* Glow pulse animation when speaking */
@keyframes voiceGlowPulse {
  0% { box-shadow: 0 0 var(--glow-spread) var(--glow-color); }
  50% { box-shadow: 0 0 calc(var(--glow-spread) * 1.4) var(--glow-color-alt); }
  100% { box-shadow: 0 0 var(--glow-spread) var(--glow-color); }
}

/* Gentle breathing glow when idle/listening */
@keyframes voiceGlowBreath {
  0% { box-shadow: 0 0 var(--glow-spread) var(--glow-color); }
  50% { box-shadow: 0 0 calc(var(--glow-spread) * 1.15) var(--glow-color); }
  100% { box-shadow: 0 0 var(--glow-spread) var(--glow-color); }
}

/* Quick reaction flash */
@keyframes voiceGlowReact {
  0% { box-shadow: 0 0 var(--glow-spread) var(--glow-color); }
  30% { box-shadow: 0 0 calc(var(--glow-spread) * 1.8) var(--glow-color-alt); }
  100% { box-shadow: 0 0 var(--glow-spread) var(--glow-color); }
}

/* Speaking state - pulsing glow */
.voice-glow.speaking {
  animation: voiceGlowPulse var(--glow-pulse-speed) ease-in-out infinite;
}

/* Listening state - gentle breathing */
.voice-glow.listening {
  animation: voiceGlowBreath 4s ease-in-out infinite;
}

/* Idle state - static glow */
.voice-glow.idle {
  box-shadow: 0 0 calc(var(--glow-spread) * 0.7) var(--glow-color);
  animation: none;
}

/* Emotion-specific glow colors - Ferni earthy palette */
.voice-glow[data-emotion="neutral"] {
  --glow-color: var(--persona-glow, rgba(74, 103, 65, 0.5));
  --glow-color-alt: rgba(74, 103, 65, 0.4);
}

.voice-glow[data-emotion="happy"] {
  --glow-color: rgba(251, 191, 36, 0.6);
  --glow-color-alt: rgba(245, 158, 11, 0.5);
  --glow-pulse-speed: 2s;
}

.voice-glow[data-emotion="excited"] {
  --glow-color: rgba(236, 72, 153, 0.6);
  --glow-color-alt: rgba(219, 39, 119, 0.5);
  --glow-pulse-speed: 1.2s;
  --glow-spread: 35px;
}

.voice-glow[data-emotion="calm"] {
  --glow-color: rgba(34, 211, 238, 0.5);
  --glow-color-alt: rgba(6, 182, 212, 0.4);
  --glow-pulse-speed: 4s;
}

.voice-glow[data-emotion="thoughtful"] {
  --glow-color: rgba(58, 107, 115, 0.5);
  --glow-color-alt: rgba(45, 83, 89, 0.4);
  --glow-pulse-speed: 3.5s;
}

.voice-glow[data-emotion="empathetic"] {
  --glow-color: rgba(244, 114, 182, 0.5);
  --glow-color-alt: rgba(236, 72, 153, 0.4);
  --glow-pulse-speed: 2.5s;
  --glow-spread: 30px;
}

.voice-glow[data-emotion="serious"] {
  --glow-color: rgba(148, 163, 184, 0.5);
  --glow-color-alt: rgba(100, 116, 139, 0.4);
  --glow-pulse-speed: 4s;
  --glow-spread: 18px;
}

.voice-glow[data-emotion="anxious"] {
  --glow-color: rgba(251, 146, 60, 0.5);
  --glow-color-alt: rgba(249, 115, 22, 0.4);
  --glow-pulse-speed: 1.8s;
}

.voice-glow[data-emotion="encouraging"] {
  --glow-color: rgba(16, 185, 129, 0.6);
  --glow-color-alt: rgba(5, 150, 105, 0.5);
  --glow-pulse-speed: 2.2s;
  --glow-spread: 28px;
}

/* Intensity modifiers */
.voice-glow[data-intensity="whisper"] {
  --glow-intensity: 0.5;
  --glow-spread: calc(var(--glow-spread) * 0.6);
}

.voice-glow[data-intensity="emphasis"] {
  --glow-intensity: 0.9;
  --glow-spread: calc(var(--glow-spread) * 1.2);
}

.voice-glow[data-intensity="exclamation"] {
  --glow-intensity: 1;
  --glow-spread: calc(var(--glow-spread) * 1.5);
}

/* Transition between emotions */
.voice-glow.transitioning {
  transition: all 300ms ease-out;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .voice-glow.speaking,
  .voice-glow.listening {
    animation: none;
    box-shadow: 0 0 var(--glow-spread) var(--glow-color);
  }
}

/* Staggered avatar dots (for thinking indicator) */
.avatar-dots > *:nth-child(1) { animation-delay: 0s; }
.avatar-dots > *:nth-child(2) { animation-delay: 0.15s; }
.avatar-dots > *:nth-child(3) { animation-delay: 0.3s; }

/* Avatar container base styles for smooth animations */
.avatar-container-animated {
  will-change: transform;
  transform-origin: center center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ========================================
   ACCESSIBILITY - WCAG 2.1 Compliant
   ======================================== */

/* Reduced motion - CRITICAL for vestibular disorders */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .float, .levitate, .blob, .breathing { animation: none !important; }
}

@media (prefers-contrast: more) {
  :root { --color-border-subtle: var(--color-border-strong); }
}

:focus-visible {
  outline: 3px solid var(--color-focus-ring, var(--color-accent-primary));
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: absolute; top: -100%; left: 50%;
  transform: translateX(-50%);
  background: var(--color-background-elevated);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  z-index: var(--z-skip-link);
  transition: top 200ms ease;
}
.skip-link:focus { top: var(--spacing-md); }

/* SHIMMER SKELETON - Living Loading States */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton { background: var(--color-background-tertiary); border-radius: var(--radius-md); overflow: hidden; }
.skeleton-shimmer {
  background: linear-gradient(90deg, var(--color-background-tertiary) 0%, var(--color-background-elevated) 50%, var(--color-background-tertiary) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}
.skeleton-avatar { width: 80px; height: 80px; border-radius: 50%; }
.skeleton-text { height: 1em; margin-bottom: 0.5em; }
.skeleton-button { height: 40px; width: 120px; border-radius: var(--radius-lg); }
@media (prefers-reduced-motion: reduce) { .skeleton-shimmer { animation: none; } }

/* ENTRANCE ANIMATIONS - Elements "arrive" with personality */
@keyframes entranceAvatar {
  0% { opacity: 0; transform: scale(0.8) translateY(20px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes entranceControls {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes entranceTeamMember {
  0% { opacity: 0; transform: scale(0.9); }
  100% { opacity: 1; transform: scale(1); }
}
.entrance-avatar { animation: entranceAvatar 600ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards; animation-delay: 200ms; opacity: 0; }
.entrance-controls { animation: entranceControls 400ms cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-delay: 400ms; opacity: 0; }
.entrance-team > * { animation: entranceTeamMember 300ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards; opacity: 0; }
.entrance-team > *:nth-child(1) { animation-delay: 500ms; }
.entrance-team > *:nth-child(2) { animation-delay: 580ms; }
.entrance-team > *:nth-child(3) { animation-delay: 660ms; }
.entrance-team > *:nth-child(4) { animation-delay: 740ms; }
.entrance-team > *:nth-child(5) { animation-delay: 820ms; }
.entrance-team > *:nth-child(6) { animation-delay: 900ms; }
@media (prefers-reduced-motion: reduce) { .entrance-avatar, .entrance-controls, .entrance-team > * { animation: fadeIn 200ms ease forwards; transform: none; } }

/* ERROR RECOVERY - Errors feel fixable, not broken */
@keyframes errorShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
@keyframes errorPulse {
  0% { box-shadow: 0 0 0 0 var(--color-semantic-error-glow); }
  70% { box-shadow: 0 0 0 10px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.error-shake { animation: errorShake 400ms ease-out; }
.error-pulse { animation: errorPulse 1s ease-out; animation-iteration-count: 3; }
.error-glow { box-shadow: 0 0 0 3px var(--color-semantic-error-glow); }
.has-error { border-color: var(--color-semantic-error) !important; }
@media (prefers-reduced-motion: reduce) { .error-shake, .error-pulse { animation: none; } }

/* CONNECTION PROGRESS - Show steps, not just status */
.connection-progress { display: flex; align-items: center; gap: var(--spacing-xs); }
.connection-step { width: 8px; height: 8px; border-radius: 50%; background: var(--color-background-tertiary); transition: all 300ms ease; }
.connection-step.active { background: var(--color-accent-primary); transform: scale(1.2); }
.connection-step.completed { background: var(--color-semantic-success); }
.connection-bar { height: 3px; background: var(--color-background-tertiary); border-radius: var(--radius-full); overflow: hidden; }
.connection-bar-fill { height: 100%; background: var(--color-accent-primary); transition: width 300ms ease; }
.connection-bar-fill.complete { background: var(--color-semantic-success); }

/* ========================================
   LANDING PAGE - Immersive 3D Zen Experience
   Japanese zen aesthetic with shoji screen reveal
   ======================================== */

/* Scene container */
.landing-scene {
  position: fixed;
  inset: 0;
  z-index: 10000;
  overflow: hidden;
  background: #0a0a0a;
  cursor: pointer;
}

.landing-scene.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 800ms ease, visibility 800ms;
}

.landing-scene.revealed {
  cursor: default;
}

/* 3D Scene Container */
.landing-3d-scene {
  position: fixed;
  inset: 0;
  perspective: 1000px;
  perspective-origin: 50% 50%;
  overflow: hidden;
}

/* Atmospheric mist layers */
.landing-mist {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.landing-mist-1 {
  background: linear-gradient(180deg, rgba(245, 242, 235, 0.4) 0%, transparent 40%, transparent 70%, rgba(245, 242, 235, 0.3) 100%);
  transform: translateZ(-100px);
  animation: mistDrift1 30s ease-in-out infinite;
}

.landing-mist-2 {
  background: radial-gradient(ellipse 120% 60% at 20% 80%, rgba(245, 242, 235, 0.3) 0%, transparent 60%);
  transform: translateZ(-50px);
  animation: mistDrift2 25s ease-in-out infinite reverse;
}

@keyframes mistDrift1 {
  0%, 100% { opacity: 0.6; transform: translateZ(-100px) translateX(0); }
  50% { opacity: 0.8; transform: translateZ(-100px) translateX(3%); }
}

@keyframes mistDrift2 {
  0%, 100% { opacity: 0.5; transform: translateZ(-50px) translateX(0); }
  50% { opacity: 0.7; transform: translateZ(-50px) translateX(-2%); }
}

/* Shoji Screen Doors */
.landing-shoji-container {
  position: absolute;
  inset: 0;
  display: flex;
  pointer-events: none;
  z-index: 10;
}

.landing-shoji {
  flex: 1;
  background: linear-gradient(90deg, rgba(245, 240, 230, 0.97) 0%, rgba(250, 245, 235, 0.98) 50%, rgba(245, 240, 230, 0.97) 100%);
  backdrop-filter: blur(2px);
  box-shadow: inset 0 0 60px rgba(200, 180, 140, 0.15), 0 0 40px rgba(0, 0, 0, 0.2);
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.landing-shoji::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paper)'/%3E%3C/svg%3E");
  opacity: 0.04;
}

.landing-shoji::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(139, 90, 43, 0.2) 1px, transparent 1px), linear-gradient(rgba(139, 90, 43, 0.2) 1px, transparent 1px);
  background-size: 80px 100px;
  opacity: 0.4;
}

.landing-shoji-left { transform-origin: left center; }
.landing-shoji-right { transform-origin: right center; }

/* Floating content card */
.landing-content-card {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateZ(100px);
  width: 90%;
  max-width: 480px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 24px;
  padding: 48px 40px;
  text-align: center;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.2), 0 10px 30px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  opacity: 0;
  z-index: 20;
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.landing-content-card.visible {
  opacity: 1;
  transform: translate(-50%, -50%) translateZ(100px) scale(1);
}

/* Ensou (Zen circle) */
.landing-ensou {
  width: 80px;
  height: 80px;
  margin: 0 auto 32px;
  position: relative;
}

.landing-ensou-circle {
  width: 100%;
  height: 100%;
  border: 3px solid rgba(60, 60, 60, 0.15);
  border-radius: 50%;
  position: relative;
}

.landing-ensou-circle::before {
  content: '';
  position: absolute;
  top: -4px;
  right: 10%;
  width: 20%;
  height: 10px;
  background: rgba(255, 255, 255, 0.95);
}

.landing-ensou-wave {
  position: absolute;
  inset: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.landing-ensou-bar {
  width: 3px;
  background: linear-gradient(180deg, #4a5568 0%, #718096 100%);
  border-radius: 2px;
  animation: zenWave 2s ease-in-out infinite;
}

.landing-ensou-bar:nth-child(1) { height: 10px; animation-delay: 0ms; }
.landing-ensou-bar:nth-child(2) { height: 18px; animation-delay: 200ms; }
.landing-ensou-bar:nth-child(3) { height: 24px; animation-delay: 400ms; }
.landing-ensou-bar:nth-child(4) { height: 18px; animation-delay: 600ms; }
.landing-ensou-bar:nth-child(5) { height: 10px; animation-delay: 800ms; }

@keyframes zenWave {
  0%, 100% { transform: scaleY(1); opacity: 0.6; }
  50% { transform: scaleY(0.5); opacity: 1; }
}

/* Typography */
.landing-headline {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}

.landing-headline-accent {
  display: block;
  background: linear-gradient(135deg, #6b7280 0%, #374151 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.landing-subhead {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.55);
  line-height: 1.6;
  margin-bottom: 32px;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}

/* Form */
.landing-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.landing-input {
  width: 100%;
  height: 52px;
  padding: 0 20px;
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  color: #1a1a1a;
  font-family: var(--font-body);
  font-size: 15px;
  transition: all 200ms ease;
}

.landing-input:focus {
  outline: none;
  background: white;
  border-color: rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

.landing-input::placeholder {
  color: rgba(0, 0, 0, 0.35);
}

.landing-submit {
  width: 100%;
  height: 52px;
  background: linear-gradient(135deg, #374151 0%, #1f2937 100%);
  border: none;
  border-radius: 12px;
  color: white;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 200ms ease, box-shadow 200ms ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.landing-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.landing-submit:active {
  transform: scale(0.98);
}

.landing-skip {
  background: none;
  border: none;
  color: rgba(0, 0, 0, 0.4);
  font-size: 13px;
  cursor: pointer;
  padding: 8px;
  transition: color 200ms;
}

.landing-skip:hover {
  color: rgba(0, 0, 0, 0.6);
}

/* Feature pills */
.landing-features {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
  flex-wrap: wrap;
}

.landing-feature {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 100px;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.6);
  font-weight: 500;
}

.landing-feature svg {
  width: 14px;
  height: 14px;
  opacity: 0.7;
}

/* Success state */
.landing-success {
  display: none;
}

.landing-success.visible {
  display: block;
  animation: fadeInUp 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.landing-success-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  border-radius: 50%;
  color: white;
}

.landing-success-icon svg {
  width: 32px;
  height: 32px;
}

/* Tap hint */
.landing-tap-hint {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  opacity: 1;
  transition: opacity 400ms ease;
}

.landing-scene.revealed .landing-tap-hint {
  opacity: 0;
  pointer-events: none;
}

.landing-tap-hint-circle {
  width: 100px;
  height: 100px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: tapPulse 2s ease-in-out infinite;
}

.landing-tap-hint-circle svg {
  width: 40px;
  height: 40px;
  color: rgba(255, 255, 255, 0.8);
}

.landing-tap-hint-text {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

@keyframes tapPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.7; }
}

/* Mobile */
@media (max-width: 520px) {
  .landing-content-card {
    padding: 32px 24px;
    border-radius: 20px;
  }
  .landing-ensou {
    width: 60px;
    height: 60px;
    margin-bottom: 24px;
  }
  .landing-headline { font-size: 1.5rem; }
  .landing-features { gap: 6px; }
  .landing-feature { padding: 6px 12px; font-size: 11px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .landing-mist-1,
  .landing-mist-2,
  .landing-ensou-bar,
  .landing-tap-hint-circle {
    animation: none;
  }
  .landing-shoji {
    transition-duration: 0.01ms;
  }
}

/* ========================================
   TOAST SYSTEM - Sonner-inspired notifications
   Spring physics, stacking, swipe-to-dismiss
   ======================================== */

/* Container */
.toast-container {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 16px);
  right: calc(env(safe-area-inset-right, 0px) + 16px);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  max-width: min(360px, calc(100vw - 32px));
  contain: layout style;
}

@media (max-width: 480px) {
  .toast-container {
    top: calc(env(safe-area-inset-top, 0px) + 8px);
    left: 12px;
    right: 12px;
    align-items: stretch;
    max-width: none;
  }
}

/* Individual Toast */
.toast {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(22, 22, 26, 0.92);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25), 0 1px 4px rgba(0, 0, 0, 0.15), inset 0 0.5px 0 rgba(255, 255, 255, 0.08);
  pointer-events: auto;
  cursor: default;
  touch-action: pan-x;
  will-change: transform, opacity;
  contain: layout;
  animation: toastSlideIn 350ms cubic-bezier(0.32, 0.72, 0, 1) forwards;
  transform-origin: top right;
}

@keyframes toastSlideIn {
  0% { opacity: 0; transform: translateX(calc(100% + 20px)); }
  100% { opacity: 1; transform: translateX(0); }
}

@media (max-width: 480px) {
  .toast {
    transform-origin: top center;
    animation-name: toastSlideDown;
    padding: 10px 12px;
    border-radius: 10px;
  }
  @keyframes toastSlideDown {
    0% { opacity: 0; transform: translateY(-100%); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
  }
}

/* Toast exit */
.toast.toast-exiting {
  animation: toastSlideOut 250ms cubic-bezier(0.32, 0, 0.67, 0) forwards;
}

@keyframes toastSlideOut {
  0% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(calc(100% + 20px)); }
}

/* Swipe dismiss */
.toast.toast-swiping { transition: none; }
.toast.toast-swipe-out {
  animation: toastSwipeOut 180ms ease-out forwards;
}

@keyframes toastSwipeOut {
  to { opacity: 0; transform: translateX(120%); }
}

/* Stacking */
.toast:nth-child(2) { opacity: 0.85; transform: scale(0.97); }
.toast:nth-child(3) { opacity: 0.7; transform: scale(0.94); }
.toast:nth-child(n+4) { opacity: 0; transform: scale(0.9); pointer-events: none; }

/* Expand stack on hover */
.toast-container:hover .toast,
.toast-container:focus-within .toast {
  opacity: 1;
  transform: scale(1);
  transition: all 200ms cubic-bezier(0.32, 0.72, 0, 1);
}

/* Pause timer on hover */
.toast:hover .toast-progress,
.toast:focus-within .toast-progress {
  animation-play-state: paused;
}

/* Toast Icon */
.toast-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.toast-icon svg { width: 12px; height: 12px; }

/* Toast Content */
.toast-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.toast-title {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.35;
  letter-spacing: -0.008em;
}

.toast-description {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.4;
}

/* Toast Close Button */
.toast-close {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-left: 4px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.6;
  transition: all 120ms ease;
}

.toast:hover .toast-close { opacity: 1; }
.toast-close:hover { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.8); }
.toast-close:active { transform: scale(0.92); }
.toast-close svg { width: 12px; height: 12px; }

/* Toast Progress Bar */
.toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 0 0 12px 12px;
  overflow: hidden;
}

.toast-progress-bar {
  height: 100%;
  background: currentColor;
  opacity: 0.4;
  transform-origin: right;
  animation: toastProgress var(--toast-duration, 5000ms) linear forwards;
}

@keyframes toastProgress {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

/* Toast Types */
.toast-info .toast-icon { color: rgba(255, 255, 255, 0.6); }
.toast-info .toast-progress-bar { background: rgba(255, 255, 255, 0.5); }

.toast-success .toast-icon { color: #34d399; }
.toast-success .toast-progress-bar { background: #34d399; }

.toast-error {
  background: rgba(35, 20, 22, 0.94);
  border-color: rgba(239, 68, 68, 0.12);
}
.toast-error .toast-icon { color: #ef4444; }
.toast-error .toast-progress-bar { background: #ef4444; }

.toast-warning .toast-icon { color: #f59e0b; }
.toast-warning .toast-progress-bar { background: #f59e0b; }

.toast-loading .toast-icon {
  color: rgba(255, 255, 255, 0.5);
  animation: iconSpin 1s linear infinite;
}

@keyframes iconSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Toast Action Button */
.toast-action {
  margin-left: 8px;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.08);
  border: none;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 100ms ease;
  flex-shrink: 0;
}

.toast-action:hover { background: rgba(255, 255, 255, 0.14); }
.toast-action:active { background: rgba(255, 255, 255, 0.1); }

/* Zen Theme */
[data-theme="zen"] .toast {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.06);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
[data-theme="zen"] .toast-title { color: rgba(0, 0, 0, 0.9); }
[data-theme="zen"] .toast-description { color: rgba(0, 0, 0, 0.55); }
[data-theme="zen"] .toast-close { color: rgba(0, 0, 0, 0.35); }
[data-theme="zen"] .toast-close:hover { background: rgba(0, 0, 0, 0.06); color: rgba(0, 0, 0, 0.7); }
[data-theme="zen"] .toast-progress { background: rgba(0, 0, 0, 0.06); }
[data-theme="zen"] .toast-error {
  background: rgba(254, 242, 242, 0.98);
  border-color: rgba(248, 113, 113, 0.15);
}
[data-theme="zen"] .toast-action {
  background: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.75);
}
[data-theme="zen"] .toast-action:hover { background: rgba(0, 0, 0, 0.08); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .toast { animation: toastEnterReduced 200ms ease-out forwards; }
  @keyframes toastEnterReduced { from { opacity: 0; } to { opacity: 1; } }
  .toast.toast-exiting { animation: toastExitReduced 150ms ease-out forwards; }
  @keyframes toastExitReduced { from { opacity: 1; } to { opacity: 0; } }
  .toast-progress-bar { animation: none; transform: scaleX(0); }
  .toast-loading .toast-icon { animation: none; }
  .toast-container:hover .toast { transition: none; }
}


/* ========================================
   MOTION TOKENS (FERNI ALIVE)
   Breathing, blinking, gaze, speaking animations
   ======================================== */
:root {
  /* Motion Easings - from ferni-alive.html */
  --motion-ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
  --motion-ease-accelerate: cubic-bezier(0.4, 0.0, 1, 1);
  --motion-ease-decelerate: cubic-bezier(0.0, 0.0, 0.2, 1);
  --motion-ease-sharp: cubic-bezier(0.4, 0.0, 0.6, 1);
  --motion-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --motion-ease-spring-heavy: cubic-bezier(0.34, 1.8, 0.64, 1);
  --motion-ease-spring-gentle: cubic-bezier(0.34, 1.2, 0.64, 1);
  --motion-ease-expo-out: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-ease-gentle: cubic-bezier(0.4, 0, 0.2, 1);
  --motion-ease-organic: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --motion-ease-anticipate: cubic-bezier(0.38, -0.4, 0.88, 0.65);
  --motion-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --motion-ease-elastic: cubic-bezier(0.5, 1.8, 0.5, 0.8);

  /* Motion Durations */
  --motion-duration-instant: 40ms;
  --motion-duration-micro: 80ms;
  --motion-duration-quick: 100ms;
  --motion-duration-fast: 150ms;
  --motion-duration-normal: 250ms;
  --motion-duration-slow: 400ms;
  --motion-duration-moderate: 450ms;
  --motion-duration-deliberate: 600ms;
  --motion-duration-dramatic: 800ms;
  --motion-duration-celebration: 1000ms;
  --motion-duration-glacial: 1500ms;

  /* Breath Cycles */
  --breath-idle-duration: 4000ms;
  --breath-idle-scale-y: 1.018;
  --breath-idle-scale-x: 0.994;
  --breath-calm-duration: 5000ms;
  --breath-calm-scale-y: 1.02;
  --breath-calm-scale-x: 0.99;
  --breath-excited-duration: 2500ms;
  --breath-excited-scale-y: 1.025;
  --breath-excited-scale-x: 0.985;
  --breath-speaking-duration: 1800ms;
  --breath-speaking-scale-y: 1.03;
  --breath-speaking-scale-x: 0.98;
  --breath-ring-delay: 300ms;

  /* Blink Timing */
  --blink-duration: 150ms;
  --blink-interval-min: 3000ms;
  --blink-interval-max: 7000ms;
  --blink-lid-transition: 350ms;

  /* Gaze Drift */
  --gaze-drift-cycle: 8000ms;
  --gaze-eyes-transition: 800ms;

  /* Speaking Animation */
  --speak-pulse-duration: 450ms;
  --speak-sparkle-rotate: 600ms;

  /* Glow Properties */
  --glow-idle-blur: 20px;
  --glow-idle-spread: 8px;
  --glow-idle-opacity: 0.4;
  --glow-idle-pulse: 4000ms;
  --glow-active-blur: 30px;
  --glow-active-spread: 12px;
  --glow-active-opacity: 0.6;
  --glow-active-pulse: 2000ms;
  --glow-excited-blur: 40px;
  --glow-excited-spread: 16px;
  --glow-excited-opacity: 0.8;
  --glow-excited-pulse: 1500ms;
  --glow-calm-blur: 25px;
  --glow-calm-spread: 10px;
  --glow-calm-opacity: 0.35;
  --glow-calm-pulse: 5000ms;
  --glow-concern-blur: 22px;
  --glow-concern-spread: 8px;
  --glow-concern-opacity: 0.5;
  --glow-concern-pulse: 3000ms;

  /* Micro-Expression Durations */
  --micro-recognition: 80ms;
  --micro-concern-flash: 60ms;
  --micro-delight-flash: 100ms;
  --micro-warmth-pulse: 120ms;
  --micro-interest-flash: 70ms;
}

/* Persona Timing Modifiers */
[data-persona="ferni"] {
  --persona-timing-multiplier: 1;
  --persona-easing-preference: var(--motion-ease-gentle);
}
[data-persona="jack"] {
  --persona-timing-multiplier: 1.2;
  --persona-easing-preference: var(--motion-ease-gentle);
}
[data-persona="peter"] {
  --persona-timing-multiplier: 0.85;
  --persona-easing-preference: var(--motion-ease-spring);
}
[data-persona="alex"] {
  --persona-timing-multiplier: 1;
  --persona-easing-preference: var(--motion-ease-standard);
}
[data-persona="maya"] {
  --persona-timing-multiplier: 0.95;
  --persona-easing-preference: var(--motion-ease-standard);
}
[data-persona="jordan"] {
  --persona-timing-multiplier: 0.8;
  --persona-easing-preference: var(--motion-ease-spring);
}
[data-persona="nayan"] {
  --persona-timing-multiplier: 1.1;
  --persona-easing-preference: var(--motion-ease-gentle);
}

/* Animation Layer Priorities (for JS orchestration) */
:root {
  --layer-breathing-priority: 1;
  --layer-breathing-cycle: 4000ms;
  --layer-blinking-priority: 2;
  --layer-gaze-drift-priority: 3;
  --layer-gaze-drift-cycle: 8000ms;
  --layer-anticipation-priority: 4;
  --layer-expression-priority: 5;
  --layer-speaking-priority: 6;
}

/* ========================================
   GLOW COLORS (EMOTIONAL STATES)
   Avatar emotional glow colors
   ======================================== */
:root {
  /* Emotional Glow Colors */
  --glow-color-neutral: #f5f5f5;
  --glow-color-joy: #ffd700;
  --glow-color-concern: #daa520;
  --glow-color-excitement: #ff6b6b;
  --glow-color-calm: #87ceeb;
  --glow-color-empathy: #ffb6c1;
  --glow-color-focus: #4fc3f7;
  --glow-color-celebration: #ffc107;
  --glow-color-wisdom: #b8956a;
  --glow-color-love: #ff69b4;
  --glow-color-protective: #deb887;

  /* Glow Intensity Levels */
  --glow-intensity-subtle-opacity: 0.3;
  --glow-intensity-subtle-blur: 15px;
  --glow-intensity-subtle-spread: 5px;
  --glow-intensity-normal-opacity: 0.5;
  --glow-intensity-normal-blur: 25px;
  --glow-intensity-normal-spread: 10px;
  --glow-intensity-strong-opacity: 0.7;
  --glow-intensity-strong-blur: 35px;
  --glow-intensity-strong-spread: 15px;
  --glow-intensity-intense-opacity: 0.9;
  --glow-intensity-intense-blur: 45px;
  --glow-intensity-intense-spread: 20px;
}

/* Emotional Glow Gradient Classes */
.glow-gradient-joyful-celebration {
  --glow-gradient: linear-gradient(135deg, #ffd700, #ffc107);
  box-shadow: 0 0 30px #ffd70040, 0 0 60px #ffc10730;
}
.glow-gradient-calm-focus {
  --glow-gradient: linear-gradient(135deg, #87ceeb, #4fc3f7);
  box-shadow: 0 0 30px #87ceeb40, 0 0 60px #4fc3f730;
}
.glow-gradient-warm-empathy {
  --glow-gradient: linear-gradient(135deg, #ffb6c1, #deb887);
  box-shadow: 0 0 30px #ffb6c140, 0 0 60px #deb88730;
}
.glow-gradient-excited-joy {
  --glow-gradient: linear-gradient(135deg, #ff6b6b, #ffd700);
  box-shadow: 0 0 30px #ff6b6b40, 0 0 60px #ffd70030;
}
.glow-gradient-wisdom-calm {
  --glow-gradient: linear-gradient(135deg, #b8956a, #87ceeb);
  box-shadow: 0 0 30px #b8956a40, 0 0 60px #87ceeb30;
}

/* Persona Glow Modifiers */
[data-persona="ferni"] {
  --persona-glow-hue-shift: 0deg;
  --persona-glow-saturation: 1;
}
[data-persona="maya"] {
  --persona-glow-hue-shift: -10deg;
  --persona-glow-saturation: 0.95;
}
[data-persona="peter"] {
  --persona-glow-hue-shift: 15deg;
  --persona-glow-saturation: 1.1;
}
[data-persona="jordan"] {
  --persona-glow-hue-shift: 5deg;
  --persona-glow-saturation: 1.15;
}
[data-persona="alex"] {
  --persona-glow-hue-shift: -5deg;
  --persona-glow-saturation: 0.9;
}
[data-persona="nayan"] {
  --persona-glow-hue-shift: 10deg;
  --persona-glow-saturation: 0.85;
}

/* ========================================
   WINDOW AVATAR
   Scale variants, expressions, phonemes
   ======================================== */
:root {
  /* Window Avatar - Default values */
  --window-avatar-lid-top-cutoff: 0.12;
  --window-avatar-lid-top-curve: 0;
  --window-avatar-lid-bottom-cutoff: 0.12;
  --window-avatar-lid-bottom-curve: 0;
  --window-avatar-speak-min-cutoff: 0.1;
  --window-avatar-speak-max-cutoff: 0.35;
  --window-avatar-speak-volume-scale: 0.25;

  /* Window Avatar - Animation Timing */
  --window-avatar-mouth-idle: 200ms;
  --window-avatar-mouth-speaking: 60ms;
  --window-avatar-mouth-transition: 300ms;
  --window-avatar-mouth-attack: 0.25;
  --window-avatar-mouth-release: 0.12;
  --window-avatar-brow-raise: 250ms;
  --window-avatar-brow-lower: 400ms;
  --window-avatar-brow-transition: 350ms;
  --window-avatar-expression-transition: 300ms;
  --window-avatar-micro-expression: 80ms;

  /* Window Avatar - Shape Parameters */
  --window-avatar-curve-tension: 0.3;
  --window-avatar-curve-smooth: 0.5;
  --window-avatar-curve-sharp: 0.15;
}

/* Window Avatar - Scale Variants */
/* Based on window-avatar.json scale definitions */

.window-avatar--tiny,
.ferni-avatar--tiny {
  --window-avatar-size: 28px;
  --window-avatar-lid-visible: 0;
  --window-avatar-lid-scale: 0;
}
.window-avatar--tiny .lid,
.ferni-avatar--tiny .lid,
.window-avatar--tiny .lid-top,
.ferni-avatar--tiny .lid-top,
.window-avatar--tiny .lid-bottom,
.ferni-avatar--tiny .lid-bottom {
  display: none; /* Eyes only at tiny size */
}

.window-avatar--small,
.ferni-avatar--small {
  --window-avatar-size: 52px;
  --window-avatar-lid-scale: 0.8;
  --window-avatar-lid-visible: 1;
}
.window-avatar--small .lid-shape,
.ferni-avatar--small .lid-shape {
  /* Reduced lid expression at small size */
  transform: scaleY(0.8);
}

.window-avatar--medium,
.ferni-avatar--medium,
.ferni-avatar { /* Default size */
  --window-avatar-size: 100px;
  --window-avatar-lid-scale: 1;
  --window-avatar-lid-visible: 1;
}

.window-avatar--large,
.ferni-avatar--large {
  --window-avatar-size: 200px;
  --window-avatar-lid-scale: 1.2;
  --window-avatar-lid-visible: 1;
}
.window-avatar--large .lid-shape,
.ferni-avatar--large .lid-shape {
  /* Enhanced expression at large size */
  transform: scaleY(1.2);
}

/* Window Avatar - Expression Classes */
/* Apply via data-expression attribute or class */

.ferni-avatar[data-expression="neutral"],
.window-avatar[data-expression="neutral"],
.ferni-avatar--neutral {
  --window-avatar-lid-top-cutoff: 0.12;
  --window-avatar-lid-top-curve: 0;
  --window-avatar-lid-top-asymmetry: 0;
  --window-avatar-lid-bottom-cutoff: 0.12;
  --window-avatar-lid-bottom-curve: 0;
  --window-avatar-lid-bottom-asymmetry: 0;
}

.ferni-avatar[data-expression="surprised"],
.window-avatar[data-expression="surprised"],
.ferni-avatar--surprised {
  --window-avatar-lid-top-cutoff: 0.06;
  --window-avatar-lid-top-curve: 0.1;
  --window-avatar-lid-top-asymmetry: 0;
  --window-avatar-lid-bottom-cutoff: 0.18;
  --window-avatar-lid-bottom-curve: 0;
  --window-avatar-lid-bottom-asymmetry: 0;
}

.ferni-avatar[data-expression="sleepy"],
.window-avatar[data-expression="sleepy"],
.ferni-avatar--sleepy {
  --window-avatar-lid-top-cutoff: 0.22;
  --window-avatar-lid-top-curve: -0.15;
  --window-avatar-lid-top-asymmetry: 0;
  --window-avatar-lid-bottom-cutoff: 0.12;
  --window-avatar-lid-bottom-curve: 0;
  --window-avatar-lid-bottom-asymmetry: 0;
}

.ferni-avatar[data-expression="thinking"],
.window-avatar[data-expression="thinking"],
.ferni-avatar--thinking {
  --window-avatar-lid-top-cutoff: 0.14;
  --window-avatar-lid-top-curve: 0;
  --window-avatar-lid-top-asymmetry: 0;
  --window-avatar-lid-bottom-cutoff: 0.11;
  --window-avatar-lid-bottom-curve: 0.05;
  --window-avatar-lid-bottom-asymmetry: 0.08;
}

.ferni-avatar[data-expression="curious"],
.window-avatar[data-expression="curious"],
.ferni-avatar--curious {
  --window-avatar-lid-top-cutoff: 0.1;
  --window-avatar-lid-top-curve: 0.05;
  --window-avatar-lid-top-asymmetry: 0.15;
  --window-avatar-lid-bottom-cutoff: 0.13;
  --window-avatar-lid-bottom-curve: 0;
  --window-avatar-lid-bottom-asymmetry: 0.12;
}

.ferni-avatar[data-expression="skeptical"],
.window-avatar[data-expression="skeptical"],
.ferni-avatar--skeptical {
  --window-avatar-lid-top-cutoff: 0.11;
  --window-avatar-lid-top-curve: 0;
  --window-avatar-lid-top-asymmetry: 0.25;
  --window-avatar-lid-bottom-cutoff: 0.11;
  --window-avatar-lid-bottom-curve: 0.08;
  --window-avatar-lid-bottom-asymmetry: 0.2;
}

.ferni-avatar[data-expression="worried"],
.window-avatar[data-expression="worried"],
.ferni-avatar--worried {
  --window-avatar-lid-top-cutoff: 0.13;
  --window-avatar-lid-top-curve: -0.1;
  --window-avatar-lid-top-asymmetry: 0.1;
  --window-avatar-lid-bottom-cutoff: 0.09;
  --window-avatar-lid-bottom-curve: 0.12;
  --window-avatar-lid-bottom-asymmetry: 0.05;
}

.ferni-avatar[data-expression="happy"],
.window-avatar[data-expression="happy"],
.ferni-avatar--happy {
  --window-avatar-lid-top-cutoff: 0.14;
  --window-avatar-lid-top-curve: 0.08;
  --window-avatar-lid-top-asymmetry: 0;
  --window-avatar-lid-bottom-cutoff: 0.14;
  --window-avatar-lid-bottom-curve: -0.2;
  --window-avatar-lid-bottom-asymmetry: 0;
}

.ferni-avatar[data-expression="delighted"],
.window-avatar[data-expression="delighted"],
.ferni-avatar--delighted {
  --window-avatar-lid-top-cutoff: 0.16;
  --window-avatar-lid-top-curve: 0.12;
  --window-avatar-lid-top-asymmetry: 0;
  --window-avatar-lid-bottom-cutoff: 0.16;
  --window-avatar-lid-bottom-curve: -0.3;
  --window-avatar-lid-bottom-asymmetry: 0;
}

.ferni-avatar[data-expression="sad"],
.window-avatar[data-expression="sad"],
.ferni-avatar--sad {
  --window-avatar-lid-top-cutoff: 0.12;
  --window-avatar-lid-top-curve: -0.08;
  --window-avatar-lid-top-asymmetry: 0.05;
  --window-avatar-lid-bottom-cutoff: 0.1;
  --window-avatar-lid-bottom-curve: 0.15;
  --window-avatar-lid-bottom-asymmetry: 0;
}

.ferni-avatar[data-expression="excited"],
.window-avatar[data-expression="excited"],
.ferni-avatar--excited {
  --window-avatar-lid-top-cutoff: 0.08;
  --window-avatar-lid-top-curve: 0.1;
  --window-avatar-lid-top-asymmetry: 0;
  --window-avatar-lid-bottom-cutoff: 0.15;
  --window-avatar-lid-bottom-curve: -0.18;
  --window-avatar-lid-bottom-asymmetry: 0;
}

.ferni-avatar[data-expression="empathetic"],
.window-avatar[data-expression="empathetic"],
.ferni-avatar--empathetic {
  --window-avatar-lid-top-cutoff: 0.13;
  --window-avatar-lid-top-curve: 0.05;
  --window-avatar-lid-top-asymmetry: 0.08;
  --window-avatar-lid-bottom-cutoff: 0.12;
  --window-avatar-lid-bottom-curve: -0.1;
  --window-avatar-lid-bottom-asymmetry: 0.05;
}

.ferni-avatar[data-expression="contemplative"],
.window-avatar[data-expression="contemplative"],
.ferni-avatar--contemplative {
  --window-avatar-lid-top-cutoff: 0.15;
  --window-avatar-lid-top-curve: 0;
  --window-avatar-lid-top-asymmetry: 0;
  --window-avatar-lid-bottom-cutoff: 0.11;
  --window-avatar-lid-bottom-curve: 0.03;
  --window-avatar-lid-bottom-asymmetry: 0.1;
}

.ferni-avatar[data-expression="listening"],
.window-avatar[data-expression="listening"],
.ferni-avatar--listening {
  --window-avatar-lid-top-cutoff: 0.11;
  --window-avatar-lid-top-curve: 0.03;
  --window-avatar-lid-top-asymmetry: 0;
  --window-avatar-lid-bottom-cutoff: 0.12;
  --window-avatar-lid-bottom-curve: -0.05;
  --window-avatar-lid-bottom-asymmetry: 0;
}

/* Window Avatar - State Transitions */
.ferni-avatar[data-state="connecting"],
.window-avatar[data-state="connecting"] {
  --window-avatar-lid-top-cutoff: 0.15;
  --window-avatar-lid-top-curve: 0;
  --window-avatar-lid-bottom-cutoff: 0.15;
  --window-avatar-lid-bottom-curve: 0;
}

.ferni-avatar[data-state="thinking"],
.window-avatar[data-state="thinking"] {
  --window-avatar-lid-top-cutoff: 0.14;
  --window-avatar-lid-top-curve: 0;
  --window-avatar-lid-bottom-cutoff: 0.11;
  --window-avatar-lid-bottom-curve: 0.05;
}

.ferni-avatar[data-state="listening"],
.window-avatar[data-state="listening"] {
  --window-avatar-lid-top-cutoff: 0.11;
  --window-avatar-lid-top-curve: 0.03;
  --window-avatar-lid-bottom-cutoff: 0.12;
  --window-avatar-lid-bottom-curve: -0.05;
}

.ferni-avatar[data-state="speaking"],
.window-avatar[data-state="speaking"] {
  --window-avatar-lid-top-cutoff: 0.12;
  --window-avatar-lid-top-curve: 0;
}

.ferni-avatar[data-state="farewell"],
.window-avatar[data-state="farewell"] {
  --window-avatar-lid-top-cutoff: 0.14;
  --window-avatar-lid-top-curve: 0.05;
  --window-avatar-lid-bottom-cutoff: 0.13;
  --window-avatar-lid-bottom-curve: -0.15;
}

/* Window Avatar - Phoneme Shapes for Lip Sync */
:root {
  --phoneme-rest-open: 0;
  --phoneme-rest-width: 1;
  --phoneme-rest-roundness: 0;
  --phoneme-a-open: 0.9;
  --phoneme-a-width: 1.2;
  --phoneme-a-roundness: 0.3;
  --phoneme-e-open: 0.5;
  --phoneme-e-width: 1.3;
  --phoneme-e-roundness: 0.2;
  --phoneme-i-open: 0.3;
  --phoneme-i-width: 1.4;
  --phoneme-i-roundness: 0.1;
  --phoneme-o-open: 0.7;
  --phoneme-o-width: 0.8;
  --phoneme-o-roundness: 0.8;
  --phoneme-u-open: 0.4;
  --phoneme-u-width: 0.6;
  --phoneme-u-roundness: 0.9;
  --phoneme-m-open: 0;
  --phoneme-m-width: 1;
  --phoneme-m-roundness: 0;
  --phoneme-f-open: 0.15;
  --phoneme-f-width: 1.1;
  --phoneme-f-roundness: 0.1;
  --phoneme-th-open: 0.2;
  --phoneme-th-width: 1;
  --phoneme-th-roundness: 0.2;
  --phoneme-l-open: 0.35;
  --phoneme-l-width: 1.1;
  --phoneme-l-roundness: 0.15;
  --phoneme-w-open: 0.3;
  --phoneme-w-width: 0.7;
  --phoneme-w-roundness: 0.7;
}

/* Window Avatar - Brow Animation Keyframes */
/* Brow = top lid - creates forehead/eyebrow expressions */

@keyframes browRaise {
  0% {
    --window-avatar-lid-top-cutoff: 0.12;
    transform: translateY(0);
  }
  50% {
    --window-avatar-lid-top-cutoff: 0.06;
    transform: translateY(-3px);
  }
  100% {
    --window-avatar-lid-top-cutoff: 0.08;
    transform: translateY(-2px);
  }
}

@keyframes browLower {
  0% {
    --window-avatar-lid-top-cutoff: 0.12;
    transform: translateY(0);
  }
  50% {
    --window-avatar-lid-top-cutoff: 0.18;
    transform: translateY(2px);
  }
  100% {
    --window-avatar-lid-top-cutoff: 0.16;
    transform: translateY(1px);
  }
}

@keyframes browFurrow {
  0% {
    --window-avatar-lid-top-curve: 0;
    transform: scaleY(1);
  }
  50% {
    --window-avatar-lid-top-curve: -0.12;
    transform: scaleY(0.95);
  }
  100% {
    --window-avatar-lid-top-curve: -0.08;
    transform: scaleY(0.97);
  }
}

@keyframes browQuirk {
  0% {
    --window-avatar-lid-top-asymmetry: 0;
  }
  30% {
    --window-avatar-lid-top-asymmetry: 0.3;
  }
  70% {
    --window-avatar-lid-top-asymmetry: 0.25;
  }
  100% {
    --window-avatar-lid-top-asymmetry: 0.2;
  }
}

/* Window Avatar - Brow Animation Utility Classes */

.ferni-avatar--brow-raise .lid-top,
.window-avatar--brow-raise .lid-top {
  animation: browRaise 250ms var(--motion-ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)) forwards;
}

.ferni-avatar--brow-lower .lid-top,
.window-avatar--brow-lower .lid-top {
  animation: browLower 400ms var(--motion-ease-gentle, cubic-bezier(0.25, 0.1, 0.25, 1)) forwards;
}

.ferni-avatar--brow-furrow .lid-top,
.window-avatar--brow-furrow .lid-top {
  animation: browFurrow 350ms var(--motion-ease-soft, cubic-bezier(0.4, 0, 0.2, 1)) forwards;
}

.ferni-avatar--brow-quirk .lid-top,
.window-avatar--brow-quirk .lid-top {
  animation: browQuirk 300ms var(--motion-ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)) forwards;
}

/* Micro-expression brow flash - subliminal 40-150ms */
.ferni-avatar--brow-flash .lid-top,
.window-avatar--brow-flash .lid-top {
  animation: browRaise 80ms ease-out;
}


/* Window Avatar - Notification Badge */

@keyframes badgeEntrance {
  0% {
    opacity: 0;
    transform: scale(0) translateY(4px);
  }
  60% {
    transform: scale(1.15) translateY(-2px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes badgePulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 currentColor;
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 0 4px transparent;
  }
}

@keyframes badgeBounce {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.25);
  }
  50% {
    transform: scale(0.9);
  }
  70% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}


/* Base notification badge */
.ferni-avatar__badge,
.window-avatar__badge {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  font-family: var(--font-body);
  font-weight: 600;
  line-height: 1;
  z-index: 10;
  transition: transform 200ms var(--motion-ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)),
              opacity 200ms ease-out;
}

/* Badge positioning */
.ferni-avatar__badge--top-right,
.window-avatar__badge--top-right {
  top: -4px;
  right: -4px;
}

.ferni-avatar__badge--top-left,
.window-avatar__badge--top-left {
  top: -4px;
  left: -4px;
}

.ferni-avatar__badge--bottom-right,
.window-avatar__badge--bottom-right {
  bottom: -4px;
  right: -4px;
}

.ferni-avatar__badge--bottom-left,
.window-avatar__badge--bottom-left {
  bottom: -4px;
  left: -4px;
}

/* Badge sizes */
.ferni-avatar__badge--dot,
.window-avatar__badge--dot {
  width: 8px;
  height: 8px;
  min-width: unset;
  padding: 0;
}

.ferni-avatar__badge--small,
.window-avatar__badge--small {
  min-width: 16px;
  height: 16px;
  font-size: 10px;
  padding: 0 4px;
}

.ferni-avatar__badge,
.window-avatar__badge {
  min-width: 20px;
  height: 20px;
  font-size: 11px;
  padding: 0 6px;
}

/* Badge variants */
.ferni-avatar__badge,
.window-avatar__badge {
  background: var(--color-semantic-error);
  color: white;
}

.ferni-avatar__badge--subtle,
.window-avatar__badge--subtle {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-medium);
  color: var(--color-text-secondary);
}

.ferni-avatar__badge--success,
.window-avatar__badge--success {
  background: var(--color-semantic-success);
  color: white;
}

.ferni-avatar__badge--persona,
.window-avatar__badge--persona {
  background: var(--persona-primary);
  color: white;
}

/* Badge states */
.ferni-avatar__badge--hidden,
.window-avatar__badge--hidden {
  opacity: 0;
  transform: scale(0);
  pointer-events: none;
}

.ferni-avatar__badge--visible,
.window-avatar__badge--visible {
  opacity: 1;
  transform: scale(1);
}

/* Badge animations */
.ferni-avatar__badge--animate-in,
.window-avatar__badge--animate-in {
  animation: badgeEntrance 300ms var(--ease-out-back) forwards;
}

.ferni-avatar__badge--pulse,
.window-avatar__badge--pulse {
  animation: badgePulse 1.5s ease-in-out infinite;
}

.ferni-avatar__badge--bounce,
.window-avatar__badge--bounce {
  animation: badgeBounce 400ms var(--ease-spring);
}

/* Container needs position relative for absolute badge positioning */
.ferni-avatar--has-badge,
.window-avatar--has-badge {
  position: relative;
}

/* Scale-specific badge adjustments */
.ferni-avatar--tiny .ferni-avatar__badge,
.window-avatar--tiny .window-avatar__badge {
  /* Smaller badge for tiny avatars */
  min-width: 12px;
  height: 12px;
  font-size: 8px;
  padding: 0 3px;
  top: -2px;
  right: -2px;
}

.ferni-avatar--tiny .ferni-avatar__badge--dot,
.window-avatar--tiny .window-avatar__badge--dot {
  width: 6px;
  height: 6px;
}

.ferni-avatar--small .ferni-avatar__badge,
.window-avatar--small .window-avatar__badge {
  min-width: 14px;
  height: 14px;
  font-size: 9px;
  padding: 0 3px;
}

.ferni-avatar--large .ferni-avatar__badge,
.window-avatar--large .window-avatar__badge {
  /* Larger badge for large avatars */
  min-width: 24px;
  height: 24px;
  font-size: 13px;
  padding: 0 8px;
  top: -6px;
  right: -6px;
}

.ferni-avatar--large .ferni-avatar__badge--dot,
.window-avatar--large .window-avatar__badge--dot {
  width: 12px;
  height: 12px;
}


/* ========================================
   ACCESSIBILITY - HIGH CONTRAST MODE
   ======================================== */
/* High contrast mode - for users who need enhanced visibility */
@media (prefers-contrast: more) {
  :root {
    /* Boost text contrast */
    --color-text-primary: #000000;
    --color-text-secondary: #1a1a1a;
    --color-text-muted: #333333;
    
    /* Remove subtle backgrounds */
    --color-background-glass: transparent;
    --glass-surface-1: rgba(255, 255, 255, 0.95);
    --glass-surface-2: rgba(255, 255, 255, 0.98);
    --glass-surface-3: #ffffff;
    
    /* Remove blur effects - they can hinder readability */
    --glass-blur-subtle: 0px;
    --glass-blur-medium: 0px;
    --glass-blur-strong: 0px;
    --glass-blur-intense: 0px;
    
    /* Stronger borders */
    --color-border-subtle: rgba(0, 0, 0, 0.3);
    --color-border-medium: rgba(0, 0, 0, 0.5);
    --color-border-strong: rgba(0, 0, 0, 0.8);
    
    /* Simplified shadows */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.35);
    
    /* Disable noise and complex effects */
    --glass-noise-opacity-subtle: 0;
    --glass-noise-opacity-medium: 0;
    --glass-noise-opacity-visible: 0;
    --glass-vibrancy-subtle: saturate(1) contrast(1);
    --glass-vibrancy-medium: saturate(1) contrast(1);
    --glass-vibrancy-high: saturate(1) contrast(1);
    
    /* Bolder focus rings */
    --glass-focus-ring: 0 0 0 3px #000000;
  }
  
  [data-theme="midnight"] {
    --color-text-primary: #ffffff;
    --color-text-secondary: #f0f0f0;
    --color-text-muted: #e0e0e0;
    
    --glass-surface-1: rgba(0, 0, 0, 0.95);
    --glass-surface-2: rgba(0, 0, 0, 0.98);
    --glass-surface-3: #000000;
    
    --color-border-subtle: rgba(255, 255, 255, 0.3);
    --color-border-medium: rgba(255, 255, 255, 0.5);
    --color-border-strong: rgba(255, 255, 255, 0.8);
    
    --glass-focus-ring: 0 0 0 3px #ffffff;
  }
  
  /* Ensure buttons have visible borders */
  button, .btn {
    border: 2px solid currentColor !important;
  }
  
  /* Remove decorative gradients in high contrast */
  .gradient-decorative,
  [class*="gradient-"] {
    background: none !important;
    background-color: var(--color-background-primary) !important;
  }
}

/* Forced colors mode (Windows High Contrast) */
@media (forced-colors: active) {
  :root {
    /* Let the system handle colors */
    --color-text-primary: CanvasText;
    --color-text-secondary: CanvasText;
    --color-background-primary: Canvas;
    --color-background-elevated: Canvas;
    --color-accent-primary: LinkText;
    --color-border-medium: CanvasText;
  }
  
  /* Ensure focus indicators are visible */
  *:focus-visible {
    outline: 2px solid Highlight !important;
    outline-offset: 2px;
  }
  
  /* Button styling for forced colors */
  button, .btn {
    border: 1px solid ButtonText;
    background: ButtonFace;
    color: ButtonText;
  }
  
  button:hover, .btn:hover {
    background: Highlight;
    color: HighlightText;
  }
}

/* Reduced transparency for users who prefer it */
@media (prefers-reduced-transparency: reduce) {
  :root {
    /* Use solid backgrounds instead of translucent */
    --glass-surface-1: var(--color-background-secondary);
    --glass-surface-2: var(--color-background-tertiary);
    --glass-surface-3: var(--color-background-elevated);
    
    /* Remove backdrop filters */
    --glass-blur-subtle: 0px;
    --glass-blur-medium: 0px;
    --glass-blur-strong: 0px;
    --glass-blur-intense: 0px;
    
    /* Solid overlays */
    --backdrop-light: var(--color-background-overlay);
    --backdrop-medium: var(--color-background-overlay);
    --backdrop-heavy: var(--color-background-overlay);
  }
}

/* ========================================
   ORGANIC CONVERSATION FLOW
   Flowing borders, breathing containers
   ======================================== */
/* ========================================
   ORGANIC CONVERSATION FLOW

   Better than Apple: Not rigid message boxes
   Better than Google: Not disconnected bubbles

   Philosophy: Chat interfaces feel mechanical - boxes floating in space.
   Human conversation is a continuous river of dialogue, thoughts flowing
   into each other, not disconnected rectangles.

   Inspired by: Pixar's fluidity - water in Finding Nemo,
   the organic blob shapes in Inside Out emotions
   ======================================== */

:root {
  --conversation-message-radius-user: 24px 24px 8px 24px;
  --conversation-message-radius-ai: 24px 24px 24px 8px;
  --conversation-message-radius-system: 16px;
  --conversation-breathing-duration: 5000ms;
  --conversation-breathing-scale: 1.005;
  --conversation-presence-color: var(--color-accent-subtle);
  --conversation-connection-color: var(--color-border-subtle);
  --conversation-connection-opacity: 0.3;
  --conversation-enter-duration: 400ms;
  --conversation-exit-duration: 300ms;
}

@keyframes containerBreathe {
  0% { transform: scale(1); opacity: 0.98; }
  50% { transform: scale(1.005); opacity: 1; }
  100% { transform: scale(1); opacity: 0.98; }
}

@keyframes borderBreathe {
  0% { opacity: 0.4; border-color: var(--color-border-subtle); }
  50% { opacity: 0.8; border-color: var(--color-border-medium); }
  100% { opacity: 0.4; border-color: var(--color-border-subtle); }
}

@keyframes presencePulse {
  0% { box-shadow: 0 0 0 0 var(--color-accent-subtle); }
  50% { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 var(--color-accent-subtle); }
}

@keyframes thinkingRipple {
  0% { transform: scale(0.8); opacity: 0.6; }
  100% { transform: scale(1.5); opacity: 0; }
}

@keyframes activeGlow {
  0% { box-shadow: 0 0 20px var(--persona-aura-glow); }
  50% { box-shadow: 0 0 30px var(--persona-aura-glow); }
  100% { box-shadow: 0 0 20px var(--persona-aura-glow); }
}

@keyframes messageEnter {
  0% { opacity: 0; transform: translateY(20px) scale(0.95); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes messageExit {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-10px) scale(0.98); }
}

@keyframes messageUpdate {
  0% { background-color: var(--color-accent-subtle); }
  100% { background-color: transparent; }
}

@keyframes connectionDraw {
  0% { stroke-dashoffset: 100%; }
  100% { stroke-dashoffset: 0%; }
}

/* Organic Message Shapes - asymmetric, flowing, human */
.conversation-message {
  position: relative;
  padding: 16px 20px;
  margin: 8px 0;
  border-radius: var(--conversation-message-radius-ai);
  background: var(--color-tonal-surface1-background);
  animation: containerBreathe var(--conversation-breathing-duration) ease-in-out infinite;
  will-change: transform, opacity;
  transition: transform 200ms ease-out, box-shadow 200ms ease-out;
}

.conversation-message:hover {
  animation-play-state: paused;
  transform: scale(1.01);
}

.conversation-message--user {
  border-radius: var(--conversation-message-radius-user);
  background: linear-gradient(135deg, var(--color-tonal-surface2-background) 0%, var(--color-tonal-surface1-background) 100%);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
  margin-left: 40px;
  margin-right: 0;
}

.conversation-message--ai {
  border-radius: var(--conversation-message-radius-ai);
  background: linear-gradient(135deg, var(--color-background-elevated) 0%, var(--color-background-tertiary) 100%);
  box-shadow: 0 4px 16px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
  margin-right: 40px;
  margin-left: 0;
}

.conversation-message--system {
  border-radius: var(--conversation-message-radius-system);
  background: transparent;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.875rem;
  animation: none;
  margin: 16px 40px;
}

/* Flowing Borders - borders that breathe */
.conversation-message--flowing {
  border: 1px solid var(--color-border-subtle);
  opacity: 0.6;
}

.conversation-message--active {
  border: 1.5px solid var(--color-accent-primary);
  box-shadow: 0 0 8px var(--color-accent-glow);
}

.conversation-message--breathing-border {
  animation: borderBreathe 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Connection Lines - visual threads between messages */
.conversation-connection {
  position: absolute;
  left: 30px;
  width: 2px;
  background: var(--color-border-subtle);
  opacity: 0.3;
  transform-origin: top;
}

.conversation-connection--curved {
  position: absolute;
  pointer-events: none;
  overflow: visible;
}

.conversation-connection--curved path {
  fill: none;
  stroke: var(--conversation-connection-color);
  stroke-width: 2px;
  opacity: var(--conversation-connection-opacity);
  stroke-dasharray: 100%;
  animation: connectionDraw 400ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Breathing Containers - subtle life in static elements */
.breathing-container {
  animation: containerBreathe 5000ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.breathing-container:hover {
  animation-play-state: paused;
  transform: scale(1.01);
  transition: 200ms ease-out;
}

.breathing-container--active {
  transform: scale(1);
  box-shadow: 0 0 20px var(--color-accent-glow);
}

/* Presence Indicators - showing AI is here with you */
.presence-indicator {
  position: relative;
  display: inline-block;
}

.presence-indicator--listening::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  animation: presencePulse 2000ms ease-in-out infinite;
}

.presence-indicator--thinking {
  position: relative;
}

.presence-indicator--thinking::before,
.presence-indicator--thinking::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid var(--color-accent-primary);
  animation: thinkingRipple 1200ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.presence-indicator--thinking::after {
  animation-delay: 200ms;
}

.presence-indicator--active-glow {
  animation: activeGlow 3000ms ease-in-out infinite;
}

/* Message Transitions - how messages enter and exit */
.conversation-message-enter {
  animation: messageEnter var(--conversation-enter-duration) cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.conversation-message-exit {
  animation: messageExit var(--conversation-exit-duration) ease-out forwards;
}

.conversation-message-update {
  animation: messageUpdate 200ms ease-out;
}

/* Conversation Flow Container - the river of dialogue */
.conversation-flow {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  position: relative;
}

.conversation-flow--connected {
  /* Enables visual connection lines between messages */
  --show-connections: 1;
}

.conversation-flow--connected .conversation-connection {
  display: block;
}

.conversation-flow:not(.conversation-flow--connected) .conversation-connection {
  display: none;
}

/* Reduced Motion - respect user preferences */
@media (prefers-reduced-motion: reduce) {
  .conversation-message,
  .breathing-container,
  .presence-indicator--listening::after,
  .presence-indicator--thinking::before,
  .presence-indicator--thinking::after,
  .presence-indicator--active-glow {
    animation: none;
  }

  .conversation-message-enter,
  .conversation-message-exit {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .conversation-connection--curved path {
    animation: none;
    stroke-dashoffset: 0;
  }
}

/* ========================================
   MICRO-INTERACTIONS LIBRARY
   Touch feedback, state animations, hover effects
   ======================================== */
/* ========================================
   MICRO-INTERACTIONS LIBRARY

   Better than Apple: More emotionally aware feedback
   Better than Google: Warmer than Material's mechanical ripples

   Philosophy: Micro-interactions are the soul of great UI.
   Every tap, hover, and state change is an opportunity to delight.
   We take Apple's touch feedback and add emotional warmth.

   Inspired by: Apple's haptic feedback, Pixar's anticipation
   and follow-through, but with human warmth
   ======================================== */

:root {
  --micro-tap-duration: 200ms;
  --micro-press-scale: 0.96;
  --micro-release-scale: 1.02;
  --micro-ripple-duration: 400ms;
  --micro-success-duration: 400ms;
  --micro-error-shake-distance: 8px;
  --micro-loading-dots-duration: 1400ms;
  --micro-skeleton-duration: 1500ms;
  --micro-hover-lift: -2px;
  --micro-hover-shadow: 0 4px 12px rgba(0,0,0,0.15);
  --micro-switch-duration: 200ms;
  --micro-checkbox-duration: 150ms;
  --micro-scroll-stagger: 100ms;
}

@keyframes tapPulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.97); opacity: 0.9; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes pressDown {
  0% { transform: scale(1); }
  100% { transform: scale(0.96); }
}

@keyframes releaseUp {
  0% { transform: scale(0.96); }
  50% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

@keyframes rippleExpand {
  0% { transform: scale(0); opacity: 0.5; }
  100% { transform: scale(2.5); opacity: 0; }
}

@keyframes longPressHold {
  0% { transform: scale(1); box-shadow: none; }
  100% { transform: scale(0.94); box-shadow: 0 0 20px var(--color-accent-glow); }
}

@keyframes successPop {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes errorShake {
  0% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-8px); }
  80% { transform: translateX(8px); }
  100% { transform: translateX(0); }
}

@keyframes warningPulse {
  0% { transform: scale(1); opacity: 1; }
  25% { transform: scale(1.05); opacity: 0.8; }
  50% { transform: scale(1); opacity: 1; }
  75% { transform: scale(1.05); opacity: 0.8; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes loadingDots {
  0% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}

@keyframes savedCheckmark {
  0% { stroke-dashoffset: 24; }
  100% { stroke-dashoffset: 0; }
}

@keyframes sentFlyAway {
  0% { transform: translateX(0) translateY(0) scale(1); opacity: 1; }
  100% { transform: translateX(30px) translateY(-20px) scale(0.5); opacity: 0; }
}

@keyframes copiedFlash {
  0% { background-color: transparent; }
  50% { background-color: var(--color-accent-subtle); }
  100% { background-color: transparent; }
}

@keyframes heartPop {
  0% { transform: scale(1); }
  15% { transform: scale(1.3); }
  30% { transform: scale(0.9); }
  45% { transform: scale(1.2); }
  60% { transform: scale(0.95); }
  100% { transform: scale(1); }
}

@keyframes badgeBounce {
  0% { transform: translateY(0); }
  30% { transform: translateY(-4px); }
  50% { transform: translateY(0); }
  70% { transform: translateY(-2px); }
  100% { transform: translateY(0); }
}

@keyframes indicatorPulse {
  0% { box-shadow: 0 0 0 0 var(--color-accent-glow); }
  50% { box-shadow: 0 0 10px 5px var(--color-accent-glow); }
  100% { box-shadow: 0 0 0 0 var(--color-accent-glow); }
}

@keyframes skeletonShimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes dotsWave {
  0% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}

@keyframes spinnerRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes fadeSlideUp {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes checkmarkDraw {
  0% { stroke-dashoffset: 24; opacity: 0; }
  50% { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}

/* Touch Feedback - Haptic-style visual feedback */
.touch-tap {
  animation: tapPulse 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.touch-press {
  transform: scale(0.96);
  transition: transform 100ms ease-out;
}
.touch-release {
  animation: releaseUp 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.touch-ripple {
  position: relative;
  overflow: hidden;
}
.touch-ripple::after {
  content: '';
  position: absolute;
  top: var(--ripple-y, 50%);
  left: var(--ripple-x, 50%);
  width: 100%;
  height: 100%;
  background: var(--color-accent-subtle);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
}
.touch-ripple.rippling::after {
  animation: rippleExpand 400ms ease-out forwards;
}
.touch-long-press {
  animation: longPressHold 800ms ease-in-out forwards;
}

/* State Feedback - Visual confirmation of state changes */
.state-success {
  animation: successPop 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
  color: var(--color-semantic-success);
}
.state-success::after {
  box-shadow: 0 0 20px var(--color-semantic-success-glow);
}
.state-error {
  animation: errorShake 400ms ease-out;
  color: var(--color-semantic-error);
}
.state-warning {
  animation: warningPulse 600ms ease-in-out;
  color: var(--color-semantic-warning);
}
.state-info {
  animation: infoSlide 300ms ease-out;
  color: var(--color-semantic-info);
}
.state-loading .dot {
  animation: loadingDots 1200ms ease-in-out infinite;
}
.state-loading .dot:nth-child(2) {
  animation-delay: 150ms;
}
.state-loading .dot:nth-child(3) {
  animation-delay: calc(150ms * 2);
}

/* Acknowledgments - Micro-celebrations for completed actions */
.ack-saved {
  animation: savedCheckmark 500ms ease-out forwards;
}
.ack-sent {
  animation: sentFlyAway 400ms ease-out forwards;
}
.ack-copied {
  animation: copiedFlash 300ms ease-out;
}
.ack-favorited {
  animation: heartPop 500ms ease-out;
  color: #e25555;
}

/* Attention Grabbers - Subtle animations to draw user attention */
.attention-badge {
  animation: badgeBounce 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
  animation-iteration-count: 2;
}
.attention-indicator {
  animation: indicatorPulse 2000ms ease-in-out infinite;
}
.attention-shake {
  animation: attentionShake 500ms ease-out;
}
@keyframes attentionShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-3px); }
  40%, 80% { transform: translateX(3px); }
}

/* Loading Variants - Different loading states for different contexts */
.loading-skeleton {
  background: linear-gradient(90deg,
    var(--color-bg-tertiary) 0%,
    var(--color-bg-elevated) 50%,
    var(--color-bg-tertiary) 100%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1500ms ease-in-out infinite;
}
.loading-dots {
  display: inline-flex;
  gap: 4px;
}
.loading-dots .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: dotsWave 1400ms ease-in-out infinite;
}
.loading-dots .dot:nth-child(2) {
  animation-delay: 100ms;
}
.loading-dots .dot:nth-child(3) {
  animation-delay: calc(100ms * 2);
}
.loading-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-border-subtle);
  border-top-color: var(--color-accent-primary);
  border-radius: 50%;
  animation: spinnerRotate 1000ms linear infinite;
}
.loading-breathing {
  animation: loadingBreathe 2000ms ease-in-out infinite;
}
@keyframes loadingBreathe {
  0%, 100% { transform: scale(0.95); opacity: 0.7; }
  50% { transform: scale(1); opacity: 1; }
}

/* Hover Effects - Rich hover states beyond simple color changes */
.hover-lift {
  transition: transform 200ms ease-out, box-shadow 200ms ease-out;
}
.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.hover-glow {
  transition: box-shadow 250ms ease-out;
}
.hover-glow:hover {
  box-shadow: 0 0 20px var(--color-accent-glow);
}
.hover-scale {
  transition: transform 150ms ease-out;
}
.hover-scale:hover {
  transform: scale(1.02);
}
.hover-border-glow {
  transition: border-color 200ms ease-out, box-shadow 200ms ease-out;
}
.hover-border-glow:hover {
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 2px var(--color-accent-glow);
}

/* Toggle Animations - Switch, checkbox, radio button animations */
.toggle-switch {
  --thumb-travel: 18px;
  transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.toggle-switch .thumb {
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.toggle-switch.active .thumb {
  transform: translateX(var(--thumb-travel));
}
.toggle-checkbox .checkmark {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  transition: stroke-dashoffset 150ms ease-out;
}
.toggle-checkbox.checked .checkmark {
  stroke-dashoffset: 0;
}
.toggle-radio .dot {
  transform: scale(0);
  transition: transform 150ms ease-out;
}
.toggle-radio.selected .dot {
  transform: scale(1);
}

/* Scroll Interactions - Scroll-linked micro-animations */
.scroll-fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 400ms ease-out, transform 400ms ease-out;
}
.scroll-fade-in.in-view {
  opacity: 1;
  transform: translateY(0);
}
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--scroll-progress, 0%);
  height: 3px;
  background: var(--color-accent-primary);
  z-index: 9999;
  transition: width 50ms linear;
}

/* Reduced Motion - respect user preferences */
@media (prefers-reduced-motion: reduce) {
  .touch-tap,
  .touch-press,
  .touch-release,
  .touch-ripple::after,
  .touch-long-press,
  .state-success,
  .state-error,
  .state-warning,
  .state-loading .dot,
  .ack-saved,
  .ack-sent,
  .ack-copied,
  .ack-favorited,
  .attention-badge,
  .attention-indicator,
  .attention-shake,
  .loading-skeleton,
  .loading-dots .dot,
  .loading-spinner,
  .loading-breathing,
  .scroll-fade-in {
    animation: none !important;
  }

  .hover-lift,
  .hover-glow,
  .hover-scale,
  .hover-border-glow,
  .toggle-switch .thumb,
  .toggle-checkbox .checkmark,
  .toggle-radio .dot {
    transition: none !important;
  }

  .scroll-fade-in {
    opacity: 1;
    transform: none;
  }
}

/* ========================================
   STATE LAYERS (MATERIAL 3 STYLE)
   Hover, focus, pressed, dragged, disabled states
   ======================================== */
:root {
  /* State Layer Opacities (Material 3 style) */
  --state-opacity-hover: 0.08;
  --state-opacity-focus: 0.12;
  --state-opacity-pressed: 0.12;
  --state-opacity-dragged: 0.16;
  --state-opacity-selected: 0.12;
  --state-opacity-activated: 0.12;

  /* Disabled State Tokens */
  --state-disabled-container-opacity: 0.12;
  --state-disabled-content-opacity: 0.38;

  /* State Transition Timings */
  --state-transition-enter: 150ms cubic-bezier(0.0, 0.0, 0.2, 1);
  --state-transition-exit: 75ms cubic-bezier(0.4, 0.0, 1, 1);
  --state-transition-change: 200ms cubic-bezier(0.4, 0.0, 0.2, 1);

  /* Ripple Effect Tokens */
  --ripple-duration: 450ms;
  --ripple-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --ripple-opacity-start: 0.24;
  --ripple-opacity-end: 0;

  /* Skeleton Loading Tokens */
  --skeleton-pulse-duration: 1.5s;
  --skeleton-shimmer-duration: 1.5s;
}

/* Focus Ring Styles */
.focus-ring-default:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--color-utility-focusRing);
}

.focus-ring-inset:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: -2px;
}

.focus-ring-prominent:focus-visible {
  outline: 3px solid var(--color-accent-primary);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--color-utility-focusRing), 0 0 8px var(--color-accent-glow);
}

.focus-ring-persona:focus-visible {
  outline: 2px solid var(--persona-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--persona-glow);
}

/* Emotional State Overrides */
[data-mood="calm"] {
  --state-opacity-hover: 0.06;
  --state-transition-enter: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

[data-mood="energized"] {
  --state-opacity-hover: 0.1;
  --state-transition-enter: 150ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

[data-mood="stressed"] {
  --state-opacity-hover: 0.05;
  --state-transition-enter: 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

[data-mood="focused"] {
  --state-opacity-hover: 0.08;
  --state-transition-enter: 200ms cubic-bezier(0.4, 0, 0.6, 1);
}


/* ========================================
   ICON SYSTEM (SF SYMBOLS-INSPIRED)
   10 sizes, 8 weights, optical scaling
   ======================================== */
:root {
  /* Icon Sizes */
  --icon-size-2xs: 12px;
  --icon-size-xs: 14px;
  --icon-size-sm: 16px;
  --icon-size-md: 20px;
  --icon-size-lg: 24px;
  --icon-size-xl: 28px;
  --icon-size-2xl: 32px;
  --icon-size-3xl: 40px;
  --icon-size-4xl: 48px;
  --icon-size-5xl: 64px;

  /* Icon Stroke Weights */
  --icon-stroke-ultraLight: 1px;
  --icon-stroke-thin: 1.25px;
  --icon-stroke-light: 1.5px;
  --icon-stroke-regular: 1.75px;
  --icon-stroke-medium: 2px;
  --icon-stroke-semibold: 2.25px;
  --icon-stroke-bold: 2.5px;
  --icon-stroke-heavy: 3px;

  /* Icon Colors */
  --icon-color-default: var(--color-text-secondary);
  --icon-color-muted: var(--color-text-muted);
  --icon-color-primary: var(--color-text-primary);
  --icon-color-accent: var(--color-accent-primary);
  --icon-color-persona: var(--persona-primary);

  /* Icon Animation Tokens */
  --icon-press-scale: 0.85;
  --icon-press-duration: 100ms;
  --icon-hover-scale: 1.1;
  --icon-hover-duration: 150ms;
}

/* ========================================
   SHAPE SYSTEM (MATERIAL 3 STYLE)
   Component-specific corner radius mappings
   ======================================== */
:root {
  /* Corner Radius Scale */
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-3xl: 24px;
  --radius-4xl: 28px;
  --radius-5xl: 32px;
  --radius-full: 9999px;

  /* Component-Specific Radius */
  --radius-button-sm: var(--radius-md);
  --radius-button-md: var(--radius-md);
  --radius-button-lg: var(--radius-lg);
  --radius-button-fab: var(--radius-xl);
  --radius-input: var(--radius-md);
  --radius-search: var(--radius-full);
  --radius-card: var(--radius-lg);
  --radius-card-glass: var(--radius-xl);
  --radius-dialog: var(--radius-4xl);
  --radius-sheet-top: var(--radius-3xl);
  --radius-chip: var(--radius-sm);
  --radius-badge: var(--radius-full);
  --radius-avatar: var(--radius-full);
  --radius-tooltip: var(--radius-md);
  --radius-toast: var(--radius-lg);
}

/* Persona Radius Adjustments */
[data-persona="ferni"] {
  --radius-multiplier: 1.1;
}
[data-persona="maya"] {
  --radius-multiplier: 1;
}
[data-persona="peter"] {
  --radius-multiplier: 0.85;
}
[data-persona="jordan"] {
  --radius-multiplier: 1;
}
[data-persona="alex"] {
  --radius-multiplier: 0.95;
}
[data-persona="nayan"] {
  --radius-multiplier: 1.15;
}

/* ========================================
   VISUALIZATION SYSTEM
   Kintsugi, constellation, river, sankey, etc.
   ======================================== */
:root {
  /* Visualization Shared Tokens */
  --viz-transition-fast: 150ms ease-out;
  --viz-transition-normal: 300ms ease-out;
  --viz-transition-slow: 600ms ease-out;
  --viz-transition-story: 1200ms cubic-bezier(0.4, 0, 0.2, 1);
  --viz-tooltip-bg: var(--surface-elevated);
  --viz-tooltip-radius: var(--radius-md);
  --viz-tooltip-padding: 8px 12px;
  --viz-legend-gap: 12px;
  --viz-legend-swatch: 12px;

  /* Kintsugi Animation Tokens */
  --kintsugi-flow-duration: 1200ms;
  --kintsugi-flow-stagger: 100ms;
  --kintsugi-glow-duration: 2000ms;

  /* Constellation Animation Tokens */
  --constellation-twinkle-duration: 2000ms;
  --constellation-draw-duration: 600ms;
  --constellation-star-self: 24px;
  --constellation-star-close: 12px;
  --constellation-star-regular: 8px;

  /* River Animation Tokens */
  --river-flow-duration: 4000ms;
  --river-ripple-duration: 1500ms;

  /* Growth Rings Animation Tokens */
  --growth-reveal-duration: 1500ms;
  --growth-reveal-stagger: 150ms per ring;

  /* Mood Calendar Tokens */
  --mood-cell-size: 12px;
  --mood-cell-gap: 3px;
  --mood-cell-radius: 2px;
}

/* ========================================
   EXTENDED COMPONENTS SYSTEM
   30+ fully-specified component tokens
   ======================================== */
:root {
  /* Extended Component Tokens */

  /* Button Tokens */
  --button-height-xs: 28px;
  --button-padding-xs: 0 10px;
  --button-font-xs: var(--text-xs);
  --button-radius-xs: var(--radius-sm);
  --button-icon-xs: 14px;
  --button-height-sm: 32px;
  --button-padding-sm: 0 12px;
  --button-font-sm: var(--text-sm);
  --button-radius-sm: var(--radius-md);
  --button-icon-sm: 16px;
  --button-height-md: 40px;
  --button-padding-md: 0 16px;
  --button-font-md: var(--text-base);
  --button-radius-md: var(--radius-md);
  --button-icon-md: 18px;
  --button-height-lg: 48px;
  --button-padding-lg: 0 24px;
  --button-font-lg: var(--text-lg);
  --button-radius-lg: var(--radius-lg);
  --button-icon-lg: 20px;
  --button-height-xl: 56px;
  --button-padding-xl: 0 32px;
  --button-font-xl: var(--text-xl);
  --button-radius-xl: var(--radius-xl);
  --button-icon-xl: 24px;
  --button-press-duration: 100ms;
  --button-release-duration: 200ms;

  /* Input Tokens */
  --input-height: 48px;
  --input-padding: 12px 16px;
  --input-radius: var(--radius-md);
  --input-font: var(--text-base);
  --input-height-sm: 36px;
  --input-padding-sm: 8px 12px;
  --input-height-md: 44px;
  --input-padding-md: 10px 14px;
  --input-height-lg: 52px;
  --input-padding-lg: 12px 16px;

  /* Card Tokens */
  --card-padding-sm: 12px;
  --card-radius-sm: var(--radius-md);
  --card-padding-md: 16px;
  --card-radius-md: var(--radius-lg);
  --card-padding-lg: 24px;
  --card-radius-lg: var(--radius-xl);

  /* Toast Tokens */
  --toast-padding: 12px 16px;
  --toast-radius: var(--radius-lg);
  --toast-min-width: 280px;
  --toast-max-width: 420px;
  --toast-gap: 12px;
  --toast-enter-duration: 400ms;
  --toast-exit-duration: 200ms;
  --toast-duration-short: 2500ms;
  --toast-duration-default: 4000ms;
  --toast-duration-long: 6000ms;

  /* Dialog Tokens */
  --dialog-radius: var(--radius-2xl);
  --dialog-max-width: 560px;
  --dialog-width: calc(100vw - 48px);
  --dialog-max-height: calc(100vh - 96px);
  --dialog-header-padding: 24px 24px 16px;
  --dialog-body-padding: 0 24px;
  --dialog-footer-padding: 16px 24px 24px;
  --dialog-footer-gap: 12px;
  --dialog-enter-duration: 300ms;
  --dialog-exit-duration: 200ms;

  /* Avatar Tokens */
  --avatar-size-xs: 24px;
  --avatar-font-xs: 10px;
  --avatar-size-sm: 32px;
  --avatar-font-sm: 12px;
  --avatar-size-md: 40px;
  --avatar-font-md: 14px;
  --avatar-size-lg: 48px;
  --avatar-font-lg: 16px;
  --avatar-size-xl: 64px;
  --avatar-font-xl: 20px;
  --avatar-size-2xl: 96px;
  --avatar-font-2xl: 28px;
  --avatar-radius: var(--radius-full);
  --avatar-group-overlap: -8px;
  --avatar-group-max-visible: 4;

  /* Progress Tokens */
  --progress-height: 4px;
  --progress-radius: var(--radius-full);
  --progress-bg: var(--tonal-surface-2);
  --progress-circular-size: 40px;
  --progress-circular-stroke: 4px;
}