/* ==========================================================================
   Design System Tokens — AMOLED Dark System & Clean Slate Light
   ========================================================================== */

:root, [data-theme="dark"] {
    /* Color Tokens (AMOLED Pure Pitch Black) */
    --bg-app:        #000000;   /* pure AMOLED pitch black */
    --bg-sidebar:    #000000;   /* seamless pure black rail and list */
    --bg-surface:    #090D16;   /* ultra-deep surface cards & inputs */
    --bg-surface-2:  #111724;   /* hover, secondary buttons, avatar circles */
    --bg-elevated:   #161E30;   /* menus, modals, tooltips */
    
    --border:        rgba(255, 255, 255, 0.09);
    --border-strong: rgba(255, 255, 255, 0.18);
    
    --text-primary:  #FFFFFF;
    --text-secondary:#94A3B8;
    --text-muted:    #64748B;
    
    --accent:        #3B82F6;   /* primary actions, links, toggles */
    --accent-hover:  #2563EB;
    --accent-violet: #8B5CF6;
    
    --success:       #10B981;   /* online dot, "Privacy" headings */
    --warning:       #F59E0B;
    --danger:        #EF4444;
    --focus-ring:    0 0 0 3px rgba(59, 130, 246, 0.4);

    /* AMOLED Gradient Accents */
    --grad-brand:    linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
    --grad-banner:   linear-gradient(135deg, #1E3A8A 0%, #4338CA 55%, #6D28D9 100%);
    --grad-surface:  linear-gradient(180deg, rgba(59, 130, 246, 0.1) 0%, rgba(139, 92, 246, 0.04) 100%);
    --grad-sidebar:  linear-gradient(180deg, #000000 0%, #030509 100%);
    --grad-border:   linear-gradient(135deg, rgba(59, 130, 246, 0.6), rgba(139, 92, 246, 0.6));
    --grad-avatar:   linear-gradient(135deg, #1E3A8A, #4C1D95);
    --grad-text:     linear-gradient(90deg, #60A5FA, #A78BFA);

    /* Typography Scale */
    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    /* Spacing Scale */
    --space-4:  4px;
    --space-8:  8px;
    --space-12: 12px;
    --space-16: 16px;
    --space-20: 20px;
    --space-24: 24px;
    --space-32: 32px;
    --space-48: 48px;

    /* Shape & Radii */
    --radius-sm: 6px;
    --radius-md: 10px;    /* inputs and buttons */
    --radius-lg: 16px;    /* cards, message bubbles */
    --radius-xl: 24px;    /* profile card, large panels */
    --radius-full: 999px; /* pills and avatars */

    /* AMOLED Deep Contrast Shadows */
    --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.8), 0 0 1px rgba(255, 255, 255, 0.12);
    --shadow-elevated: 0 16px 48px rgba(0, 0, 0, 0.95);
    --shadow-glow: 0 0 24px rgba(59, 130, 246, 0.45);

    /* Transitions */
    --ease-normal: 150ms cubic-bezier(0.16, 1, 0.3, 1);
    --ease-panel:  250ms cubic-bezier(0.16, 1, 0.3, 1);

    /* Z-Index Hierarchy */
    --z-sidebar: 50;
    --z-header: 40;
    --z-dropdown: 100;
    --z-modal: 500;
    --z-story-viewer: 800;
    --z-toast: 1000;
}

/* Light Theme Override (Crisp Slate, Pure White, Vibrant Accents) */
[data-theme="light"] {
    --bg-app:        #F8FAFC;
    --bg-sidebar:    #FFFFFF;
    --bg-surface:    #FFFFFF;
    --bg-surface-2:  #F1F5F9;
    --bg-elevated:   #FFFFFF;
    
    --border:        rgba(15, 23, 42, 0.08);
    --border-strong: rgba(15, 23, 42, 0.16);
    
    --text-primary:  #0F172A;
    --text-secondary:#475569;
    --text-muted:    #94A3B8;
    
    --grad-surface:  linear-gradient(180deg, rgba(59, 130, 246, 0.08) 0%, rgba(139, 92, 246, 0.03) 100%);
    --grad-sidebar:  linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
    --shadow-card:   0 1px 3px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.04);
    --shadow-elevated: 0 12px 32px rgba(15, 23, 42, 0.12);
    --shadow-glow:   0 6px 20px rgba(59, 130, 246, 0.25);
}