/* SocialHub Design System - CSS Variables
   Apple + Linear + Notion Inspired Premium Theme
   Supports CSS-level Light/Dark themes using attributes and system preferences. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700&display=swap');

:root {
    /* Fonts */
    --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* Base Palette (Light Theme Defaults) */
    --color-primary: hsl(212, 100%, 48%);       /* Vibrant Apple Blue */
    --color-primary-hover: hsl(212, 100%, 40%);
    --color-primary-light: hsla(212, 100%, 48%, 0.08);
    --color-primary-glow: hsla(212, 100%, 48%, 0.25);
    
    --color-bg-base: #f9fafb;                  /* Subtle gray-white canvas */
    --color-bg-surface: rgba(255, 255, 255, 0.75); /* Glass surface */
    --color-bg-card: rgba(255, 255, 255, 0.85);
    --color-bg-sidebar: rgba(255, 255, 255, 0.5);
    --color-bg-input: rgba(255, 255, 255, 0.9);
    --color-bg-dropdown: rgba(255, 255, 255, 0.95);
    --color-bg-accent: #f3f4f6;                /* Subtle gray background */

    --color-border: rgba(0, 0, 0, 0.07);      /* Thin ultra-light border */
    --color-border-hover: rgba(0, 0, 0, 0.12);
    --color-border-focus: hsla(212, 100%, 48%, 0.4);

    --color-text-primary: #1d1d1f;            /* Apple Off-Black */
    --color-text-secondary: #6e6e73;          /* Apple Gray */
    --color-text-tertiary: #a1a1a6;           /* Light Gray secondary */
    --color-text-on-primary: #ffffff;

    /* Semantic Status Colors */
    --color-success: hsl(145, 63%, 42%);      /* Emerald */
    --color-success-light: hsla(145, 63%, 42%, 0.1);
    --color-warning: hsl(36, 100%, 48%);       /* Amber */
    --color-warning-light: hsla(36, 100%, 48%, 0.1);
    --color-danger: hsl(355, 84%, 55%);        /* Crimson */
    --color-danger-hover: hsl(355, 84%, 48%);
    --color-danger-light: hsla(355, 84%, 55%, 0.1);

    /* Grid & Layout Metrics */
    --sidebar-width: 260px;
    --sidebar-collapsed-width: 78px;
    --header-height: 70px;
    --max-content-width: 1440px;

    /* Border Radii */
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 30px;
    --radius-full: 9999px;

    /* Shadows (Extremely soft and premium) */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.03);
    --shadow-md: 0 8px 24px -4px rgba(0, 0, 0, 0.04), 0 2px 8px -2px rgba(0, 0, 0, 0.02);
    --shadow-lg: 0 20px 40px -10px rgba(0, 0, 0, 0.06), 0 4px 12px -4px rgba(0, 0, 0, 0.03);
    --shadow-glow: 0 0 20px -5px hsla(212, 100%, 48%, 0.4);

    /* Transitions */
    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    /* Glassmorphism Specs */
    --glass-blur: blur(14px) saturate(180%);
    --glass-background: rgba(255, 255, 255, 0.65);
    --glass-border: 1px solid rgba(255, 255, 255, 0.4);
}

/* Dark Mode Variables - Triggers automatically OR via manual class/attribute */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-bg-base: #0a0a0c;
        --color-bg-surface: rgba(18, 18, 22, 0.65);
        --color-bg-card: rgba(22, 22, 28, 0.8);
        --color-bg-sidebar: rgba(14, 14, 18, 0.5);
        --color-bg-input: rgba(28, 28, 36, 0.85);
        --color-bg-dropdown: rgba(24, 24, 30, 0.95);
        --color-bg-accent: #1e1e24;

        --color-border: rgba(255, 255, 255, 0.08);
        --color-border-hover: rgba(255, 255, 255, 0.15);
        --color-border-focus: hsla(212, 100%, 55%, 0.5);

        --color-text-primary: #f5f5f7;
        --color-text-secondary: #86868b;
        --color-text-tertiary: #606064;

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
        --shadow-md: 0 8px 24px -4px rgba(0, 0, 0, 0.3), 0 2px 8px -2px rgba(0, 0, 0, 0.2);
        --shadow-lg: 0 20px 40px -10px rgba(0, 0, 0, 0.4), 0 4px 12px -4px rgba(0, 0, 0, 0.2);

        --glass-background: rgba(18, 18, 22, 0.6);
        --glass-border: 1px solid rgba(255, 255, 255, 0.08);
    }
}

/* Manual Theme Toggle Overrides */
[data-theme="dark"] {
    --color-bg-base: #0a0a0c;
    --color-bg-surface: rgba(18, 18, 22, 0.65);
    --color-bg-card: rgba(22, 22, 28, 0.8);
    --color-bg-sidebar: rgba(14, 14, 18, 0.5);
    --color-bg-input: rgba(28, 28, 36, 0.85);
    --color-bg-dropdown: rgba(24, 24, 30, 0.95);
    --color-bg-accent: #1e1e24;

    --color-border: rgba(255, 255, 255, 0.08);
    --color-border-hover: rgba(255, 255, 255, 0.15);
    --color-border-focus: hsla(212, 100%, 55%, 0.5);

    --color-text-primary: #f5f5f7;
    --color-text-secondary: #86868b;
    --color-text-tertiary: #606064;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 8px 24px -4px rgba(0, 0, 0, 0.3), 0 2px 8px -2px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 20px 40px -10px rgba(0, 0, 0, 0.4), 0 4px 12px -4px rgba(0, 0, 0, 0.2);

    --glass-background: rgba(18, 18, 22, 0.6);
    --glass-border: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="light"] {
    --color-bg-base: #f9fafb;
    --color-bg-surface: rgba(255, 255, 255, 0.75);
    --color-bg-card: rgba(255, 255, 255, 0.85);
    --color-bg-sidebar: rgba(255, 255, 255, 0.5);
    --color-bg-input: rgba(255, 255, 255, 0.9);
    --color-bg-dropdown: rgba(255, 255, 255, 0.95);
    --color-bg-accent: #f3f4f6;

    --color-border: rgba(0, 0, 0, 0.07);
    --color-border-hover: rgba(0, 0, 0, 0.12);
    --color-border-focus: hsla(212, 100%, 48%, 0.4);

    --color-text-primary: #1d1d1f;
    --color-text-secondary: #6e6e73;
    --color-text-tertiary: #a1a1a6;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.03);
    --shadow-md: 0 8px 24px -4px rgba(0, 0, 0, 0.04), 0 2px 8px -2px rgba(0, 0, 0, 0.02);
    --shadow-lg: 0 20px 40px -10px rgba(0, 0, 0, 0.06), 0 4px 12px -4px rgba(0, 0, 0, 0.03);

    --glass-background: rgba(255, 255, 255, 0.65);
    --glass-border: 1px solid rgba(255, 255, 255, 0.4);
}