/* Shared design tokens for standalone export site */
:root {
    --sp-font-sans: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    /* Base Colors */
    --sp-bg-primary: #fff9f6;
    --sp-bg-secondary: #f5efe9;
    --sp-bg-tertiary: #efe4dc;
    --sp-bg-hover: #ead8cd;

    /* Card / Panel Surfaces */
    --sp-card-bg: #fcf5f0;
    --sp-card-bg-hover: #f6ebe4;
    --sp-card-border: rgba(37, 22, 15, 0.08);
    --sp-window-chrome-bg: linear-gradient(135deg, #fff9f6, #f5efe9);
    --sp-panel-shadow: 0 30px 65px -25px rgba(37, 22, 15, 0.18);
    --sp-toolbar-bg: rgba(255, 249, 246, 0.88);
    --sp-toolbar-border: rgba(37, 22, 15, 0.12);

    /* Glass Effects */
    --sp-glass-bg: rgba(255, 249, 246, 0.72);
    --sp-glass-bg-strong: rgba(255, 249, 246, 0.9);
    --sp-glass-border: rgba(37, 22, 15, 0.1);
    --sp-glass-blur: 14px;
    --sp-glass-shadow: 0 10px 36px rgba(37, 22, 15, 0.1);
    --sp-glass-shadow-lg: 0 18px 54px rgba(37, 22, 15, 0.14);

    /* Text Colors */
    --sp-text-primary: #25160f;
    --sp-text-secondary: #7c4a36;
    --sp-text-tertiary: #9a6a57;

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

    /* Accent Colors */
    --sp-accent: #d97757;
    --sp-accent-hover: #b45309;
    --sp-accent-light: rgba(217, 119, 87, 0.12);
    --sp-accent-glow: rgba(217, 119, 87, 0.28);

    /* Primary (alias for accent, used for pins/highlights) */
    --sp-primary: var(--sp-accent);
    --sp-primary-rgb: 217, 119, 87;

    /* 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(217, 119, 87, 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, #fff1ea, #f7dfd2);
    --sp-ai-gradient: linear-gradient(135deg, #fcf5f0, #f5e8df);
    --sp-card-shadow: 0 10px 22px rgba(37, 22, 15, 0.1);

    /* 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(217, 119, 87, 0.22), transparent 55%),
        radial-gradient(900px 700px at 95% 10%, rgba(180, 83, 9, 0.14), transparent 55%),
        linear-gradient(180deg, #fff9f6 0%, #f5efe9 100%);

    /* Component: Avatar */
    --sp-avatar-bg: linear-gradient(135deg, rgba(217, 119, 87, 0.2), rgba(180, 83, 9, 0.14));
    --sp-avatar-color: #25160f;
    --sp-avatar-shadow: 0 14px 28px rgba(37, 22, 15, 0.18);

    /* Component: Icon Buttons */
    --sp-icon-btn-bg: rgba(37, 22, 15, 0.06);
    --sp-icon-btn-color: var(--sp-text-secondary);
    --sp-icon-btn-hover-border: rgba(217, 119, 87, 0.45);
    --sp-icon-btn-hover-color: var(--sp-accent);
    --sp-icon-btn-active-color: #08101a;

    /* Component: Tabs */
    --sp-tab-bg: rgba(37, 22, 15, 0.07);
    --sp-tab-color: var(--sp-text-secondary);
    --sp-tab-hover-bg: rgba(217, 119, 87, 0.1);
    --sp-tab-hover-color: var(--sp-text-primary);

    /* Component: Toolbar */
    --sp-toolbar-btn-bg: rgba(37, 22, 15, 0.06);
    --sp-toolbar-btn-hover: rgba(217, 119, 87, 0.1);

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

    /* Component: Messages/Cards */
    --sp-message-hover-border: rgba(37, 22, 15, 0.14);
    --sp-message-platform-bg: rgba(217, 119, 87, 0.1);
    --sp-message-user-label: #c55b30;
    --sp-message-assistant-label: #34d399;
    --sp-message-preview: #513225;

    /* Component: Structure View */
    --sp-structure-h2: #8f563f;
    --sp-structure-h3: #b07b65;

    /* Component: Modals */
    --sp-modal-bg: #fff9f6;
    --sp-modal-border: rgba(37, 22, 15, 0.12);
    --sp-modal-shadow: 0 30px 70px -25px rgba(37, 22, 15, 0.22);

    /* Component: Token Count */
    --sp-token-bg: rgba(217, 119, 87, 0.1);
    --sp-token-color: var(--sp-text-secondary);

    /* Component: Folder Tree */
    --sp-folder-hover-bg: rgba(217, 119, 87, 0.1);
    --sp-folder-active-bg: rgba(217, 119, 87, 0.16);
    --sp-folder-icon-color: var(--sp-text-tertiary);

    /* Component: Pro pill */
    --sp-pro-gradient: linear-gradient(135deg, rgba(217, 119, 87, 0.95), rgba(180, 83, 9, 0.85));
    --sp-pro-shadow: 0 10px 22px rgba(217, 119, 87, 0.2);
}

/* Dark-mode tokens applied either by explicit data-theme or system preference */
:root[data-theme='dark'] {
    --sp-bg-primary: #1a100c;
    --sp-bg-secondary: #241711;
    --sp-bg-tertiary: #2a1a14;
    --sp-bg-hover: #332018;

    --sp-card-bg: #20130e;
    --sp-card-bg-hover: #2a1a14;
    --sp-card-border: rgba(251, 191, 153, 0.07);
    --sp-window-chrome-bg: radial-gradient(900px 650px at 10% 0%, rgba(217, 119, 87, 0.14), transparent 55%),
        radial-gradient(800px 600px at 95% 10%, rgba(180, 83, 9, 0.1), transparent 55%),
        linear-gradient(135deg, #1a100c, #241711);
    --sp-panel-shadow: 0 40px 85px -35px rgba(0, 0, 0, 0.9);
    --sp-toolbar-bg: rgba(26, 16, 12, 0.72);
    --sp-toolbar-border: rgba(251, 191, 153, 0.1);

    --sp-glass-bg: rgba(32, 19, 14, 0.72);
    --sp-glass-bg-strong: rgba(32, 19, 14, 0.9);
    --sp-glass-border: rgba(251, 191, 153, 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: #fde9df;
    --sp-text-secondary: rgba(253, 233, 223, 0.76);
    --sp-text-tertiary: rgba(253, 233, 223, 0.54);

    --sp-border: rgba(251, 191, 153, 0.12);
    --sp-border-light: rgba(251, 191, 153, 0.08);
    --sp-border-subtle: rgba(251, 191, 153, 0.06);

    --sp-accent: #d97757;
    --sp-accent-hover: #fdba74;
    --sp-accent-light: rgba(217, 119, 87, 0.15);
    --sp-accent-glow: rgba(217, 119, 87, 0.33);

    /* Primary (alias for accent, used for pins/highlights) */
    --sp-primary: var(--sp-accent);
    --sp-primary-rgb: 217, 119, 87;

    --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(217, 119, 87, 0.14), rgba(180, 83, 9, 0.1));
    --sp-ai-gradient: linear-gradient(135deg, rgba(253, 233, 223, 0.08), rgba(253, 233, 223, 0.03));
    --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(217, 119, 87, 0.18), transparent 58%),
        radial-gradient(900px 700px at 95% 10%, rgba(180, 83, 9, 0.14), transparent 58%),
        linear-gradient(180deg, #1a100c 0%, #120b08 100%);

    /* Component: Avatar */
    --sp-avatar-bg: linear-gradient(135deg, rgba(217, 119, 87, 0.22), rgba(180, 83, 9, 0.18));
    --sp-avatar-color: #fde9df;
    --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(217, 119, 87, 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(217, 119, 87, 0.1);
    --sp-tab-hover-color: #fde9df;

    /* 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(217, 119, 87, 0.1);
    --sp-message-user-label: #fdba74;
    --sp-message-assistant-label: #34d399;
    --sp-message-preview: rgba(253, 233, 223, 0.72);

    /* Component: Structure View */
    --sp-structure-h2: #f3c8b7;
    --sp-structure-h3: #d79f89;

    /* Component: Modals */
    --sp-modal-bg: #241711;
    --sp-modal-border: rgba(251, 191, 153, 0.08);
    --sp-modal-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);

    /* Component: Token Count */
    --sp-token-bg: rgba(217, 119, 87, 0.1);
    --sp-token-color: rgba(253, 233, 223, 0.72);

    /* Component: Folder Tree */
    --sp-folder-hover-bg: rgba(217, 119, 87, 0.1);
    --sp-folder-active-bg: rgba(217, 119, 87, 0.16);
    --sp-folder-icon-color: rgba(253, 233, 223, 0.5);

    /* Status Colors (dark mode) */
    --sp-info: var(--sp-accent);
    --sp-info-light: rgba(217, 119, 87, 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(217, 119, 87, 0.2);
    --sp-badge-info-text: #fdba74;

    /* Component: Pro pill */
    --sp-pro-gradient: linear-gradient(135deg, rgba(217, 119, 87, 0.95), rgba(180, 83, 9, 0.85));
    --sp-pro-shadow: 0 12px 26px rgba(217, 119, 87, 0.18);
}