/* Shared design tokens for NavVault (Copied from extension) */
:root {
    /* Base Colors */
    --sp-bg-primary: #fbfdff;
    --sp-bg-secondary: #f3f7fb;
    --sp-bg-tertiary: #edf3f8;
    --sp-bg-hover: #e6eef7;

    /* Card / Panel Surfaces */
    --sp-card-bg: #f2f7fd;
    --sp-card-bg-hover: #eaf2fb;
    --sp-card-border: rgba(15, 23, 42, 0.08);
    --sp-window-chrome-bg: linear-gradient(135deg, #fbfdff, #eef4fb);
    --sp-panel-shadow: 0 30px 65px -25px rgba(2, 6, 23, 0.18);
    --sp-toolbar-bg: rgba(251, 253, 255, 0.85);
    --sp-toolbar-border: rgba(15, 23, 42, 0.12);

    /* Glass Effects */
    --sp-glass-bg: rgba(251, 253, 255, 0.7);
    --sp-glass-bg-strong: rgba(251, 253, 255, 0.85);
    --sp-glass-border: rgba(15, 23, 42, 0.10);
    --sp-glass-blur: 14px;
    --sp-glass-shadow: 0 10px 36px rgba(2, 6, 23, 0.10);
    --sp-glass-shadow-lg: 0 18px 54px rgba(2, 6, 23, 0.14);

    /* Text Colors */
    --sp-text-primary: #0b1220;
    --sp-text-secondary: #3d4b5f;
    --sp-text-tertiary: #72839a;

    /* Borders */
    --sp-border: rgba(15, 23, 42, 0.14);
    --sp-border-light: rgba(15, 23, 42, 0.08);
    --sp-border-subtle: rgba(15, 23, 42, 0.06);

    /* Accent Colors */
    --sp-accent: #22d3ee;
    --sp-accent-hover: #67e8f9;
    --sp-accent-light: rgba(34, 211, 238, 0.12);
    --sp-accent-glow: rgba(34, 211, 238, 0.28);

    /* Primary (alias for accent, used for pins/highlights) */
    --sp-primary: var(--sp-accent);
    --sp-primary-rgb: 34, 211, 238;

    /* Status Colors */
    --sp-success: #34d399;
    --sp-success-light: rgba(52, 211, 153, 0.12);
    --sp-error: #fb7185;
    --sp-error-light: rgba(251, 113, 133, 0.12);
    --sp-warning: #fbbf24;
    --sp-warning-light: rgba(251, 191, 36, 0.12);
    --sp-info: var(--sp-accent);
    --sp-info-light: rgba(34, 211, 238, 0.12);

    /* Status Badge Colors (for light backgrounds) */
    --sp-badge-success-bg: #dcfce7;
    --sp-badge-success-text: #166534;
    --sp-badge-error-bg: #fee2e2;
    --sp-badge-error-text: #991b1b;
    --sp-badge-warning-bg: #fef3c7;
    --sp-badge-warning-text: #92400e;
    --sp-badge-info-bg: #dbeafe;
    --sp-badge-info-text: #1e40af;

    /* Premium/Pro */
    --sp-pro: #fbbf24;
    --sp-pro-bg: rgba(251, 191, 36, 0.12);

    /* Star/Favorite */
    --sp-star: #eab308;
    --sp-star-light: rgba(234, 179, 8, 0.1);

    /* Message Bubble Gradients */
    --sp-user-gradient: linear-gradient(135deg, #e6fbff, #d7f1ff);
    --sp-ai-gradient: linear-gradient(135deg, #f2f7fd, #eaf2fb);
    --sp-card-shadow: 0 10px 22px rgba(2, 6, 23, 0.10);

    /* Border Radius */
    --sp-radius-sm: 10px;
    --sp-radius-md: 12px;
    --sp-radius-lg: 16px;
    --sp-radius-xl: 20px;

    /* Transitions */
    --sp-transition: 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
    --sp-transition-slow: 320ms cubic-bezier(0.2, 0.8, 0.2, 1);

    /* Body Background */
    --sp-body-bg: radial-gradient(1200px 900px at 15% -10%, rgba(34, 211, 238, 0.22), transparent 55%),
        radial-gradient(900px 700px at 95% 10%, rgba(251, 191, 36, 0.18), transparent 55%),
        linear-gradient(180deg, #fbfdff 0%, #eef4fb 100%);

    /* Component: Avatar */
    --sp-avatar-bg: linear-gradient(135deg, rgba(34, 211, 238, 0.20), rgba(99, 102, 241, 0.14));
    --sp-avatar-color: #0b1220;
    --sp-avatar-shadow: 0 14px 28px rgba(2, 6, 23, 0.18);

    /* Component: Icon Buttons */
    --sp-icon-btn-bg: rgba(15, 23, 42, 0.06);
    --sp-icon-btn-color: var(--sp-text-secondary);
    --sp-icon-btn-hover-border: rgba(34, 211, 238, 0.45);
    --sp-icon-btn-hover-color: var(--sp-accent);
    --sp-icon-btn-active-color: #08101a;

    /* Component: Tabs */
    --sp-tab-bg: rgba(15, 23, 42, 0.07);
    --sp-tab-color: var(--sp-text-secondary);
    --sp-tab-hover-bg: rgba(34, 211, 238, 0.10);
    --sp-tab-hover-color: var(--sp-text-primary);

    /* Component: Toolbar */
    --sp-toolbar-btn-bg: rgba(15, 23, 42, 0.06);
    --sp-toolbar-btn-hover: rgba(34, 211, 238, 0.10);

    /* Component: Search */
    --sp-search-bg: rgba(251, 253, 255, 0.85);
    --sp-search-border: var(--sp-border);
    --sp-search-placeholder: var(--sp-text-tertiary);

    /* Component: Messages/Cards */
    --sp-message-hover-border: rgba(15, 23, 42, 0.14);
    --sp-message-platform-bg: rgba(34, 211, 238, 0.10);
    --sp-message-user-label: #0ea5e9;
    --sp-message-assistant-label: #34d399;
    --sp-message-preview: #2b3a4c;

    /* Component: Structure View */
    --sp-structure-h2: #64748b;
    --sp-structure-h3: #94a3b8;

    /* Component: Modals */
    --sp-modal-bg: #fbfdff;
    --sp-modal-border: rgba(15, 23, 42, 0.12);
    --sp-modal-shadow: 0 30px 70px -25px rgba(2, 6, 23, 0.22);

    /* Component: Token Count */
    --sp-token-bg: rgba(34, 211, 238, 0.10);
    --sp-token-color: var(--sp-text-secondary);

    /* Component: Folder Tree */
    --sp-folder-hover-bg: rgba(34, 211, 238, 0.10);
    --sp-folder-active-bg: rgba(34, 211, 238, 0.16);
    --sp-folder-icon-color: var(--sp-text-tertiary);

    /* Component: Pro pill */
    --sp-pro-gradient: linear-gradient(135deg, rgba(34, 211, 238, 0.95), rgba(99, 102, 241, 0.85));
    --sp-pro-shadow: 0 10px 22px rgba(34, 211, 238, 0.20);
}

/* Dark-mode tokens applied either by explicit data-theme or system preference */
:root[data-theme='dark'] {
    --sp-bg-primary: #070b11;
    --sp-bg-secondary: #0c121c;
    --sp-bg-tertiary: #0f1724;
    --sp-bg-hover: #142034;

    --sp-card-bg: #0e1623;
    --sp-card-bg-hover: #111c2d;
    --sp-card-border: rgba(230, 237, 243, 0.07);
    --sp-window-chrome-bg: radial-gradient(900px 650px at 10% 0%, rgba(34, 211, 238, 0.12), transparent 55%),
        radial-gradient(800px 600px at 95% 10%, rgba(99, 102, 241, 0.10), transparent 55%),
        linear-gradient(135deg, #0b111b, #070b11);
    --sp-panel-shadow: 0 40px 85px -35px rgba(0, 0, 0, 0.9);
    --sp-toolbar-bg: rgba(7, 11, 17, 0.65);
    --sp-toolbar-border: rgba(230, 237, 243, 0.10);

    --sp-glass-bg: rgba(12, 18, 28, 0.72);
    --sp-glass-bg-strong: rgba(12, 18, 28, 0.88);
    --sp-glass-border: rgba(230, 237, 243, 0.07);
    --sp-glass-shadow: 0 12px 44px rgba(0, 0, 0, 0.45);
    --sp-glass-shadow-lg: 0 20px 62px rgba(0, 0, 0, 0.58);

    --sp-text-primary: #e6edf3;
    --sp-text-secondary: rgba(230, 237, 243, 0.72);
    --sp-text-tertiary: rgba(230, 237, 243, 0.50);

    --sp-border: rgba(230, 237, 243, 0.12);
    --sp-border-light: rgba(230, 237, 243, 0.08);
    --sp-border-subtle: rgba(230, 237, 243, 0.06);

    --sp-accent: #22d3ee;
    --sp-accent-hover: #67e8f9;
    --sp-accent-light: rgba(34, 211, 238, 0.15);
    --sp-accent-glow: rgba(34, 211, 238, 0.33);

    /* Primary (alias for accent, used for pins/highlights) */
    --sp-primary: var(--sp-accent);
    --sp-primary-rgb: 34, 211, 238;

    --sp-success: #34d399;
    --sp-success-light: rgba(52, 211, 153, 0.16);
    --sp-error: #fb7185;
    --sp-error-light: rgba(251, 113, 133, 0.16);
    --sp-warning: #fbbf24;
    --sp-warning-light: rgba(251, 191, 36, 0.16);

    --sp-pro: #fbbf24;
    --sp-pro-bg: rgba(251, 191, 36, 0.16);
    --sp-star: #fde047;
    --sp-star-light: rgba(253, 224, 71, 0.14);

    --sp-user-gradient: linear-gradient(135deg, rgba(34, 211, 238, 0.10), rgba(99, 102, 241, 0.10));
    --sp-ai-gradient: linear-gradient(135deg, rgba(230, 237, 243, 0.06), rgba(230, 237, 243, 0.02));
    --sp-card-shadow: 0 24px 44px rgba(0, 0, 0, 0.55);

    /* Body Background */
    --sp-body-bg: radial-gradient(1100px 850px at 15% -10%, rgba(34, 211, 238, 0.18), transparent 58%),
        radial-gradient(900px 700px at 95% 10%, rgba(99, 102, 241, 0.14), transparent 58%),
        linear-gradient(180deg, #070b11 0%, #05070b 100%);

    /* Component: Avatar */
    --sp-avatar-bg: linear-gradient(135deg, rgba(34, 211, 238, 0.22), rgba(99, 102, 241, 0.18));
    --sp-avatar-color: #e6edf3;
    --sp-avatar-shadow: 0 18px 34px rgba(0, 0, 0, 0.55);

    /* Component: Icon Buttons */
    --sp-icon-btn-bg: rgba(230, 237, 243, 0.06);
    --sp-icon-btn-color: rgba(230, 237, 243, 0.72);
    --sp-icon-btn-hover-border: rgba(34, 211, 238, 0.45);
    --sp-icon-btn-hover-color: var(--sp-accent);
    --sp-icon-btn-active-color: #070b11;

    /* Component: Tabs */
    --sp-tab-bg: rgba(230, 237, 243, 0.06);
    --sp-tab-color: rgba(230, 237, 243, 0.72);
    --sp-tab-hover-bg: rgba(34, 211, 238, 0.10);
    --sp-tab-hover-color: #e6edf3;

    /* Component: Toolbar */
    --sp-toolbar-btn-bg: rgba(255, 255, 255, 0.03);
    --sp-toolbar-btn-hover: rgba(255, 255, 255, 0.08);

    /* Component: Search */
    --sp-search-bg: rgba(7, 11, 17, 0.55);
    --sp-search-border: rgba(230, 237, 243, 0.08);
    --sp-search-placeholder: rgba(230, 237, 243, 0.40);

    /* Component: Messages/Cards */
    --sp-message-hover-border: rgba(230, 237, 243, 0.12);
    --sp-message-platform-bg: rgba(34, 211, 238, 0.10);
    --sp-message-user-label: #38bdf8;
    --sp-message-assistant-label: #34d399;
    --sp-message-preview: rgba(230, 237, 243, 0.72);

    /* Component: Structure View */
    --sp-structure-h2: #94a3b8;
    --sp-structure-h3: #64748b;

    /* Component: Modals */
    --sp-modal-bg: #1a1f2e;
    --sp-modal-border: rgba(255, 255, 255, 0.08);
    --sp-modal-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);

    /* Component: Token Count */
    --sp-token-bg: rgba(34, 211, 238, 0.10);
    --sp-token-color: rgba(230, 237, 243, 0.72);

    /* Component: Folder Tree */
    --sp-folder-hover-bg: rgba(34, 211, 238, 0.10);
    --sp-folder-active-bg: rgba(34, 211, 238, 0.16);
    --sp-folder-icon-color: rgba(230, 237, 243, 0.50);

    /* Status Colors (dark mode) */
    --sp-info: var(--sp-accent);
    --sp-info-light: rgba(34, 211, 238, 0.15);

    /* Status Badge Colors (dark mode - higher contrast) */
    --sp-badge-success-bg: rgba(16, 185, 129, 0.2);
    --sp-badge-success-text: #34d399;
    --sp-badge-error-bg: rgba(239, 68, 68, 0.2);
    --sp-badge-error-text: #f87171;
    --sp-badge-warning-bg: rgba(245, 158, 11, 0.2);
    --sp-badge-warning-text: #fbbf24;
    --sp-badge-info-bg: rgba(34, 211, 238, 0.2);
    --sp-badge-info-text: #67e8f9;

    /* Component: Pro pill */
    --sp-pro-gradient: linear-gradient(135deg, rgba(34, 211, 238, 0.95), rgba(99, 102, 241, 0.85));
    --sp-pro-shadow: 0 12px 26px rgba(34, 211, 238, 0.18);
}