/* ============================================================
   Troly Work OS — Design Tokens (single source of truth)
   Three-zone layout: Nav Rail | Content | Detail Panel
   ============================================================ */

/* Theme variables */
:root {
     /* ── Brand Tokens ─────────────────────────────────────── */
     --brand-primary: #5B74F7;
     --brand-primary-strong: #3E56D6;
     --brand-primary-soft: #EEF2FF;
     --brand-ink: #0A0B10;
     --brand-canvas: #FAFBFF;

     /* Legacy aliases */
     --brand-cyan: #5B74F7;
     --brand-cyan-soft: #A9B8FF;
     --brand-navy: #0C0F18;
     --brand-soft-white: #E5E7EB;
     --brand-overlay: rgba(91, 116, 247, 0.12);
     --brand-outline: rgba(229, 231, 235, 0.12);

     /* ── Semantic Surface Layers (dark — warm tinted) ──────── */
     --surface-1: #0C0F18;
     --surface-2: #13161F;
     --surface-3: #1A1D28;
     --surface-4: #222530;

     /* Legacy bg aliases */
     --bg-primary: #0C0F18;
     --bg-secondary: #13161F;
     --bg-tertiary: #1A1D28;

     /* ── Layout Tokens ────────────────────────────────────── */
     --nav-rail-width: 64px;
     --nav-expanded-width: 240px;
     --detail-panel-width: 380px;
     --content-min-width: 480px;
     --toolbar-height: 56px;

     /* ── Typography ───────────────────────────────────────── */
     --text-primary: #E5E7EB;
     --text-secondary: #C7CDD8;   /* 7.13:1 on #0B1220 — WCAG AAA */
     --text-tertiary: #94A3B8;   /* 4.85:1 on #0B1220 — WCAG AA  */
     --text-disabled: #64748B;   /* 3.11:1 on #0B1220 — AA large  */

     /* ── Accent & Status ──────────────────────────────────── */
     --accent: #5B74F7;
     --accent-hover: #3E56D6;
     --user-msg-bg: rgba(91, 116, 247, 0.12);
     --ai-msg-bg: rgba(255, 255, 255, 0.04);
     --border: rgba(229, 231, 235, 0.12);
     --success: #34D399;
     --warning: #F59E0B;
     --error: #F87171;
     --info: #38BDF8;          /* sky-400 */
     --status-idle: rgba(229, 231, 235, 0.44);
     --status-listening: #34D399;
     --status-processing: #F59E0B;
     --status-speaking: #5B74F7;  /* Troly Blue */
     --status-error: #F87171;

     /* ── Spacing Scale ─────────────────────────────────────── */
     --space-0: 0px;
     --space-1: 4px;      /* 0.25rem — micro gaps */
     --space-2: 8px;      /* 0.5rem  — tight spacing */
     --space-3: 12px;     /* 0.75rem — default inner padding */
     --space-4: 16px;     /* 1rem    — standard spacing */
     --space-5: 20px;     /* 1.25rem — comfortable padding */
     --space-6: 24px;     /* 1.5rem  — section gaps */
     --space-8: 32px;     /* 2rem    — large gaps */
     --space-10: 40px;    /* 2.5rem  — hero spacing */
     --space-12: 48px;    /* 3rem    — section breaks */
     --space-16: 64px;    /* 4rem    — page margins */

     /* ── Typography Scale ─────────────────────────────────── */
     --font-family-primary: 'Be Vietnam Pro', system-ui, -apple-system, sans-serif;
     --font-family-mono: 'JetBrains Mono', 'Fira Code', monospace;

     --text-xs: 0.6875rem;   /* 11px — badges, metadata */
     --text-sm: 0.75rem;     /* 12px — secondary labels */
     --text-base: 0.875rem;  /* 14px — body text default */
     --text-md: 1rem;        /* 16px — emphasis body */
     --text-lg: 1.125rem;    /* 18px — subheadings */
     --text-xl: 1.25rem;     /* 20px — section headings */
     --text-2xl: 1.5rem;     /* 24px — page headings */
     --text-3xl: 2rem;       /* 32px — hero subheading */
     --text-4xl: 3rem;       /* 48px — hero heading */
    --text-root: 100%;      /* respects browser/user zoom baseline */

     --leading-tight: 1.25;
     --leading-normal: 1.5;
     --leading-relaxed: 1.625;

     --weight-normal: 400;
     --weight-medium: 500;
     --weight-semibold: 600;
     --weight-bold: 700;

     /* ── Radii (tighter for dense Work OS — Linear direction) ─ */
     --radius-xs: 4px;
     --radius-sm: 8px;       /* buttons, inputs, small cards */
     --radius: 12px;         /* cards, panels — primary */
     --radius-lg: 16px;      /* modals, large containers */
     --radius-xl: 20px;      /* hero elements, full panels */
     --radius-full: 9999px;
    --radius-none: 0;

     /* ── Z-Index Scale ────────────────────────────────────── */
     --z-base: 1;
     --z-dropdown: 100;
     --z-sticky: 200;
     --z-fixed: 500;
     --z-modal-backdrop: 1000;
     --z-modal: 1001;
     --z-tooltip: 1100;
     --z-toast: 1200;
     --z-critical: 9999;

     /* ── Transition Presets (Superhuman speed targets) ───── */
     --duration-fast: 120ms;
     --duration-normal: 200ms;
     --duration-slow: 300ms;
     --ease-default: cubic-bezier(0, 0, 0.58, 1);
     --ease-in: cubic-bezier(0.4, 0, 1, 1);
     --ease-out: cubic-bezier(0, 0, 0.2, 1);
     --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --transform-lift-sm: -1px;
    --transform-lift-md: -2px;

     /* ── Border Colors (semantic) ─────────────────────────── */
     --border-subtle: rgba(229, 231, 235, 0.06);
     --border-default: rgba(229, 231, 235, 0.12);
     --border-strong: rgba(229, 231, 235, 0.24);

     /* ── Focus / Glow ─────────────────────────────────────── */
     --glow-accent: 0 0 0 1px rgba(91, 116, 247, 0.12);
     --focus-ring: #A9B8FF;

     /* ── Scrollbar ────────────────────────────────────────── */
     --scrollbar-track: rgba(229, 231, 235, 0.04);
     --scrollbar-thumb: rgba(229, 231, 235, 0.12);

     /* ── Glass / Overlay Variables (dark theme: white-alpha) ─
         IMPORTANT: These are overridden in .theme-light below
         to dark-alpha equivalents. All components using these
         variables will automatically get correct values in both
         themes without needing individual .theme-light overrides.
     ────────────────────────────────────────────────────────── */
     --white-02: rgba(255, 255, 255, 0.02);
     --white-04: rgba(255, 255, 255, 0.04);
     --white-05: rgba(255, 255, 255, 0.05);
     --white-06: rgba(255, 255, 255, 0.06);
     --white-08: rgba(255, 255, 255, 0.08);
     --white-10: rgba(255, 255, 255, 0.10);
     --white-12: rgba(255, 255, 255, 0.12);
     --white-14: rgba(255, 255, 255, 0.14);
     --white-15: rgba(255, 255, 255, 0.15);
     --white-18: rgba(255, 255, 255, 0.18);
     --white-20: rgba(255, 255, 255, 0.20);
     /* High-opacity whites: used as deliberate glass panel BGs
         in .theme-light blocks — do NOT override in light theme */
     --white-40: rgba(255, 255, 255, 0.40);
     --white-55: rgba(255, 255, 255, 0.55);
     --white-60: rgba(255, 255, 255, 0.60);

     /* ── Pure dark overlay variables ─────────────────────── */
     --black-02: rgba(0, 0, 0, 0.02);
     --black-03: rgba(0, 0, 0, 0.03);
     --black-04: rgba(0, 0, 0, 0.04);
     --black-05: rgba(0, 0, 0, 0.05);
     --black-06: rgba(0, 0, 0, 0.06);
     --black-08: rgba(0, 0, 0, 0.08);
     --black-10: rgba(0, 0, 0, 0.10);
     --black-12: rgba(0, 0, 0, 0.12);
     --black-15: rgba(0, 0, 0, 0.15);
     --black-20: rgba(0, 0, 0, 0.20);
     --black-25: rgba(0, 0, 0, 0.25);
     --black-30: rgba(0, 0, 0, 0.30);
     --black-40: rgba(0, 0, 0, 0.40);

     /* ── Backdrop Filter Presets ──────────────────────────── */
     --backdrop-blur-glass: blur(12px);   /* reduced from blur(40px) — no heavy glass per brand */
     --backdrop-blur-medium: blur(20px);
     --backdrop-blur-light: blur(12px);

     /* ── Glass Panel System (dark defaults) ──────────────── */
     --glass-bg: rgba(20, 20, 24, 0.68);
     --glass-border: rgba(255, 255, 255, 0.14);
     --glass-inset: inset 0 0.5px 0 rgba(255, 255, 255, 0.08);
     --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.32);

     /* ── Box-Shadow Presets ───────────────────────────────── */
     --shadow-xs: 0 1px 4px rgba(0, 0, 0, 0.08);
     --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.12);
     --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.16);
     --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.36);
     --shadow-xl: 0 16px 56px rgba(0, 0, 0, 0.46);
     --shadow-inset-divider: inset 0 0.5px 0 var(--white-06);

     /* ── Skeleton Loading (dark) ──────────────────────────── */
     --skeleton-base: rgba(229, 231, 235, 0.06);
     --skeleton-shine: rgba(229, 231, 235, 0.12);

     /* ── Semantic Interaction Tokens ─────────────────────── */
     --text-on-accent: #FFFFFF;
     --focus-ring-shadow: 0 0 0 3px rgba(91, 116, 247, 0.25);
     --modal-backdrop: rgba(0, 0, 0, 0.60);
     --overlay-scrim: rgba(0, 0, 0, 0.50);
     --recording-red: #EF4444;
     --code-bg: var(--surface-3);
     --code-text: var(--text-secondary);
     --quote-text: var(--text-tertiary);
     --trend-up: #34D399;
     --trend-down: #F87171;

     /* ── Gmail Category Chip Colors (dark) ───────────────── */
     --gmail-primary: #22D3EE;
     --gmail-promotions: #ffb74d;
     --gmail-social: #81c784;
     --gmail-updates: #ba68c8;
     --gmail-task: #0EA5E9;
     --gmail-reminder: #ffcc80;
     --gmail-calendar: #a5d6a7;
     --gmail-reply: #ce93d8;

     /* ── Sticky Note (skeuomorphic) ─────────────────────── */
     --sticky-text: #4e3910;

     /* ── Text on Status Background ──────────────────────── */
     --text-on-warning: #1a1400;

     /* ── Theme Transition ─────────────────────────────────── */
     --transition-theme: background-color 0.3s ease, color 0.3s ease,
                                border-color 0.3s ease, box-shadow 0.3s ease;
}

:root.theme-light {
    /* ── Surface Layers (light — warm tinted) ────────────── */
    --surface-1: #FAFBFE;
    --surface-2: #FFFFFF;
    --surface-3: #F4F5F9;
    --surface-4: #EDEEF3;

    --bg-primary: #FAFBFE;
    --bg-secondary: #FFFFFF;
    --bg-tertiary: #F4F5F9;

    /* ── Typography (light) ───────────────────────────────── */
    --text-primary: #0A0B10;    /* 19.1:1 on white — WCAG AAA */
    --text-secondary: #475569;  /* 6.02:1 on white — WCAG AAA */
    --text-tertiary: #64748B;   /* 4.64:1 on white — WCAG AA  */
    --text-disabled: #94A3B8;   /* 2.5:1  on white — intentionally low for disabled state */

    /* ── Accent & Status (light) ──────────────────────────── */
    --accent: #5B74F7;          /* same as dark — brand consistency */
    --accent-hover: #3E56D6;    /* same as dark */
    --user-msg-bg: rgba(74, 101, 245, 0.09);
    --ai-msg-bg: rgba(10, 11, 16, 0.03);
    --border: #D8DFF0;
    --success: #059669;
    --warning: #D97706;
    --error: #DC2626;
    --info: #0284C7;          /* sky-600 — WCAG AA */
    --status-idle: rgba(10, 11, 16, 0.40);
    --status-listening: #059669;
    --status-processing: #D97706;
    --status-speaking: #0891B2;
    --status-error: #DC2626;

    /* ── Border Colors (light) ────────────────────────────── */
    --border-subtle: rgba(10, 11, 16, 0.06);
    --border-default: rgba(10, 11, 16, 0.10);
    --border-strong: rgba(10, 11, 16, 0.22);

    /* ── Focus Ring (light) ───────────────────────────────── */
    --focus-ring: #5B74F7;

    /* ── Scrollbar (light) ────────────────────────────────── */
    --scrollbar-track: rgba(10, 11, 16, 0.04);
    --scrollbar-thumb: rgba(10, 11, 16, 0.14);

    /* ── Glass Panel System (light) ──────────────────────── */
    --glass-bg: rgba(255, 255, 255, 0.80);
    --glass-border: rgba(10, 11, 16, 0.09);
    --glass-inset: inset 0 0.5px 0 rgba(255, 255, 255, 0.95);
    --glass-shadow: 0 4px 20px rgba(10, 11, 16, 0.08);

    /* ── Box-Shadow Presets (light) ───────────────────────── */
    --shadow-xs: 0 1px 3px rgba(10, 11, 16, 0.06);
    --shadow-sm: 0 2px 8px rgba(10, 11, 16, 0.08);
    --shadow-md: 0 4px 16px rgba(10, 11, 16, 0.10);
    --shadow-lg: 0 8px 32px rgba(10, 11, 16, 0.12);
    --shadow-xl: 0 16px 48px rgba(10, 11, 16, 0.14);
    --shadow-inset-divider: inset 0 0.5px 0 rgba(10, 11, 16, 0.06);

    /* ── Skeleton Loading (light) ─────────────────────────── */
    --skeleton-base: rgba(10, 11, 16, 0.07);
    --skeleton-shine: rgba(10, 11, 16, 0.13);

    /* ── Semantic Interaction Tokens (light) ──────────────── */
    --text-on-accent: #FFFFFF;
    --focus-ring-shadow: 0 0 0 3px rgba(91, 116, 247, 0.20);
    --modal-backdrop: rgba(10, 11, 16, 0.40);
    --overlay-scrim: rgba(10, 11, 16, 0.30);
    --recording-red: #DC2626;
    --code-bg: var(--surface-3);
    --code-text: var(--text-secondary);
    --quote-text: var(--text-tertiary);
    --trend-up: #059669;
    --trend-down: #DC2626;

    /* ── Gmail Category Chip Colors (light) ──────────────── */
    --gmail-primary: #0891B2;
    --gmail-promotions: #D97706;
    --gmail-social: #059669;
    --gmail-updates: #9333EA;
    --gmail-task: #0369A1;
    --gmail-reminder: #B45309;
    --gmail-calendar: #047857;
    --gmail-reply: #7C3AED;

    /* ── Sticky Note (skeuomorphic, same in both themes) ─── */
    --sticky-text: #4e3910;

    /* ── Text on Status Background (light) ────────────────── */
    --text-on-warning: #1a1400;

    /* ────────────────────────────────────────────────────────
       CORE THEME FIX: Override low-opacity white overlay vars
       to equivalent dark-alpha values for light backgrounds.
       This automatically fixes ALL components using --white-*
       as backgrounds/borders without individual overrides.
       Rule: --white-XX maps to roughly --black-(XX * 0.75)
    ────────────────────────────────────────────────────────── */
    --white-02: rgba(10, 11, 16, 0.02);
    --white-04: rgba(10, 11, 16, 0.04);
    --white-05: rgba(10, 11, 16, 0.04);
    --white-06: rgba(10, 11, 16, 0.05);
    --white-08: rgba(10, 11, 16, 0.07);
    --white-10: rgba(10, 11, 16, 0.08);
    --white-12: rgba(10, 11, 16, 0.10);
    --white-14: rgba(10, 11, 16, 0.11);
    --white-15: rgba(10, 11, 16, 0.12);
    --white-18: rgba(10, 11, 16, 0.14);
    --white-20: rgba(10, 11, 16, 0.16);
    /* Note: --white-40/55/60 intentionally NOT overridden —
       they are only used inside explicit .theme-light blocks
       as glass panel backgrounds (correct behavior). */
}

:root.theme-light #vrm-viewer {
    background: transparent;
}

/* ============================================================
   Smooth Theme Transition
   Applied during theme switch to animate color changes
   ============================================================ */

:root.theme-transitioning,
:root.theme-transitioning *,
:root.theme-transitioning *::before,
:root.theme-transitioning *::after {
    transition: background-color 0.35s ease,
                color 0.35s ease,
                border-color 0.35s ease,
                box-shadow 0.35s ease,
                opacity 0.35s ease !important;
}