:root {
    /* ------------------------------------------------------------------
   GHOST PRODUCER DESIGN SYSTEM - TOKENS
   Theme: Neon Dark (Reference: Stitch)
   Version: 2.0 - Dynamic Variables Support
   ------------------------------------------------------------------ */

    @layer tokens, base, components, dashboard, pages, utilities, overrides;

    /* =================================================================
       PRIMARY COLOR SYSTEM (Admin Configurable)
       ================================================================= */
    --gp-primary-neon: #00FF41;
    --gp-primary-hover: #33FF66;
    --gp-primary-rgb: 0, 255, 65;
    --gp-primary: var(--gp-primary-neon);
    /* Alias for consistency */

    /* Primary Opacity Variants */
    --gp-primary-10: rgba(var(--gp-primary-rgb), 0.1);
    --gp-primary-15: rgba(var(--gp-primary-rgb), 0.15);
    --gp-primary-20: rgba(var(--gp-primary-rgb), 0.2);
    --gp-primary-30: rgba(var(--gp-primary-rgb), 0.3);
    --gp-primary-50: rgba(var(--gp-primary-rgb), 0.5);
    --gp-primary-80: rgba(var(--gp-primary-rgb), 0.8);
    --gp-primary-dim: rgba(var(--gp-primary-rgb), 0.8);

    /* =================================================================
       ACCENT COLORS (Admin Configurable)
       ================================================================= */
    --gp-accent-purple: #8A2BE2;
    --gp-accent-rgb: 138, 43, 226;
    --gp-accent-10: rgba(var(--gp-accent-rgb), 0.1);
    --gp-accent-15: rgba(var(--gp-accent-rgb), 0.15);
    --gp-accent-20: rgba(var(--gp-accent-rgb), 0.2);
    --gp-accent-30: rgba(var(--gp-accent-rgb), 0.3);

    --gp-accent-blue: #00C2FF;
    --gp-accent-yellow: #FFD600;

    /* =================================================================
       DANGER/ERROR COLOR SYSTEM (Admin Configurable)
       ================================================================= */
    --gp-danger-color: #FF003C;
    --gp-accent-red: var(--gp-danger-color);
    /* alias — same as --gp-danger-color */
    --gp-danger-rgb: 255, 0, 60;
    --gp-danger-10: rgba(var(--gp-danger-rgb), 0.1);
    --gp-danger-20: rgba(var(--gp-danger-rgb), 0.2);
    --gp-danger-30: rgba(var(--gp-danger-rgb), 0.3);

    /* =================================================================
       BACKGROUNDS (Admin Configurable)
       ================================================================= */
    --gp-bg-deep: #000000;
    --gp-bg-sidebar: #050505;
    --gp-bg-card: #0A0A0A;
    --gp-bg-input: rgba(255, 255, 255, 0.03);
    --gp-bg-surface: #0A0A0A;

    /* =================================================================
       TEXT COLORS (Admin Configurable)
       ================================================================= */
    --gp-text-main: #FFFFFF;
    --gp-text-muted: #A1A1AA;
    --gp-text-dark: #000000;
    --gp-text-primary: var(--gp-text-main);
    /* Alias for consistency */

    /* =================================================================
       SIDEBAR SYSTEM (Admin Configurable)
       ================================================================= */
    --gp-sidebar-bg: var(--gp-bg-sidebar);
    --gp-sidebar-text: var(--gp-text-muted);
    --gp-sidebar-text-hover: var(--gp-text-main);
    --gp-sidebar-text-active: var(--gp-primary-neon);
    --gp-sidebar-active-bg: var(--gp-primary-10);
    --gp-sidebar-border: var(--gp-primary-neon);

    /* =================================================================
       BUTTON SYSTEM (Admin Configurable)
       ================================================================= */
    --gp-btn-primary-bg: var(--gp-primary-neon);
    --gp-btn-primary-hover: var(--gp-primary-hover);
    --gp-btn-primary-text: var(--gp-text-dark);
    --gp-btn-secondary-bg: transparent;
    --gp-btn-secondary-border: var(--gp-border-light);
    --gp-btn-secondary-text: var(--gp-text-muted);
    --gp-btn-danger-bg: var(--gp-danger-10);
    --gp-btn-danger-text: var(--gp-danger-color);
    --gp-btn-danger-border: var(--gp-danger-20);

    /* =================================================================
       BORDERS & EFFECTS
       ================================================================= */
    --gp-border-light: rgba(255, 255, 255, 0.08);
    --gp-border-neon: var(--gp-primary-30);
    --gp-border-purple: var(--gp-accent-30);
    --gp-border: var(--gp-border-light);

    /* Glassmorphism */
    --gp-glass-bg: rgba(15, 15, 15, 0.7);
    --gp-glass-blur: blur(12px);
    --gp-glass-border: 1px solid rgba(255, 255, 255, 0.05);

    /* Shadows */
    --gp-shadow-card: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
    --gp-shadow-neon: 0 0 15px var(--gp-primary-15);
    --gp-shadow-purple: 0 0 15px var(--gp-accent-15, rgba(138, 43, 226, 0.15));
    --gp-shadow-glow: 0 0 20px var(--gp-primary-50);

    /* =================================================================
       BORDER RADIUS (Admin Configurable Base)
       ================================================================= */
    --gp-radius-base: 8px;
    --gp-radius-sm: calc(var(--gp-radius-base) * 0.5);
    --gp-radius-md: var(--gp-radius-base);
    --gp-radius-lg: calc(var(--gp-radius-base) * 1.5);
    --gp-radius-xl: calc(var(--gp-radius-base) * 2);
    --gp-radius-2xl: calc(var(--gp-radius-base) * 3);
    --gp-radius-full: 9999px;

    /* =================================================================
       SPACING
       ================================================================= */
    --gp-spacing-xs: 4px;
    --gp-spacing-sm: 8px;
    --gp-spacing-md: 16px;
    --gp-spacing-lg: 24px;
    --gp-spacing-xl: 32px;

    /* Backward-compat aliases — prefer --gp-spacing-* in new code */
    --gp-space-xs: var(--gp-spacing-xs);
    --gp-space-sm: var(--gp-spacing-sm);
    --gp-space-md: var(--gp-spacing-md);
    --gp-space-lg: var(--gp-spacing-lg);
    --gp-space-xl: var(--gp-spacing-xl);

    /* =================================================================
       LAYOUT
       ================================================================= */
    --gp-container-max: 1140px;
    --gp-container-narrow: 800px;

    /* =================================================================
       TYPOGRAPHY
       ================================================================= */
    --gp-font-main: 'Plus Jakarta Sans', sans-serif;
    --gp-font-mono: 'JetBrains Mono', monospace;

    /* =================================================================
       ANIMATION
       ================================================================= */
    --gp-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --gp-transition-fast: 0.2s ease;
    --gp-transition-normal: 0.3s ease;

    /* =================================================================
       WOOCOMMERCE FORM OVERRIDES
       These variables override WooCommerce default form styles
       to prevent white fallback values from being applied
       ================================================================= */
    --wc-form-color-background: rgba(0, 0, 0, 0.25);
    --wc-form-color-text: #FFFFFF;
    --wc-form-border-color: rgba(255, 255, 255, 0.08);
    --wc-form-border-radius: 10px;
    --wc-form-border-width: 1px;
}

/* Dark Mode Reset/Base */
body.ghost-dashboard {
    background-color: var(--gp-bg-deep);
    color: var(--gp-text-main);
    font-family: var(--gp-font-main);
    -webkit-font-smoothing: antialiased;
}