/* ==========================================================================
   SOCIAL SQUARE DESIGN TOKENS
   All CSS custom properties for the platform theme.
   These tokens are the single source of truth — all component styles
   reference these variables. The admin Theme Control Panel modifies
   these values; plugins consume them for consistent styling.
   ========================================================================== */

/* --------------------------------------------------------------------------
   GOOGLE FONTS IMPORT
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Inter:wght@100..900&family=JetBrains+Mono:wght@100..800&family=Sora:wght@100..800&family=Space+Grotesk:wght@300..700&display=swap');

/* --------------------------------------------------------------------------
   ROOT TOKENS — LIGHT MODE (DEFAULT)
   -------------------------------------------------------------------------- */
:root {

    /* ---- Font Families ---- */
    --ss-font-heading: 'Space Grotesk', system-ui, -apple-system, sans-serif;
    --ss-font-body: 'DM Sans', system-ui, -apple-system, sans-serif;
    --ss-font-display: 'Sora', system-ui, -apple-system, sans-serif;
    --ss-font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
    --ss-font-ui: 'Inter', system-ui, -apple-system, sans-serif;

    /* ---- Font Weights ---- */
    --ss-weight-thin: 200;
    --ss-weight-light: 300;
    --ss-weight-regular: 400;
    --ss-weight-medium: 500;
    --ss-weight-semibold: 600;
    --ss-weight-bold: 700;
    --ss-weight-extrabold: 800;

    /* ---- Type Scale ---- */
    --ss-type-display: 3.5rem;
    --ss-type-hero: 3rem;
    --ss-type-h1: 2.25rem;
    --ss-type-h2: 1.75rem;
    --ss-type-h3: 1.375rem;
    --ss-type-h4: 1.125rem;
    --ss-type-h5: 1rem;
    --ss-type-h6: 0.875rem;
    --ss-type-body-lg: 1.125rem;
    --ss-type-body: 1rem;
    --ss-type-body-sm: 0.875rem;
    --ss-type-caption: 0.75rem;
    --ss-type-micro: 0.625rem;
    --ss-type-ui: 0.875rem;
    --ss-type-ui-sm: 0.75rem;
    --ss-type-mono: 0.875rem;
    --ss-type-mono-lg: 1.5rem;

    /* ---- Primary Palette (Indigo Electric) ---- */
    --ss-primary-50: #EEF2FF;
    --ss-primary-100: #E0E7FF;
    --ss-primary-200: #C7D2FE;
    --ss-primary-300: #A5B4FC;
    --ss-primary-400: #818CF8;
    --ss-primary-500: #6366F1;
    --ss-primary-600: #4F46E5;
    --ss-primary-700: #4338CA;
    --ss-primary-800: #3730A3;
    --ss-primary-900: #312E81;
    --ss-primary-950: #1E1B4B;

    /* ---- Secondary Palette (Electric Cyan) ---- */
    --ss-secondary-50: #ECFEFF;
    --ss-secondary-100: #CFFAFE;
    --ss-secondary-200: #A5F3FC;
    --ss-secondary-300: #67E8F9;
    --ss-secondary-400: #22D3EE;
    --ss-secondary-500: #06B6D4;
    --ss-secondary-600: #0891B2;
    --ss-secondary-700: #0E7490;
    --ss-secondary-800: #155E75;
    --ss-secondary-900: #164E63;
    --ss-secondary-950: #083344;

    /* ---- Tertiary Palette (Vivid Violet) ---- */
    --ss-tertiary-50: #F5F3FF;
    --ss-tertiary-100: #EDE9FE;
    --ss-tertiary-200: #DDD6FE;
    --ss-tertiary-300: #C4B5FD;
    --ss-tertiary-400: #A78BFA;
    --ss-tertiary-500: #8B5CF6;
    --ss-tertiary-600: #7C3AED;
    --ss-tertiary-700: #6D28D9;
    --ss-tertiary-800: #5B21B6;
    --ss-tertiary-900: #4C1D95;
    --ss-tertiary-950: #2E1065;

    /* ---- Neutral Palette (Cool Slate) ---- */
    --ss-neutral-white: #FFFFFF;
    --ss-neutral-50: #F8FAFC;
    --ss-neutral-100: #F1F5F9;
    --ss-neutral-200: #E2E8F0;
    --ss-neutral-300: #CBD5E1;
    --ss-neutral-400: #94A3B8;
    --ss-neutral-500: #64748B;
    --ss-neutral-600: #475569;
    --ss-neutral-700: #334155;
    --ss-neutral-800: #1E293B;
    --ss-neutral-900: #0F172A;
    --ss-neutral-950: #020617;

    /* ---- Semantic: Success ---- */
    --ss-success-light: #ECFDF5;
    --ss-success-base: #10B981;
    --ss-success-dark: #065F46;
    --ss-success-border: #6EE7B7;

    /* ---- Semantic: Warning ---- */
    --ss-warning-light: #FFFBEB;
    --ss-warning-base: #F59E0B;
    --ss-warning-dark: #92400E;
    --ss-warning-border: #FCD34D;

    /* ---- Semantic: Error ---- */
    --ss-error-light: #FEF2F2;
    --ss-error-base: #EF4444;
    --ss-error-dark: #991B1B;
    --ss-error-border: #FCA5A5;

    /* ---- Semantic: Info ---- */
    --ss-info-light: #EFF6FF;
    --ss-info-base: #3B82F6;
    --ss-info-dark: #1E40AF;
    --ss-info-border: #93C5FD;

    /* ---- Highlight ---- */
    --ss-highlight-bg: #FEF9C3;
    --ss-highlight-text: #854D0E;

    /* ---- SquareCoin Colors ---- */
    --ss-coin-primary: #FBBF24;
    --ss-coin-secondary: #F59E0B;
    --ss-coin-highlight: #FDE68A;
    --ss-coin-bg: #FFFBEB;
    --ss-coin-text: #92400E;
    --ss-coin-positive: #10B981;
    --ss-coin-negative: #EF4444;
    --ss-coin-pending: #F59E0B;

    /* ---- Hub Accent Colors ---- */
    --ss-hub-musicverse: #7C3AED;
    --ss-hub-musicverse-subtle: #EDE9FE;
    --ss-hub-videosquare: #F43F5E;
    --ss-hub-videosquare-subtle: #FFF1F2;
    --ss-hub-snapics: #F59E0B;
    --ss-hub-snapics-subtle: #FFFBEB;
    --ss-hub-radiosquare: #10B981;
    --ss-hub-radiosquare-subtle: #ECFDF5;
    --ss-hub-thoughts: #0EA5E9;
    --ss-hub-thoughts-subtle: #F0F9FF;
    --ss-hub-eventsquare: #FB7185;
    --ss-hub-eventsquare-subtle: #FFF1F2;
    --ss-hub-squarestay: #14B8A6;
    --ss-hub-squarestay-subtle: #F0FDFA;
    --ss-hub-careersquare: #1D4ED8;
    --ss-hub-careersquare-subtle: #EFF6FF;
    --ss-hub-squarechat: #6366F1;
    --ss-hub-squarechat-subtle: #EEF2FF;

    /* Active hub — set by body class, defaults to primary */
    --ss-hub-active: var(--ss-primary-500);
    --ss-hub-active-subtle: var(--ss-primary-50);

    /* ---- User Tier Colors ---- */
    --ss-tier-vibesetter: #64748B;
    --ss-tier-vibesetter-ring: #CBD5E1;
    --ss-tier-creator: #6366F1;
    --ss-tier-creator-ring: #A5B4FC;
    --ss-tier-professional: #1D4ED8;
    --ss-tier-professional-ring: #93C5FD;
    --ss-tier-business: #0F172A;
    --ss-tier-business-accent: #FBBF24;

    /* ---- Surface Colors (Light Mode) ---- */
    --ss-page-bg: #F8FAFC;
    --ss-card-bg: #FFFFFF;
    --ss-card-bg-hover: #F8FAFC;
    --ss-card-bg-active: #F1F5F9;
    --ss-sidebar-bg: #FFFFFF;
    --ss-header-bg: #FFFFFF;
    --ss-header-border: #E2E8F0;
    --ss-footer-bg: #0F172A;
    --ss-footer-text: #CBD5E1;
    --ss-footer-link: #94A3B8;
    --ss-footer-link-hover: #FFFFFF;
    --ss-modal-bg: #FFFFFF;
    --ss-modal-backdrop: rgba(15, 23, 42, 0.5);
    --ss-dropdown-bg: #FFFFFF;
    --ss-dropdown-hover: #F1F5F9;
    --ss-dropdown-selected: #EEF2FF;
    --ss-tooltip-bg: #1E293B;
    --ss-tooltip-text: #F8FAFC;
    --ss-input-bg: #FFFFFF;
    --ss-input-bg-focus: #FFFFFF;
    --ss-input-bg-disabled: #F1F5F9;
    --ss-table-row-alt: #F8FAFC;
    --ss-code-bg: #F1F5F9;
    --ss-selection-bg: #C7D2FE;

    /* ---- Text Colors (Light Mode) ---- */
    --ss-text-primary: #0F172A;
    --ss-text-secondary: #475569;
    --ss-text-tertiary: #64748B;
    --ss-text-placeholder: #94A3B8;
    --ss-text-disabled: #CBD5E1;
    --ss-text-inverse: #FFFFFF;
    --ss-text-link: #6366F1;
    --ss-text-link-hover: #4F46E5;
    --ss-text-link-visited: #7C3AED;

    /* ---- Border Colors ---- */
    --ss-border-default: #E2E8F0;
    --ss-border-strong: #CBD5E1;
    --ss-border-subtle: #F1F5F9;
    --ss-border-focus: #6366F1;

    /* ---- Spacing Scale ---- */
    --ss-spacing-xxs: 0.125rem;
    --ss-spacing-xs: 0.25rem;
    --ss-spacing-sm: 0.5rem;
    --ss-spacing-md: 1rem;
    --ss-spacing-lg: 1.5rem;
    --ss-spacing-xl: 2rem;
    --ss-spacing-2xl: 3rem;
    --ss-spacing-3xl: 4rem;
    --ss-spacing-4xl: 6rem;

    /* ---- Border Radius ---- */
    --ss-radius-none: 0;
    --ss-radius-sm: 4px;
    --ss-radius-md: 8px;
    --ss-radius-lg: 12px;
    --ss-radius-xl: 16px;
    --ss-radius-2xl: 24px;
    --ss-radius-pill: 9999px;
    --ss-radius-circle: 50%;

    /* ---- Border Width ---- */
    --ss-border-hairline: 1px;
    --ss-border-thin: 1.5px;
    --ss-border-medium: 2px;
    --ss-border-thick: 3px;
    --ss-border-heavy: 4px;

    /* ---- Shadows (Light Mode) ---- */
    --ss-shadow-none: none;
    --ss-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
    --ss-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
    --ss-shadow-md: 0 4px 6px rgba(15, 23, 42, 0.07), 0 2px 4px rgba(15, 23, 42, 0.05);
    --ss-shadow-lg: 0 10px 15px rgba(15, 23, 42, 0.08), 0 4px 6px rgba(15, 23, 42, 0.04);
    --ss-shadow-xl: 0 20px 25px rgba(15, 23, 42, 0.10), 0 8px 10px rgba(15, 23, 42, 0.05);
    --ss-shadow-glow-primary: 0 0 20px rgba(99, 102, 241, 0.25);
    --ss-shadow-glow-coin: 0 0 16px rgba(251, 191, 36, 0.30);

    /* ---- Opacity ---- */
    --ss-opacity-disabled: 0.5;
    --ss-opacity-overlay: 0.5;
    --ss-opacity-hover: 0.04;
    --ss-opacity-frosted: 0.85;

    /* ---- Transitions ---- */
    --ss-transition-fast: 100ms ease-in-out;
    --ss-transition-normal: 200ms ease-in-out;
    --ss-transition-slow: 400ms ease-in-out;
    --ss-transition-bounce: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ---- Layout ---- */
    --ss-content-max-width: 1280px;
    --ss-content-max-width-wide: 1440px;
    --ss-content-max-width-narrow: 720px;
    --ss-header-height: 64px;
    --ss-bottom-nav-height: 56px;
    --ss-sidebar-width: 280px;
    --ss-player-height: 72px;
    --ss-player-height-mobile: 64px;

    /* ---- Z-Index Scale ---- */
    --ss-z-dropdown: 100;
    --ss-z-sticky: 200;
    --ss-z-header: 300;
    --ss-z-overlay: 400;
    --ss-z-modal: 500;
    --ss-z-popover: 600;
    --ss-z-tooltip: 700;
    --ss-z-notification: 800;
    --ss-z-player: 900;
    --ss-z-max: 9999;
}

/* --------------------------------------------------------------------------
   DARK MODE TOKENS
   Applied via class on <html> or <body>
   -------------------------------------------------------------------------- */
[data-theme="dark"],
.ss-dark-mode {
    --ss-page-bg: #020617;
    --ss-card-bg: #0F172A;
    --ss-card-bg-hover: #1E293B;
    --ss-card-bg-active: #334155;
    --ss-sidebar-bg: #0F172A;
    --ss-header-bg: #0F172A;
    --ss-header-border: #1E293B;
    --ss-footer-bg: #020617;
    --ss-footer-text: #94A3B8;
    --ss-modal-bg: #1E293B;
    --ss-modal-backdrop: rgba(0, 0, 0, 0.7);
    --ss-dropdown-bg: #1E293B;
    --ss-dropdown-hover: #334155;
    --ss-dropdown-selected: #312E81;
    --ss-tooltip-bg: #334155;
    --ss-tooltip-text: #F1F5F9;
    --ss-input-bg: #1E293B;
    --ss-input-bg-focus: #1E293B;
    --ss-input-bg-disabled: #0F172A;
    --ss-table-row-alt: #0F172A;
    --ss-code-bg: #1E293B;
    --ss-selection-bg: #3730A3;

    --ss-text-primary: #F1F5F9;
    --ss-text-secondary: #CBD5E1;
    --ss-text-tertiary: #94A3B8;
    --ss-text-placeholder: #64748B;
    --ss-text-disabled: #475569;
    --ss-text-inverse: #0F172A;
    --ss-text-link: #818CF8;
    --ss-text-link-hover: #A5B4FC;
    --ss-text-link-visited: #A78BFA;

    --ss-border-default: #334155;
    --ss-border-strong: #475569;
    --ss-border-subtle: #1E293B;
    --ss-border-focus: #818CF8;

    --ss-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.20);
    --ss-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.30), 0 1px 2px rgba(0, 0, 0, 0.20);
    --ss-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.30), 0 2px 4px rgba(0, 0, 0, 0.25);
    --ss-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.35), 0 4px 6px rgba(0, 0, 0, 0.25);
    --ss-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.40), 0 8px 10px rgba(0, 0, 0, 0.30);
    --ss-shadow-glow-primary: 0 0 24px rgba(129, 140, 248, 0.20);
    --ss-shadow-glow-coin: 0 0 20px rgba(251, 191, 36, 0.25);

    --ss-opacity-overlay: 0.7;

    --ss-coin-bg: #451A03;
    --ss-coin-text: #FDE68A;

    /* Dark mode hub accents — one stop lighter */
    --ss-hub-musicverse: #A78BFA;
    --ss-hub-videosquare: #FB7185;
    --ss-hub-snapics: #FBBF24;
    --ss-hub-radiosquare: #34D399;
    --ss-hub-thoughts: #38BDF8;
    --ss-hub-eventsquare: #FDA4AF;
    --ss-hub-squarestay: #2DD4BF;
    --ss-hub-careersquare: #60A5FA;
    --ss-hub-squarechat: #818CF8;

    color-scheme: dark;
}

/* --------------------------------------------------------------------------
   HUB-ACTIVE BODY CLASS OVERRIDES
   When a hub is active, the body gets a class like .ss-hub--musicverse
   which sets the active hub accent color for hub-specific button colors,
   active nav indicators, etc.
   -------------------------------------------------------------------------- */
body.ss-hub--musicverse    { --ss-hub-active: var(--ss-hub-musicverse);    --ss-hub-active-subtle: var(--ss-hub-musicverse-subtle); }
body.ss-hub--videosquare   { --ss-hub-active: var(--ss-hub-videosquare);   --ss-hub-active-subtle: var(--ss-hub-videosquare-subtle); }
body.ss-hub--snapics       { --ss-hub-active: var(--ss-hub-snapics);       --ss-hub-active-subtle: var(--ss-hub-snapics-subtle); }
body.ss-hub--radiosquare   { --ss-hub-active: var(--ss-hub-radiosquare);   --ss-hub-active-subtle: var(--ss-hub-radiosquare-subtle); }
body.ss-hub--thoughts      { --ss-hub-active: var(--ss-hub-thoughts);      --ss-hub-active-subtle: var(--ss-hub-thoughts-subtle); }
body.ss-hub--eventsquare   { --ss-hub-active: var(--ss-hub-eventsquare);   --ss-hub-active-subtle: var(--ss-hub-eventsquare-subtle); }
body.ss-hub--squarestay    { --ss-hub-active: var(--ss-hub-squarestay);    --ss-hub-active-subtle: var(--ss-hub-squarestay-subtle); }
body.ss-hub--careersquare  { --ss-hub-active: var(--ss-hub-careersquare);  --ss-hub-active-subtle: var(--ss-hub-careersquare-subtle); }
body.ss-hub--squarechat    { --ss-hub-active: var(--ss-hub-squarechat);    --ss-hub-active-subtle: var(--ss-hub-squarechat-subtle); }

/* --------------------------------------------------------------------------
   PREFERS REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    :root {
        --ss-transition-fast: 0ms;
        --ss-transition-normal: 0ms;
        --ss-transition-slow: 0ms;
        --ss-transition-bounce: 0ms;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* --------------------------------------------------------------------------
   PREFERS HIGH CONTRAST
   -------------------------------------------------------------------------- */
@media (prefers-contrast: more) {
    :root {
        --ss-border-default: #94A3B8;
        --ss-border-strong: #64748B;
        --ss-shadow-sm: none;
        --ss-shadow-md: none;
        --ss-shadow-lg: none;
    }
}

/* --------------------------------------------------------------------------
   AUTO DARK MODE (SYSTEM PREFERENCE)
   Only applies if no explicit data-theme is set
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --ss-page-bg: #020617;
        --ss-card-bg: #0F172A;
        --ss-card-bg-hover: #1E293B;
        --ss-header-bg: #0F172A;
        --ss-header-border: #1E293B;
        --ss-text-primary: #F1F5F9;
        --ss-text-secondary: #CBD5E1;
        --ss-text-tertiary: #94A3B8;
        --ss-text-link: #818CF8;
        --ss-text-link-hover: #A5B4FC;
        --ss-border-default: #334155;
        --ss-border-focus: #818CF8;
        --ss-input-bg: #1E293B;
        color-scheme: dark;
    }
}