/* =========================================
   THEMES SYSTEM - QuotesCosmos
   ========================================= */

/* 1. DEFAULT THEME (Current Design) */
:root,
[data-theme="default"] {
    /* Colors */
    --bg-body: #ffffff;
    --bg-card: #ffffff;
    --bg-header: rgba(255, 255, 255, 0.85);
    /* Glassy header */
    --text-main: #333333;
    --text-muted: #666666;
    --border-color: rgba(0, 0, 0, 0.08);
    --accent-color: #6f17f9;
    /* Purple from gradient */

    /* Fonts */
    --font-branding: "Josefin Sans", sans-serif;
    --font-logo: var(--font-branding);
    --font-heading: "Poppins", sans-serif;
    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Shapes */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-pill: 9999px;

    /* Effects */
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-hover: 0 4px 20px rgba(0, 0, 0, 0.08);
    --backdrop-blur: blur(12px);

    /* Gradients */
    --gradient-branding: radial-gradient(circle at 3.3% 62%, #F7C89A 0%, #FFAF1A 8%, #F85E3C 18%, #B32471 36%, #9B30B3 63%, #7130B0 83%, #6F17F9 100%);
    --bg-image: url('/im/background.svg');
    /* Mesh gradient */
}

/* 2. GEN Z (Neo-Brutalist) */
[data-theme="gen-z"] {
    --bg-body: #f0f0f0;
    --bg-card: #ffffff;
    --bg-header: #ffffff;
    --text-main: #000000;
    --text-muted: #444444;
    --border-color: #000000;
    --accent-color: #ccff00;
    /* Neon Lime */

    --font-branding: "Archivo Black", sans-serif;
    /* Intense bold */
    --font-heading: "Archivo Black", sans-serif;
    --font-body: "Space Mono", monospace;

    --radius-sm: 0px;
    --radius-md: 0px;
    --radius-lg: 0px;
    --radius-pill: 0px;

    --shadow-card: 4px 4px 0px #000000;
    /* Hard shadow */
    --shadow-hover: 6px 6px 0px #000000;
    --backdrop-blur: none;

    --gradient-branding: linear-gradient(45deg, #ccff00, #ff00ff);
    --bg-image: none;
    /* Plain or noisy */
}

/* 3. DIGITAL NATIVES (Glassmorphism / Apple-esque) */
[data-theme="digital"] {
    --bg-body: #f2f2f7;
    /* iOS Light Gray */
    --bg-card: rgba(255, 255, 255, 0.65);
    --bg-header: rgba(255, 255, 255, 0.5);
    --text-main: #1d1d1f;
    --text-muted: #86868b;
    --border-color: rgba(255, 255, 255, 0.4);
    --accent-color: #007aff;
    /* iOS Blue */

    --font-branding: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    --radius-sm: 12px;
    --radius-md: 20px;
    --radius-lg: 24px;
    --radius-pill: 9999px;

    --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.06);
    --shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.12);
    --backdrop-blur: blur(20px) saturate(180%);

    --gradient-branding: linear-gradient(135deg, #a8c0ff, #3f2b96);
    --bg-image: url('https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?auto=format&fit=crop&q=80&w=2000');
    /* Soft abstract */
}

/* Note: Using external URL for prototype. User can replace. */

/* 4. CLASSIC (Serif / Paper) */
[data-theme="classic"] {
    --bg-body: #f9f5f0;
    /* Cream/Paper */
    --bg-card: #ffffff;
    --bg-header: #f9f5f0;
    --text-main: #2c2c2c;
    --text-muted: #595959;
    --border-color: #dcd6ce;
    --accent-color: #c5a059;
    /* Gold/Bronze */

    --font-branding: "Josefin Sans", sans-serif;
    --font-heading: "Playfair Display", serif;
    --font-body: "Merriweather", serif;

    --radius-sm: 2px;
    --radius-md: 2px;
    --radius-lg: 2px;
    --radius-pill: 9999px;

    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.05);
    --shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.08);
    --backdrop-blur: none;

    --gradient-branding: linear-gradient(to right, #2c2c2c, #555);
    --bg-image: none;
}

/* 5. MODERN INTERNATIONAL (Swiss Style) */
[data-theme="modern"] {
    --bg-body: #ffffff;
    --bg-card: #ffffff;
    --bg-header: #ffffff;
    --text-main: #000000;
    --text-muted: #666666;
    --border-color: #e5e5e5;
    --accent-color: #ff3300;
    /* Int'l Orange */

    --font-branding: "Inter", "Montserrat", "Helvetica Neue", Arial, sans-serif;
    --font-heading: "Inter", "Helvetica Neue", Arial, sans-serif;
    --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;

    --radius-sm: 0px;
    --radius-md: 0px;
    --radius-lg: 0px;
    --radius-pill: 0px;

    --shadow-card: none;
    /* Flat */
    --shadow-hover: none;
    --backdrop-blur: none;

    --gradient-branding: #000;
    /* Monochrome */
    --bg-image: linear-gradient(to right, #f0f0f0 1px, transparent 1px), linear-gradient(to bottom, #f0f0f0 1px, transparent 1px);
    /* Grid pattern in body logic? Needs background-size */
}

/* 6. COSMIC FUTURE (Dark / Glowing) */
[data-theme="cosmic"] {
    --bg-body: #030014;
    /* Deep Space */
    --bg-card: rgba(20, 10, 40, 0.6);
    --bg-header: rgba(3, 0, 20, 0.8);
    --text-main: #e0e0ff;
    --text-muted: #a0a0cc;
    --border-color: rgba(100, 200, 255, 0.3);
    --accent-color: #00ffff;
    /* Cyan */

    --font-branding: "Orbitron", sans-serif;
    --font-heading: "Rajdhani", sans-serif;
    --font-body: "Exo 2", sans-serif;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-pill: 9999px;

    --shadow-card: 0 0 15px rgba(0, 255, 255, 0.15);
    /* Glow */
    --shadow-hover: 0 0 25px rgba(0, 255, 255, 0.3);
    --backdrop-blur: blur(16px);

    --gradient-branding: linear-gradient(90deg, #00ffff, #ff00ff);
    --bg-image: radial-gradient(circle at center, #1a0b2e 0%, #000000 100%);
}

/* 7. MIDNIGHT (OLED / True Dark Mode) */
[data-theme="midnight"] {
    --bg-body: #000000;
    --bg-card: #111111;
    --bg-header: rgba(0, 0, 0, 0.85);
    --text-main: #e0e0e0;
    --text-muted: #888888;
    --border-color: #222222;
    --accent-color: #ffffff;
    /* Stark white accent for high contrast */

    --font-branding: "Inter", sans-serif;
    --font-heading: "Inter", sans-serif;
    --font-body: "Inter", sans-serif;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-pill: 9999px;

    --shadow-card: 0 2px 8px rgba(255, 255, 255, 0.05);
    --shadow-hover: 0 4px 20px rgba(255, 255, 255, 0.1);
    --backdrop-blur: blur(12px);

    --gradient-branding: linear-gradient(90deg, #ffffff, #888888);
    --bg-image: none;
}

/* =========================================
   8. DARK MODE
   Universal dark theme that preserves
   existing font, radius, and blur settings.
   ========================================= */
[data-theme="dark"] {
    --bg-body: #0f0f14;
    --bg-card: #1a1a24;
    --bg-header: rgba(15, 15, 20, 0.92);
    --text-main: #e8e6f0;
    --text-muted: #9997a8;
    --border-color: rgba(255, 255, 255, 0.08);
    --accent-color: #9b6dff;

    /* Keep existing font, radius, blur variables from :root */

    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-hover: 0 4px 20px rgba(0, 0, 0, 0.4);
    --gradient-branding: radial-gradient(circle at 3.3% 62%, #2a1a3e 0%, #3d1f6d 36%, #6F17F9 100%);
    --bg-image: none;
}

/* =========================================
   AUTO DARK MODE
   Mirrors [data-theme="dark"] when the
   user's OS is set to dark mode.
   ========================================= */
@media (prefers-color-scheme: dark) {
    [data-theme="auto"] {
        --bg-body: #0f0f14;
        --bg-card: #1a1a24;
        --bg-header: rgba(15, 15, 20, 0.92);
        --text-main: #e8e6f0;
        --text-muted: #9997a8;
        --border-color: rgba(255, 255, 255, 0.08);
        --accent-color: #9b6dff;

        --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.3);
        --shadow-hover: 0 4px 20px rgba(0, 0, 0, 0.4);
        --gradient-branding: radial-gradient(circle at 3.3% 62%, #2a1a3e 0%, #3d1f6d 36%, #6F17F9 100%);
        --bg-image: none;
    }
}

/* =========================================
   THEME-SPECIFIC OVERRIDES
   ========================================= */

/* Utility to apply background size for grid if modern */
[data-theme="modern"] body {
    background-size: 40px 40px;
}

[data-theme="gen-z"] .person-card,
[data-theme="gen-z"] .btn {
    border: 2px solid black !important;
}