/* ==========================================================================
   TikNovel Theme - Design System Variables
   Inspired by TikTok & FeelAI Novelist Modern UI
   ========================================================================== */

:root {
    /* Base Font Stacks */
    --font-sans: 'Outfit', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Outfit', 'Plus Jakarta Sans', sans-serif;
    --font-serif: 'Merriweather', Georgia, serif;

    /* Theme Brand & Accents */
    --gdwp-primary: #f59e0b;
    --gdwp-primary-hover: #d97706;
    --gdwp-primary-rgb: 245, 158, 11;
    --gdwp-primary-gradient: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
    
    /* TikTok Accents */
    --tik-pink: #fe2c55;
    --tik-pink-hover: #e02447;
    --tik-cyan: #25f4ee;
    --tik-cyan-hover: #00d2cc;
    --tik-gradient: linear-gradient(135deg, #fe2c55 0%, #ff007a 50%, #25f4ee 100%);

    /* VIP Gold Palette */
    --gold-100: #fef3c7;
    --gold-300: #fcd34d;
    --gold-400: #fbbf24;
    --gold-500: #f59e0b;
    --gold-600: #d97706;
    --gold-gradient: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
    --gold-glow: 0 0 16px rgba(245, 158, 11, 0.45);

    /* Silver & Bronze Ranks */
    --silver-gradient: linear-gradient(135deg, #e2e8f0 0%, #94a3b8 100%);
    --silver-glow: 0 0 14px rgba(148, 163, 184, 0.4);
    --bronze-gradient: linear-gradient(135deg, #fed7aa 0%, #c2410c 100%);
    --bronze-glow: 0 0 14px rgba(194, 65, 12, 0.4);

    /* Default Dark Mode (Cinematic AMOLED) */
    --gdwp-bg-body: #05070d;
    --gdwp-bg-canvas: #000000;
    --gdwp-card-bg: #0c101c;
    --gdwp-surface-elevated: #121727;
    --gdwp-surface-hover: #192035;
    --gdwp-glass-bg: rgba(12, 16, 28, 0.78);
    --gdwp-glass-header: rgba(5, 7, 13, 0.88);
    --gdwp-glass-bottom-nav: rgba(5, 7, 13, 0.92);

    --gdwp-border-color: rgba(255, 255, 255, 0.08);
    --gdwp-border-focus: rgba(245, 158, 11, 0.5);
    --gdwp-border-light: rgba(255, 255, 255, 0.05);

    --gdwp-text-color: #f1f5f9;
    --gdwp-text-heading: #ffffff;
    --gdwp-text-muted: #94a3b8;
    --gdwp-text-subtle: #64748b;

    /* Spacing & Radii */
    --gdwp-radius-sm: 0.5rem;   /* 8px */
    --gdwp-radius: 0.875rem;    /* 14px */
    --gdwp-radius-lg: 1.125rem; /* 18px */
    --gdwp-radius-xl: 1.5rem;   /* 24px */
    --gdwp-radius-pill: 9999px;

    /* Shadows & Glows */
    --gdwp-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
    --gdwp-shadow-card: 0 4px 20px rgba(0, 0, 0, 0.5);
    --gdwp-shadow-hover: 0 10px 30px rgba(0, 0, 0, 0.65), 0 0 15px rgba(245, 158, 11, 0.15);
    --gdwp-shadow-modal: 0 25px 60px -15px rgba(0, 0, 0, 0.85);

    /* Dimensions */
    --header-height: 64px;
    --mobile-bottom-nav-height: 64px;
    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Light Mode Overrides (if toggled) */
html:not(.dark-mode) body:not(.dark-mode) {
    --gdwp-bg-body: #f4f6fb;
    --gdwp-bg-canvas: #ffffff;
    --gdwp-card-bg: #ffffff;
    --gdwp-surface-elevated: #ffffff;
    --gdwp-surface-hover: #f1f5f9;
    --gdwp-glass-bg: rgba(255, 255, 255, 0.88);
    --gdwp-glass-header: rgba(255, 255, 255, 0.92);
    --gdwp-glass-bottom-nav: rgba(255, 255, 255, 0.95);

    --gdwp-border-color: #e2e8f0;
    --gdwp-border-focus: rgba(245, 158, 11, 0.5);
    --gdwp-border-light: #f1f5f9;

    --gdwp-text-color: #1e293b;
    --gdwp-text-heading: #0f172a;
    --gdwp-text-muted: #64748b;
    --gdwp-text-subtle: #94a3b8;

    --gdwp-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
    --gdwp-shadow-card: 0 4px 16px rgba(0, 0, 0, 0.06);
    --gdwp-shadow-hover: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Dark Mode is Default & Enforced when .dark-mode is active */
.dark-mode {
    color-scheme: dark;
}