/* ═══════════════════════════════════════════════════════════════
   MEAUX THEME LIBRARY - Inner Animal Edition
   30+ High-End Color Themes with Meaux/Inner Animal Branding
   ═══════════════════════════════════════════════════════════════ */


/* DEFAULT THEME (Fallback) */
:root,
[data-theme="google-light"] {
    --bg-surface: #f8f9fa;
    --bg-panel: #ffffff;
    --color-primary: #1a73e8;
    --color-secondary: #e8f0fe;
    --color-accent: #ea4335;
    --color-text: #202124;
    --color-muted: #5f6368;
    --color-border: #dadce0;
    --shadow-soft: 0 1px 3px 0 rgba(60, 64, 67, 0.3), 0 4px 8px 3px rgba(60, 64, 67, 0.15);
    --radius: 12px;
}


/* ═══════════════════════════════════════════════════════════════
   CLAY COLLECTION
   ═══════════════════════════════════════════════════════════════ */


[data-theme="meaux-clay-light"] {
    --bg-surface: #f7f8fa;
    --bg-panel: #ffffff;
    --color-primary: #2563eb;
    --color-secondary: #7c3aed;
    --color-accent: #06b6d4;
    --color-text: #0f172a;
    --color-muted: #64748b;
    --color-border: rgba(0, 0, 0, 0.08);
    --shadow-clay: 12px 12px 24px rgba(0, 0, 0, 0.08), -12px -12px 24px #ffffff;
    --radius: 20px;
}


[data-theme="meaux-clay-dark"] {
    --bg-surface: #1a1f2e;
    --bg-panel: #242938;
    --color-primary: #7c3aed;
    --color-secondary: #ec4899;
    --color-accent: #06b6d4;
    --color-text: #e2e8f0;
    --color-muted: #94a3b8;
    --color-border: rgba(255, 255, 255, 0.1);
    --shadow-clay: 8px 8px 16px rgba(0, 0, 0, 0.4), -8px -8px 16px rgba(255, 255, 255, 0.02);
    --radius: 20px;
}


/* ═══════════════════════════════════════════════════════════════
   CLAY GLOBAL (User Requested High-Fidelity)
   ═══════════════════════════════════════════════════════════════ */

[data-theme="clay-global-light"] {
    --bg-surface: #ffffff;
    --bg-panel: #ffffff;
    --color-primary: #000000;
    --color-secondary: #333333;
    --color-accent: #000000;
    --color-text: #050505;
    --color-muted: #666666;
    --color-border: rgba(0, 0, 0, 0.1);
    --shadow-soft: none;
    --radius: 0px;
    --nav-bg: rgba(255, 255, 255, 0.8);
}

[data-theme="clay-global-dark"] {
    --bg-surface: #000000;
    --bg-panel: #111111;
    --color-primary: #ffffff;
    --color-secondary: #cccccc;
    --color-accent: #ffffff;
    --color-text: #ffffff;
    --color-muted: #888888;
    --color-border: rgba(255, 255, 255, 0.15);
    --shadow-soft: none;
    --radius: 0px;
    --nav-bg: rgba(0, 0, 0, 0.8);
}

/* Clay Global Specific Overrides */
[data-theme^="clay-global"] .nav-link {
    position: relative;
    font-weight: 500;
}

[data-theme^="clay-global"] .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 0;
    height: 1px;
    background-color: var(--color-primary);
    transition: width 0.3s ease;
}

[data-theme^="clay-global"] .nav-link:hover::after,
[data-theme^="clay-global"] .nav-link.active::after {
    width: 100%;
}

[data-theme^="clay-global"] .btn-primary {
    border-radius: 40px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 13px;
    padding: 14px 28px;
    font-weight: 600;
}

[data-theme^="clay-global"] .nav-link {
    /* Clean text style with underline */
    color: var(--color-text);
    opacity: 0.7;
    transition: opacity 0.2s, color 0.2s;
    text-decoration: none;
    font-weight: 500;
    padding: 8px 0;
    /* Reduced side padding, rely on gap */
    margin: 0 12px;
    position: relative;
}

[data-theme^="clay-global"] .nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-primary);
    transition: width 0.3s ease;
}

[data-theme^="clay-global"] .nav-link:hover,
[data-theme^="clay-global"] .nav-link.active {
    opacity: 1;
    color: var(--color-primary);
}

[data-theme^="clay-global"] .nav-link:hover::after,
[data-theme^="clay-global"] .nav-link.active::after {
    width: 100%;
}


/* ═══════════════════════════════════════════════════════════════
   PREMIUM MODERN
   ═══════════════════════════════════════════════════════════════ */


[data-theme="meaux-monochrome"] {
    --bg-surface: #ffffff;
    --bg-panel: #fafafa;
    --color-primary: #000000;
    --color-secondary: #171717;
    --color-accent: #404040;
    --color-text: #0a0a0a;
    --color-muted: #737373;
    --color-border: rgba(0, 0, 0, 0.1);
    --radius: 8px;
}


[data-theme="meaux-workflow"] {
    --bg-surface: #16181d;
    --bg-panel: #1c1f26;
    --color-primary: #5e6ad2;
    --color-secondary: #26b5ce;
    --color-accent: #95a2b3;
    --color-text: #e6edf3;
    --color-muted: #9ca3af;
    --color-border: rgba(255, 255, 255, 0.1);
    --radius: 12px;
}


[data-theme="meaux-productivity"] {
    --bg-surface: #ffffff;
    --bg-panel: #f7f6f3;
    --color-primary: #eb5757;
    --color-secondary: #f2994a;
    --color-accent: #6fcf97;
    --color-text: #37352f;
    --color-muted: #9b9a97;
    --color-border: rgba(0, 0, 0, 0.06);
    --radius: 6px;
}


/* ═══════════════════════════════════════════════════════════════
   APPLE ECOSYSTEM
   ═══════════════════════════════════════════════════════════════ */


[data-theme="meaux-ios-light"] {
    --bg-surface: #f5f5f7;
    --bg-panel: #ffffff;
    --color-primary: #007aff;
    --color-secondary: #5856d6;
    --color-accent: #34c759;
    --color-text: #1d1d1f;
    --color-muted: #86868b;
    --color-border: rgba(0, 0, 0, 0.1);
    --radius: 18px;
}


[data-theme="meaux-ios-dark"] {
    --bg-surface: #000000;
    --bg-panel: #1c1c1e;
    --color-primary: #0a84ff;
    --color-secondary: #5e5ce6;
    --color-accent: #30d158;
    --color-text: #ffffff;
    --color-muted: #98989d;
    --color-border: rgba(255, 255, 255, 0.15);
    --radius: 18px;
}


/* ═══════════════════════════════════════════════════════════════
   DEVELOPER TOOLS
   ═══════════════════════════════════════════════════════════════ */


[data-theme="meaux-code-dark"] {
    --bg-surface: #0d1117;
    --bg-panel: #161b22;
    --color-primary: #58a6ff;
    --color-secondary: #1f6feb;
    --color-accent: #79c0ff;
    --color-text: #c9d1d9;
    --color-muted: #8b949e;
    --color-border: rgba(240, 246, 252, 0.1);
    --radius: 6px;
}


[data-theme="meaux-browser"] {
    --bg-surface: #1e1e1e;
    --bg-panel: #2a2a2a;
    --color-primary: #8b5cf6;
    --color-secondary: #ec4899;
    --color-accent: #06b6d4;
    --color-text: #ffffff;
    --color-muted: #a1a1aa;
    --color-border: rgba(255, 255, 255, 0.1);
    --radius: 16px;
}


[data-theme="meaux-design"] {
    --bg-surface: #0a0a0a;
    --bg-panel: #1a1a1a;
    --color-primary: #0099ff;
    --color-secondary: #ff0080;
    --color-accent: #00ff99;
    --color-text: #ffffff;
    --color-muted: #999999;
    --color-border: rgba(255, 255, 255, 0.1);
    --radius: 12px;
}


[data-theme="meaux-creative"] {
    --bg-surface: #ffffff;
    --bg-panel: #f5f5f5;
    --color-primary: #0d99ff;
    --color-secondary: #f24e1e;
    --color-accent: #0acf83;
    --color-text: #1e1e1e;
    --color-muted: #6e6e6e;
    --color-border: rgba(0, 0, 0, 0.1);
    --radius: 8px;
}


[data-theme="meaux-knowledge"] {
    --bg-surface: #1e1e1e;
    --bg-panel: #2d2d2d;
    --color-primary: #7c3aed;
    --color-secondary: #8b5cf6;
    --color-accent: #a78bfa;
    --color-text: #dcddde;
    --color-muted: #b9bbbe;
    --color-border: rgba(255, 255, 255, 0.1);
    --radius: 8px;
}


[data-theme="meaux-galaxy"] {
    --bg-surface: #0a0e14;
    --bg-panel: #12171f;
    --color-primary: #7c3aed;
    --color-secondary: #2563eb;
    --color-accent: #ec4899;
    --color-text: #e2e8f0;
    --color-muted: #94a3b8;
    --color-border: rgba(124, 58, 237, 0.2);
    --radius: 16px;
}


[data-theme="meaux-adaptive"] {
    --bg-surface: #fef7ff;
    --bg-panel: #ffffff;
    --color-primary: #6750a4;
    --color-secondary: #7d5260;
    --color-accent: #006c4c;
    --color-text: #1c1b1f;
    --color-muted: #79747e;
    --color-border: rgba(0, 0, 0, 0.08);
    --radius: 16px;
}


[data-theme="meaux-workspace"] {
    --bg-surface: #ffffff;
    --bg-panel: #f8f8f8;
    --color-primary: #611f69;
    --color-secondary: #1264a3;
    --color-accent: #2eb67d;
    --color-text: #1d1c1d;
    --color-muted: #616061;
    --color-border: rgba(0, 0, 0, 0.13);
    --radius: 8px;
}


[data-theme="meaux-music"] {
    --bg-surface: #121212;
    --bg-panel: #181818;
    --color-primary: #1db954;
    --color-secondary: #1ed760;
    --color-accent: #ffffff;
    --color-text: #ffffff;
    --color-muted: #b3b3b3;
    --color-border: rgba(255, 255, 255, 0.1);
    --radius: 8px;
}


/* ═══════════════════════════════════════════════════════════════
   EXTENDED COLLECTION
   ═══════════════════════════════════════════════════════════════ */


[data-theme="meaux-system"] {
    --bg-surface: #f5f5f7;
    --bg-panel: #ffffff;
    --color-primary: #007aff;
    --color-secondary: #34c759;
    --color-accent: #ff9500;
    --color-text: #1d1d1f;
    --color-muted: #86868b;
    --color-border: rgba(0, 0, 0, 0.1);
    --radius: 12px;
}


[data-theme="meaux-spatial"] {
    --bg-surface: #000000;
    --bg-panel: #0a0a0a;
    --color-primary: #0a84ff;
    --color-secondary: #ffffff;
    --color-accent: #30d158;
    --color-text: #ffffff;
    --color-muted: #98989d;
    --color-border: rgba(255, 255, 255, 0.15);
    --radius: 20px;
}


[data-theme="meaux-editor"] {
    --bg-surface: #1e1e1e;
    --bg-panel: #252526;
    --color-primary: #007acc;
    --color-secondary: #0098ff;
    --color-accent: #4ec9b0;
    --color-text: #d4d4d4;
    --color-muted: #858585;
    --color-border: rgba(255, 255, 255, 0.1);
    --radius: 4px;
}


[data-theme="meaux-launcher"] {
    --bg-surface: #1c1c1e;
    --bg-panel: #2c2c2e;
    --color-primary: #ff6363;
    --color-secondary: #30d158;
    --color-accent: #0a84ff;
    --color-text: #ffffff;
    --color-muted: #98989d;
    --color-border: rgba(255, 255, 255, 0.15);
    --radius: 12px;
}


[data-theme="meaux-arctic"] {
    --bg-surface: #2e3440;
    --bg-panel: #3b4252;
    --color-primary: #88c0d0;
    --color-secondary: #81a1c1;
    --color-accent: #5e81ac;
    --color-text: #eceff4;
    --color-muted: #d8dee9;
    --color-border: rgba(216, 222, 233, 0.1);
    --radius: 8px;
}


[data-theme="meaux-vampire"] {
    --bg-surface: #282a36;
    --bg-panel: #44475a;
    --color-primary: #bd93f9;
    --color-secondary: #ff79c6;
    --color-accent: #8be9fd;
    --color-text: #f8f8f2;
    --color-muted: #6272a4;
    --color-border: rgba(98, 114, 164, 0.3);
    --radius: 8px;
}


[data-theme="meaux-neon"] {
    --bg-surface: #1a1b26;
    --bg-panel: #24283b;
    --color-primary: #7aa2f7;
    --color-secondary: #bb9af7;
    --color-accent: #7dcfff;
    --color-text: #c0caf5;
    --color-muted: #9aa5ce;
    --color-border: rgba(122, 162, 247, 0.2);
    --radius: 8px;
}


[data-theme="meaux-solar"] {
    --bg-surface: #002b36;
    --bg-panel: #073642;
    --color-primary: #268bd2;
    --color-secondary: #2aa198;
    --color-accent: #859900;
    --color-text: #839496;
    --color-muted: #586e75;
    --color-border: rgba(131, 148, 150, 0.2);
    --radius: 6px;
}


[data-theme="meaux-terminal"] {
    --bg-surface: #0a0e14;
    --bg-panel: #12171f;
    --color-primary: #00ff00;
    --color-secondary: #33ff33;
    --color-accent: #00cc00;
    --color-text: #00ff00;
    --color-muted: #00aa00;
    --color-border: rgba(0, 255, 0, 0.2);
    --radius: 8px;
}


[data-theme="meaux-minimal"] {
    --bg-surface: #ffffff;
    --bg-panel: #fafafa;
    --color-primary: #000000;
    --color-secondary: #666666;
    --color-accent: #999999;
    --color-text: #000000;
    --color-muted: #666666;
    --color-border: rgba(0, 0, 0, 0.1);
    --radius: 8px;
}


/* ═══════════════════════════════════════════════════════════════
   SPECIALTY THEMES
   ═══════════════════════════════════════════════════════════════ */


[data-theme="meaux-glass-orange"] {
    --bg-surface: #ffffff;
    --bg-panel: rgba(255, 255, 255, 0.7);
    --color-primary: #FF6B00;
    --color-secondary: #339999;
    --color-accent: #00D4FF;
    --color-text: #1a1a1a;
    --color-muted: #666666;
    --color-border: rgba(255, 255, 255, 0.3);
    --radius: 20px;
    --glass-blur: 20px;
}


[data-theme="meaux-ops-dark"] {
    --bg-surface: #020617;
    --bg-panel: #0f172a;
    --color-primary: #00D4FF;
    --color-secondary: #0077FF;
    --color-accent: #8b5cf6;
    --color-text: #e2e8f0;
    --color-muted: #94a3b8;
    --color-border: rgba(0, 212, 255, 0.2);
    --radius: 16px;
}


[data-theme="meaux-command"] {
    --bg-surface: #0A0E14;
    --bg-panel: #12171F;
    --color-primary: #38BDF8;
    --color-secondary: #0EA5E9;
    --color-accent: #A855F7;
    --color-text: #E6EDF3;
    --color-muted: #8B949E;
    --color-border: rgba(56, 189, 248, 0.2);
    --radius: 12px;
}


/* ═══════════════════════════════════════════════════════════════
   INNER ANIMAL SIGNATURE THEMES
   ═══════════════════════════════════════════════════════════════ */


[data-theme="inner-animal-light"] {
    --bg-surface: #f8f9fa;
    --bg-panel: #ffffff;
    --color-primary: #2563eb;
    --color-secondary: #7c3aed;
    --color-accent: #ec4899;
    --color-text: #0f172a;
    --color-muted: #64748b;
    --color-border: rgba(0, 0, 0, 0.08);
    --radius: 16px;
}

[data-theme="inner-animal-orange"] {
    --bg-surface: #FFF9F5;
    --bg-panel: #FFFFFF;
    --color-primary: #FF6B25;
    --color-secondary: #FF8C42;
    --color-accent: #00D4FF;
    --color-text: #0a0a1a;
    --color-muted: #64748b;
    --color-border: rgba(255, 107, 37, 0.15);
    --radius: 20px;
    --nav-bg: rgba(255, 255, 255, 0.85);
    --footer-bg: #0a0e14;
    --footer-text: #f9fafb;
}


[data-theme="inner-animal-dark"] {
    --bg-surface: #0a0e14;
    --bg-panel: #12171f;
    --color-primary: #00D4FF;
    --color-secondary: #7c3aed;
    --color-accent: #ec4899;
    --color-text: #e2e8f0;
    --color-muted: #94a3b8;
    --color-border: rgba(0, 212, 255, 0.2);
    --radius: 16px;
}


[data-theme="inner-animal-wild"] {
    --bg-surface: #1a1f2e;
    --bg-panel: #242938;
    --color-primary: #ec4899;
    --color-secondary: #f97316;
    --color-accent: #8b5cf6;
    --color-text: #ffffff;
    --color-muted: #a1a1aa;
    --color-border: rgba(236, 72, 153, 0.2);
    --radius: 20px;
}


[data-theme="inner-animal-zen"] {
    --bg-surface: #ffffff;
    --bg-panel: #fafafa;
    --color-primary: #10b981;
    --color-secondary: #06b6d4;
    --color-accent: #8b5cf6;
    --color-text: #1a1a1a;
    --color-muted: #737373;
    --color-border: rgba(0, 0, 0, 0.08);
    --radius: 12px;
}


[data-theme="inner-animal-fire"] {
    --bg-surface: #1a1614;
    --bg-panel: #2a2420;
    --color-primary: #f97316;
    --color-secondary: #dc2626;
    --color-accent: #fbbf24;
    --color-text: #fef3c7;
    --color-muted: #a0a0a0;
    --color-border: rgba(249, 115, 22, 0.2);
    --radius: 16px;
}


[data-theme="inner-animal-ocean"] {
    --bg-surface: #0a1929;
    --bg-panel: #132f4c;
    --color-primary: #00b4d8;
    --color-secondary: #0077b6;
    --color-accent: #90e0ef;
    --color-text: #e0f2fe;
    --color-muted: #94a3b8;
    --color-border: rgba(0, 180, 216, 0.2);
    --radius: 16px;
}


/* ═══════════════════════════════════════════════════════════════
   NEW COLLECTION: CYBER SERIES (10 New Themes)
   ═══════════════════════════════════════════════════════════════ */


[data-theme="meaux-cyber-punk"] {
    --bg-surface: #0f0f23;
    --bg-panel: #1a1a2e;
    --color-primary: #ff006e;
    --color-secondary: #00f5ff;
    --color-accent: #ffbe0b;
    --color-text: #ffffff;
    --color-muted: #a0a0b0;
    --color-border: rgba(255, 0, 110, 0.3);
    --radius: 4px;
}


[data-theme="meaux-neon-city"] {
    --bg-surface: #0a0a0f;
    --bg-panel: #16161f;
    --color-primary: #ff00ff;
    --color-secondary: #00ffff;
    --color-accent: #ffff00;
    --color-text: #ffffff;
    --color-muted: #9090a0;
    --color-border: rgba(255, 0, 255, 0.3);
    --radius: 8px;
}


[data-theme="meaux-synthwave"] {
    --bg-surface: #2b213a;
    --bg-panel: #241b35;
    --color-primary: #ff00aa;
    --color-secondary: #00d9ff;
    --color-accent: #ffd319;
    --color-text: #ffffff;
    --color-muted: #b8b8c8;
    --color-border: rgba(255, 0, 170, 0.3);
    --radius: 12px;
}


[data-theme="meaux-hacker-green"] {
    --bg-surface: #000000;
    --bg-panel: #0a0f0a;
    --color-primary: #00ff41;
    --color-secondary: #00cc33;
    --color-accent: #39ff14;
    --color-text: #00ff41;
    --color-muted: #00aa2b;
    --color-border: rgba(0, 255, 65, 0.2);
    --radius: 6px;
}


[data-theme="meaux-matrix-rain"] {
    --bg-surface: #000000;
    --bg-panel: #001a00;
    --color-primary: #00ff00;
    --color-secondary: #00dd00;
    --color-accent: #33ff33;
    --color-text: #00ff00;
    --color-muted: #00bb00;
    --color-border: rgba(0, 255, 0, 0.3);
    --radius: 4px;
}


[data-theme="meaux-midnight-blue"] {
    --bg-surface: #0c1445;
    --bg-panel: #1a2456;
    --color-primary: #4d7cfe;
    --color-secondary: #7b68ee;
    --color-accent: #00bfff;
    --color-text: #e0e7ff;
    --color-muted: #9ca3c0;
    --color-border: rgba(77, 124, 254, 0.2);
    --radius: 16px;
}


[data-theme="meaux-sunset-glow"] {
    --bg-surface: #1a0f0a;
    --bg-panel: #2a1f1a;
    --color-primary: #ff6b35;
    --color-secondary: #f7931e;
    --color-accent: #ffd60a;
    --color-text: #fff5e6;
    --color-muted: #c0a090;
    --color-border: rgba(255, 107, 53, 0.2);
    --radius: 20px;
}


[data-theme="meaux-forest-deep"] {
    --bg-surface: #0a1f0f;
    --bg-panel: #1a2f1f;
    --color-primary: #2ecc71;
    --color-secondary: #27ae60;
    --color-accent: #52c41a;
    --color-text: #e8f5e9;
    --color-muted: #90b090;
    --color-border: rgba(46, 204, 113, 0.2);
    --radius: 14px;
}


[data-theme="meaux-desert-sand"] {
    --bg-surface: #2a1f15;
    --bg-panel: #3a2f25;
    --color-primary: #d4a574;
    --color-secondary: #c19a6b;
    --color-accent: #f4a460;
    --color-text: #fef5e7;
    --color-muted: #b09070;
    --color-border: rgba(212, 165, 116, 0.2);
    --radius: 18px;
}


[data-theme="meaux-storm-gray"] {
    --bg-surface: #1c1c1e;
    --bg-panel: #2c2c2e;
    --color-primary: #5ac8fa;
    --color-secondary: #64d2ff;
    --color-accent: #30d5c8;
    --color-text: #f2f2f7;
    --color-muted: #98989d;
    --color-border: rgba(90, 200, 250, 0.2);
    --radius: 12px;
}


/* ═══════════════════════════════════════════════════════════════
   SHARED COMPONENT STYLES
   ═══════════════════════════════════════════════════════════════ */


[data-theme] .btn-primary {
    background: var(--color-primary);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: var(--radius, 8px);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}


[data-theme] .card {
    background: var(--bg-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius, 12px);
    padding: 24px;
    transition: all 0.3s ease;
}


[data-theme^="meaux-glass-"] .card {
    backdrop-filter: blur(var(--glass-blur, 20px));
    -webkit-backdrop-filter: blur(var(--glass-blur, 20px));
}


[data-theme] body {
    background: var(--bg-surface);
    color: var(--color-text);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.6;
}

/* Responsive Utilities */
@media (max-width: 900px) {
    .desktop-nav {
        display: none !important;
    }

    .mobile-menu-btn {
        display: block !important;
    }

    .container {
        padding: 0 20px !important;
    }
}

@media (min-width: 901px) {
    .desktop-nav {
        display: flex !important;
    }

    .mobile-menu-btn {
        display: none !important;
    }
}

/* Header Layout Styles */
.nav.glass-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    z-index: 1000;
    border-bottom: 1px solid var(--color-border);
    transition: all 0.3s ease;
}

.nav.glass-nav.scrolled {
    height: 70px;
    background: var(--nav-bg) !important;
}

.container-flex {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand-logo {
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.desktop-nav .nav-list {
    display: flex;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.header-actions {
    display: flex;
    gap: 20px;
    align-items: center;
}

.nav-link-subtle {
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    color: var(--color-muted);
    transition: color 0.2s;
}

.nav-link-subtle:hover {
    color: var(--color-text);
}

.mobile-menu {
    display: none;
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--color-border);
    padding: 24px;
    z-index: 999;
}

.mobile-nav-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mobile-auth-links {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.full-width {
    width: 100%;
    text-align: center;
    display: block;
}

.mobile-menu-btn {
    background: transparent;
    border: none;
    color: var(--color-text);
    font-size: 24px;
    cursor: pointer;
    padding: 8px;
}

[data-theme] .glass-nav {
    background: var(--nav-bg, rgba(10, 14, 26, 0.8));
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
}

[data-theme] .contrast-footer {
    background: var(--footer-bg, #0a0e14);
    color: var(--footer-text, #f9fafb);
}


/* ═══════════════════════════════════════════════════════════════
   TACTICAL THEME FAMILY (DevOps Edition)
   - Greys / Greens / Tans / Browns
   - Google/iOS vibe: clean, high contrast, not "gamer"
   - Drop-in presets for data-theme switching
   ═══════════════════════════════════════════════════════════════ */

/* Optional: if you're using the v2 token system */
[data-theme^="tactical-"] {
    --radius: 14px;
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 20px;
    --blur: 16px;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .06);
    --shadow-2: 0 18px 70px rgba(0, 0, 0, .14);
    --focus: 0 0 0 3px color-mix(in oklab, var(--color-primary) 22%, transparent);
}

/* =============================================================
   1) TACTICAL: SANDSTONE LIGHT (default "ops calm")
   ============================================================= */
[data-theme="tactical-sandstone"] {
    --bg-surface: #f5f2ea;
    --bg-panel: #ffffff;

    --color-text: #101418;
    --color-muted: rgba(16, 20, 24, .62);

    --color-primary: #2f6f55;
    /* muted ops green */
    --color-secondary: #6b5b3e;
    /* tan-brown */
    --color-accent: #b08968;
    /* sand accent */

    --color-border: rgba(16, 20, 24, .10);
    --shadow-soft: 0 1px 2px rgba(16, 20, 24, .06), 0 16px 55px rgba(16, 20, 24, .10);
}

/* =============================================================
   2) TACTICAL: CONCRETE LIGHT (Google-ish, crisp)
   ============================================================= */
[data-theme="tactical-concrete"] {
    --bg-surface: #f4f5f7;
    --bg-panel: #ffffff;

    --color-text: #0f172a;
    --color-muted: rgba(15, 23, 42, .58);

    --color-primary: #2b6a4a;
    /* restrained green */
    --color-secondary: #6b7280;
    /* gray */
    --color-accent: #8b7b5a;
    /* khaki */

    --color-border: rgba(2, 6, 23, .10);
    --shadow-soft: 0 1px 2px rgba(2, 6, 23, .06), 0 18px 60px rgba(2, 6, 23, .10);
}

/* =============================================================
   3) TACTICAL: OLIVE NOTE (warm, Notion-like, "field journal")
   ============================================================= */
[data-theme="tactical-olive-note"] {
    --bg-surface: #f6f4ef;
    --bg-panel: #fbfaf7;

    --color-text: #121317;
    --color-muted: rgba(18, 19, 23, .60);

    --color-primary: #3b6b3f;
    /* olive */
    --color-secondary: #7a6a4f;
    /* paper tan */
    --color-accent: #9a7b4f;
    /* leather */

    --color-border: rgba(18, 19, 23, .10);
    --shadow-soft: 0 1px 2px rgba(18, 19, 23, .06), 0 14px 46px rgba(18, 19, 23, .10);
    --radius: 12px;
}

/* =============================================================
   4) TACTICAL: KHAKI GLASS LIGHT (subtle glass, iOS vibe)
   ============================================================= */
[data-theme="tactical-khaki-glass"] {
    --bg-surface: #f3f1ea;
    --bg-panel: rgba(255, 255, 255, .78);

    --color-text: #0b0f14;
    --color-muted: rgba(11, 15, 20, .58);

    --color-primary: #2d6a55;
    /* green */
    --color-secondary: #8b7b5a;
    /* khaki */
    --color-accent: #6b5b3e;
    /* brown */

    --color-border: rgba(11, 15, 20, .10);
    --shadow-soft: 0 1px 2px rgba(0, 0, 0, .06), 0 18px 70px rgba(0, 0, 0, .12);
    --glass-blur: 18px;
    --radius: 16px;
}

/* =============================================================
   5) TACTICAL: STEALTH GRAY (dark, modern, low-glare)
   ============================================================= */
[data-theme="tactical-stealth"] {
    --bg-surface: #0b0f14;
    --bg-panel: #101723;

    --color-text: rgba(255, 255, 255, .92);
    --color-muted: rgba(255, 255, 255, .60);

    --color-primary: #4ade80;
    /* soft green pop */
    --color-secondary: #94a3b8;
    /* slate */
    --color-accent: #b89b72;
    /* sand highlight */

    --color-border: rgba(255, 255, 255, .12);
    --shadow-soft: 0 1px 2px rgba(0, 0, 0, .35), 0 22px 90px rgba(0, 0, 0, .55);
}

/* =============================================================
   6) TACTICAL: NIGHT OPS (deep green bias, "terminal but premium")
   ============================================================= */
[data-theme="tactical-night-ops"] {
    --bg-surface: #060a08;
    --bg-panel: #0b1210;

    --color-text: rgba(240, 255, 247, .92);
    --color-muted: rgba(240, 255, 247, .60);

    --color-primary: #22c55e;
    /* ops green */
    --color-secondary: #86efac;
    /* lighter green */
    --color-accent: #a78bfa;
    /* tiny purple for "system status" */

    --color-border: rgba(34, 197, 94, .20);
    --shadow-soft: 0 1px 2px rgba(0, 0, 0, .40), 0 24px 100px rgba(0, 0, 0, .60);
    --radius: 14px;
}

/* =============================================================
   7) TACTICAL: RANGER (green + brown, field-ready)
   ============================================================= */
[data-theme="tactical-ranger"] {
    --bg-surface: #0f1412;
    --bg-panel: #171f1b;

    --color-text: rgba(255, 255, 255, .92);
    --color-muted: rgba(255, 255, 255, .62);

    --color-primary: #3fbf7f;
    /* ranger green */
    --color-secondary: #a78b73;
    /* brown-tan */
    --color-accent: #eab308;
    /* "warning" yellow but tasteful */

    --color-border: rgba(255, 255, 255, .12);
    --shadow-soft: 0 1px 2px rgba(0, 0, 0, .40), 0 22px 85px rgba(0, 0, 0, .55);
}

/* =============================================================
   8) TACTICAL: DESERT NIGHT (brown-biased dark, premium)
   ============================================================= */
[data-theme="tactical-desert-night"] {
    --bg-surface: #0f0b07;
    --bg-panel: #17110c;

    --color-text: rgba(255, 245, 235, .92);
    --color-muted: rgba(255, 245, 235, .62);

    --color-primary: #34d399;
    /* green indicator */
    --color-secondary: #c4a484;
    /* sand */
    --color-accent: #f59e0b;
    /* amber */

    --color-border: rgba(196, 164, 132, .22);
    --shadow-soft: 0 1px 2px rgba(0, 0, 0, .45), 0 24px 100px rgba(0, 0, 0, .65);
    --radius: 16px;
}

/* =============================================================
   9) TACTICAL: GRAPHITE PRO (Google dark, super clean)
   ============================================================= */
[data-theme="tactical-graphite"] {
    --bg-surface: #0f1115;
    --bg-panel: #151922;

    --color-text: rgba(255, 255, 255, .92);
    --color-muted: rgba(255, 255, 255, .58);

    --color-primary: #60a5fa;
    /* calm "system blue" */
    --color-secondary: #34d399;
    /* green success */
    --color-accent: #a3a3a3;
    /* neutral */

    --color-border: rgba(255, 255, 255, .10);
    --shadow-soft: 0 1px 2px rgba(0, 0, 0, .35), 0 22px 90px rgba(0, 0, 0, .55);
    --radius: 12px;
}

/* =============================================================
   10) TACTICAL: SLATE SAGE (light, muted, executive)
   ============================================================= */
[data-theme="tactical-slate-sage"] {
    --bg-surface: #f2f4f3;
    --bg-panel: #ffffff;

    --color-text: #0f172a;
    --color-muted: rgba(15, 23, 42, .58);

    --color-primary: #2f6f55;
    /* sage green */
    --color-secondary: #64748b;
    /* slate */
    --color-accent: #a98467;
    /* warm tan */

    --color-border: rgba(2, 6, 23, .10);
    --shadow-soft: 0 1px 2px rgba(2, 6, 23, .06), 0 18px 60px rgba(2, 6, 23, .10);
    --radius: 14px;
}

/* =============================================================
   Tactical helpers (optional): status colors that fit the family
   ============================================================= */
[data-theme^="tactical-"] {
    --ok: #22c55e;
    --warn: #f59e0b;
    --bad: #ef4444;
}


/* ═══════════════════════════════════════════════════════════════
   UTILITY CLASSES: SHARED COMPONENTS
   ═══════════════════════════════════════════════════════════════ */

.glass-nav {
    background: var(--nav-bg, rgba(255, 255, 255, 0.8)) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--color-border) !important;
    transition: all 0.3s ease;
}

.glass-nav.scrolled {
    background: var(--bg-surface) !important;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
}

.contrast-footer {
    background: var(--footer-bg, #0a0e14) !important;
    color: var(--footer-text, #f9fafb) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 80px 40px 40px;
}

.contrast-footer h3,
.contrast-footer h4 {
    color: var(--color-primary) !important;
}

.contrast-footer a {
    color: var(--footer-text) !important;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.contrast-footer a:hover {
    opacity: 1;
}