/* ============================================
   INSTADM Theme System CSS
   Theme picker with 15 color themes
   Font, padding, and display size adjustments
   ============================================ */

/* ============================================
   THEME VARIABLES (Override in data-theme)
   ============================================ */

/* Default - Blue */
:root,
[data-color-theme="blue"] {
    --theme-primary-h: 225;
    --theme-primary-s: 100%;
    --theme-primary-l: 50%;
}

/* Indigo */
[data-color-theme="indigo"] {
    --theme-primary-h: 243;
    --theme-primary-s: 75%;
    --theme-primary-l: 58%;
}

/* Purple */
[data-color-theme="purple"] {
    --theme-primary-h: 270;
    --theme-primary-s: 76%;
    --theme-primary-l: 55%;
}

/* Pink */
[data-color-theme="pink"] {
    --theme-primary-h: 330;
    --theme-primary-s: 81%;
    --theme-primary-l: 60%;
}

/* Rose */
[data-color-theme="rose"] {
    --theme-primary-h: 350;
    --theme-primary-s: 89%;
    --theme-primary-l: 60%;
}

/* Red */
[data-color-theme="red"] {
    --theme-primary-h: 0;
    --theme-primary-s: 84%;
    --theme-primary-l: 60%;
}

/* Orange */
[data-color-theme="orange"] {
    --theme-primary-h: 25;
    --theme-primary-s: 95%;
    --theme-primary-l: 53%;
}

/* Amber */
[data-color-theme="amber"] {
    --theme-primary-h: 38;
    --theme-primary-s: 92%;
    --theme-primary-l: 50%;
}

/* Yellow */
[data-color-theme="yellow"] {
    --theme-primary-h: 48;
    --theme-primary-s: 96%;
    --theme-primary-l: 53%;
}

/* Lime */
[data-color-theme="lime"] {
    --theme-primary-h: 84;
    --theme-primary-s: 81%;
    --theme-primary-l: 44%;
}

/* Green */
[data-color-theme="green"] {
    --theme-primary-h: 142;
    --theme-primary-s: 71%;
    --theme-primary-l: 45%;
}

/* Emerald */
[data-color-theme="emerald"] {
    --theme-primary-h: 160;
    --theme-primary-s: 84%;
    --theme-primary-l: 39%;
}

/* Teal */
[data-color-theme="teal"] {
    --theme-primary-h: 174;
    --theme-primary-s: 84%;
    --theme-primary-l: 38%;
}

/* Cyan */
[data-color-theme="cyan"] {
    --theme-primary-h: 188;
    --theme-primary-s: 94%;
    --theme-primary-l: 43%;
}

/* Sky */
[data-color-theme="sky"] {
    --theme-primary-h: 199;
    --theme-primary-s: 89%;
    --theme-primary-l: 48%;
}

/* White - Minimal/Clean accent */
[data-color-theme="white"] {
    --theme-primary-h: 0;
    --theme-primary-s: 0%;
    --theme-primary-l: 95%;
}

/* Black - Sleek/Dark accent */
[data-color-theme="black"] {
    --theme-primary-h: 0;
    --theme-primary-s: 0%;
    --theme-primary-l: 15%;
}

/* Brown - Earthy/Warm accent */
[data-color-theme="brown"] {
    --theme-primary-h: 30;
    --theme-primary-s: 50%;
    --theme-primary-l: 35%;
}

/* ============================================
   INSTAGRAM THEME
   Immersive Instagram-style gradient appearance
   Works with both Light and Dark modes!
   ============================================ */
[data-color-theme="instagram"] {
    --theme-primary-h: 320;
    --theme-primary-s: 80%;
    --theme-primary-l: 55%;

    /* Instagram Gradient Colors */
    --ig-purple: hsl(280, 75%, 50%);
    --ig-magenta: hsl(320, 80%, 55%);
    --ig-pink: hsl(340, 85%, 60%);
    --ig-orange: hsl(25, 95%, 55%);
    --ig-yellow: hsl(40, 100%, 55%);

    /* Instagram signature gradient */
    --ig-gradient: linear-gradient(45deg,
            var(--ig-purple) 0%,
            var(--ig-magenta) 25%,
            var(--ig-pink) 50%,
            var(--ig-orange) 75%,
            var(--ig-yellow) 100%);
}

/* ============================================
   NEON / CYBERPUNK THEME
   Futuristic high-tech appearance
   Neon Blue, Green, Gold with glow effects
   Works with both Light and Dark modes!
   ============================================ */
[data-color-theme="neon"] {
    --theme-primary-h: 180;
    --theme-primary-s: 100%;
    --theme-primary-l: 50%;

    /* Neon Cyberpunk Colors */
    --neon-cyan: hsl(180, 100%, 50%);
    --neon-blue: hsl(210, 100%, 55%);
    --neon-purple: hsl(270, 100%, 60%);
    --neon-green: hsl(120, 100%, 50%);
    --neon-gold: hsl(45, 100%, 50%);
    --neon-pink: hsl(320, 100%, 60%);

    /* Cyberpunk gradient */
    --neon-gradient: linear-gradient(135deg,
            var(--neon-cyan) 0%,
            var(--neon-blue) 25%,
            var(--neon-purple) 50%,
            var(--neon-pink) 75%,
            var(--neon-gold) 100%);

    /* Tech gradient (blue-green) */
    --tech-gradient: linear-gradient(90deg,
            var(--neon-cyan) 0%,
            var(--neon-green) 50%,
            var(--neon-gold) 100%);
}

/* Instagram gradient buttons - works in both light & dark */
[data-color-theme="instagram"] .btn-primary,
[data-color-theme="instagram"] .btn.btn-primary {
    background: var(--ig-gradient) !important;
    border: none !important;
    color: white !important;
    font-weight: 600;
}

[data-color-theme="instagram"] .btn-primary:hover,
[data-color-theme="instagram"] .btn.btn-primary:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

/* Instagram gradient for badges and highlights */
[data-color-theme="instagram"] .badge.badge-primary,
[data-color-theme="instagram"] .badge-primary,
[data-color-theme="instagram"] .status-active {
    background: var(--ig-gradient) !important;
    color: white !important;
}

/* Logo gradient text */
[data-color-theme="instagram"] .logo,
[data-color-theme="instagram"] .brand-name,
[data-color-theme="instagram"] .sidebar-logo {
    background: var(--ig-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Instagram-style active nav item */
[data-color-theme="instagram"] .nav-item.active,
[data-color-theme="instagram"] .sidebar-nav a.active {
    background: linear-gradient(90deg, hsla(320, 80%, 55%, 0.2) 0%, transparent 100%);
    border-left: 3px solid var(--ig-magenta);
}

/* Profile avatar ring gradient */
[data-color-theme="instagram"] .profile-ring,
[data-color-theme="instagram"] .avatar-ring {
    padding: 3px;
    background: var(--ig-gradient);
    border-radius: 50%;
}

/* Progress bars */
[data-color-theme="instagram"] .progress-fill,
[data-color-theme="instagram"] .progress-bar {
    background: var(--ig-gradient);
}

/* Links in Instagram mode */
[data-color-theme="instagram"] a:not(.btn) {
    color: hsl(210, 100%, 56%);
}

[data-color-theme="instagram"] a:not(.btn):hover {
    color: hsl(210, 100%, 70%);
}

/* Range slider thumbs */
[data-color-theme="instagram"] input[type="range"]::-webkit-slider-thumb {
    background: var(--ig-gradient);
}

/* Tab underlines */
[data-color-theme="instagram"] .settings-tab.active {
    border-bottom-color: var(--ig-magenta);
    color: var(--ig-magenta);
}

/* Theme color button active state */
[data-color-theme="instagram"] .theme-color-btn.active {
    border-color: var(--ig-magenta);
    box-shadow: 0 0 10px var(--ig-magenta);
}

/* ============================================
   NEON THEME - Element Styling
   Futuristic glow effects
   ============================================ */

/* Neon gradient buttons with glow */
[data-color-theme="neon"] .btn-primary,
[data-color-theme="neon"] .btn.btn-primary {
    background: var(--neon-gradient) !important;
    border: none !important;
    color: white !important;
    font-weight: 600;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.3),
        0 0 40px rgba(0, 255, 255, 0.1);
}

[data-color-theme="neon"] .btn-primary:hover,
[data-color-theme="neon"] .btn.btn-primary:hover {
    filter: brightness(1.2);
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.5),
        0 0 60px rgba(0, 255, 255, 0.2);
}

/* Neon badges with glow */
[data-color-theme="neon"] .badge.badge-primary,
[data-color-theme="neon"] .badge-primary,
[data-color-theme="neon"] .status-active {
    background: var(--tech-gradient) !important;
    color: black !important;
    font-weight: 700;
    text-shadow: none;
    box-shadow: 0 0 10px var(--neon-cyan);
}

/* Neon logo text */
[data-color-theme="neon"] .logo,
[data-color-theme="neon"] .brand-name,
[data-color-theme="neon"] .sidebar-logo {
    background: var(--neon-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 8px var(--neon-cyan));
}

/* Neon active nav item */
[data-color-theme="neon"] .nav-item.active,
[data-color-theme="neon"] .sidebar-nav a.active {
    background: linear-gradient(90deg, hsla(180, 100%, 50%, 0.15) 0%, transparent 100%);
    border-left: 3px solid var(--neon-cyan);
    box-shadow: inset 0 0 20px hsla(180, 100%, 50%, 0.1);
}

/* Neon progress bars */
[data-color-theme="neon"] .progress-fill,
[data-color-theme="neon"] .progress-bar {
    background: var(--tech-gradient);
    box-shadow: 0 0 10px var(--neon-cyan);
}

/* Neon range sliders */
[data-color-theme="neon"] input[type="range"]::-webkit-slider-thumb {
    background: var(--neon-cyan);
    box-shadow: 0 0 15px var(--neon-cyan), 0 0 30px var(--neon-cyan);
}

/* Neon tabs */
[data-color-theme="neon"] .settings-tab.active {
    border-bottom-color: var(--neon-cyan);
    color: var(--neon-cyan);
    text-shadow: 0 0 10px var(--neon-cyan);
}

/* Neon theme button glow */
[data-color-theme="neon"] .theme-color-btn.active {
    border-color: var(--neon-cyan);
    box-shadow: 0 0 15px var(--neon-cyan), 0 0 30px rgba(0, 255, 255, 0.3);
}

/* Neon cards with border glow */
[data-color-theme="neon"] .card {
    border: 1px solid hsla(180, 100%, 50%, 0.3);
    box-shadow: 0 0 10px hsla(180, 100%, 50%, 0.1),
        inset 0 0 30px hsla(180, 100%, 50%, 0.02);
}

/* Neon links */
[data-color-theme="neon"] a:not(.btn) {
    color: var(--neon-cyan);
}

[data-color-theme="neon"] a:not(.btn):hover {
    color: var(--neon-green);
    text-shadow: 0 0 10px var(--neon-green);
}

/* ============================================
   NEON APPEARANCE MODE - GLOW EFFECTS
   Works with ANY color theme!
   When data-theme="neon" is set
   ============================================ */

/* Neon mode buttons with glow using current color theme */
[data-theme="neon"] .btn-primary,
[data-theme="neon"] .btn.btn-primary {
    box-shadow: 0 0 15px var(--primary), 0 0 30px var(--primary);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

[data-theme="neon"] .btn-primary:hover,
[data-theme="neon"] .btn.btn-primary:hover {
    box-shadow: 0 0 25px var(--primary), 0 0 50px var(--primary);
    filter: brightness(1.2);
    transform: translateY(-2px);
}

/* Neon mode badges with glow */
[data-theme="neon"] .badge-primary,
[data-theme="neon"] .badge.badge-primary {
    box-shadow: 0 0 10px var(--primary);
}

/* Neon mode nav items */
[data-theme="neon"] .nav-item.active,
[data-theme="neon"] .sidebar-nav a.active {
    box-shadow: inset 0 0 20px hsla(var(--theme-primary-h), 100%, 50%, 0.15);
    border-left-color: var(--primary);
    text-shadow: 0 0 8px var(--primary);
}

/* Neon mode progress bars */
[data-theme="neon"] .progress-fill,
[data-theme="neon"] .progress-bar {
    box-shadow: 0 0 10px var(--primary);
}

/* Neon mode input focus */
[data-theme="neon"] .form-input:focus,
[data-theme="neon"] .form-select:focus,
[data-theme="neon"] .form-textarea:focus {
    box-shadow: 0 0 0 3px hsla(var(--theme-primary-h), 100%, 50%, 0.2),
        0 0 15px var(--primary);
}

/* Neon mode range slider thumb */
[data-theme="neon"] input[type="range"]::-webkit-slider-thumb {
    box-shadow: 0 0 15px var(--primary), 0 0 30px var(--primary);
}

/* Neon mode tabs */
[data-theme="neon"] .settings-tab.active {
    text-shadow: 0 0 10px var(--primary);
    box-shadow: 0 2px 0 var(--primary), 0 4px 15px var(--primary);
}

/* Neon mode cards */
[data-theme="neon"] .card {
    border-color: hsla(var(--theme-primary-h), 50%, 50%, 0.2);
    box-shadow: 0 0 10px hsla(var(--theme-primary-h), 100%, 50%, 0.1),
        inset 0 0 30px hsla(var(--theme-primary-h), 100%, 50%, 0.02);
}

/* Neon mode links */
[data-theme="neon"] a:not(.btn) {
    text-shadow: 0 0 5px var(--primary);
}

[data-theme="neon"] a:not(.btn):hover {
    text-shadow: 0 0 15px var(--primary);
}

/* Neon mode sidebar */
[data-theme="neon"] .sidebar {
    border-right-color: hsla(var(--theme-primary-h), 50%, 50%, 0.3);
}

/* Neon mode topbar */
[data-theme="neon"] .topbar {
    border-bottom-color: hsla(var(--theme-primary-h), 50%, 50%, 0.3);
}

/* Mode button styling for neon option */
.mode-btn[data-mode="neon"] {
    background: linear-gradient(135deg,
            hsla(180, 100%, 50%, 0.1) 0%,
            hsla(270, 100%, 50%, 0.1) 100%);
}

.mode-btn[data-mode="neon"].active {
    border-color: hsl(180, 100%, 50%);
    background: linear-gradient(135deg,
            hsla(180, 100%, 50%, 0.2) 0%,
            hsla(270, 100%, 50%, 0.2) 100%);
    box-shadow: 0 0 15px hsla(180, 100%, 50%, 0.3);
}

/* ============================================
   PAPER APPEARANCE MODE
   Clean, minimal paper-like appearance
   Subtle shadows, warm tones, textured feel
   Works with ANY color theme!
   ============================================ */

/* ============================================
   PAPER APPEARANCE MODE
   Clean, minimalistic, high-contrast
   Inspiration: Editorial Design, Ink on Paper.
   ============================================ */

[data-theme="paper"] {
    /* Base Palette - PURE WHITE & INK BLACK */
    --bg-base: #ffffff;
    --bg-surface: #ffffff;
    --bg-elevated: #f4f4f5;
    --bg-input: #ffffff;

    --text-primary: #09090b;
    /* Zinc 950 */
    --text-secondary: #52525b;
    /* Zinc 600 */
    --text-muted: #a1a1aa;
    /* Zinc 400 */
    --text-on-primary: #ffffff;

    --border-light: #e4e4e7;
    /* Zinc 200 */
    --border-medium: #d4d4d8;
    /* Zinc 300 */
    --border-focus: #18181b;
    /* Zinc 900 */

    /* Shadows - Soft, diffused, meaningful */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025);
    --shadow-glow: 0 0 0 transparent;
    /* No glow in paper */

    /* Typography Overrides */
    --font-heading: 'Georgia', 'Times New Roman', serif;
}

/* Paper UI Elements */
[data-theme="paper"] .card {
    border: 1px solid var(--border-medium);
    box-shadow: var(--shadow-sm);
    border-radius: 0;
    /* Sharp corners for paper look */
}

[data-theme="paper"] .btn {
    border-radius: 2px;
    font-weight: 500;
}

[data-theme="paper"] .btn-primary,
[data-theme="paper"] .btn.btn-primary {
    background: var(--text-primary);
    /* Black buttons */
    color: white;
    border: 1px solid var(--text-primary);
    box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.1);
    /* Retro depth */
}

[data-theme="paper"] .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.15);
}

[data-theme="paper"] input,
[data-theme="paper"] select,
[data-theme="paper"] textarea {
    background: #ffffff;
    border: 1px solid var(--border-medium);
    border-radius: 0;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
}

[data-theme="paper"] input:focus {
    border-color: var(--text-primary);
    outline: 2px solid rgba(0, 0, 0, 0.05);
}

[data-theme="paper"] .sidebar {
    background: #fcfcfc;
    border-right: 1px solid var(--border-medium);
}

[data-theme="paper"] .badge {
    border: 1px solid currentColor;
    background: transparent !important;
    /* Outline badges */
}

/* Paper Glass Override - specific override for glass panels in paper mode */
[data-theme="paper"] .glass-panel,
[data-theme="paper"] .glass-panel-deep {
    background: #ffffff !important;
    border: 1px solid var(--border-medium) !important;
    backdrop-filter: none !important;
    box-shadow: var(--shadow-sm) !important;
}

/* ============================================
   WIREFRAME APPEARANCE MODE
   Technical, Blueprint, Raw
   Inspiration: CAD, Blueprints, DOS.
   ============================================ */

[data-theme="wireframe"] {
    /* Technical Palette - BLUEPRINT BLUE OR DARK SLATE */
    --bg-base: #1e293b;
    /* Slate 800 */
    --bg-surface: #0f172a;
    /* Slate 900 */
    --bg-elevated: #020617;
    /* Slate 950 */
    --bg-input: #0f172a;

    --text-primary: #e2e8f0;
    /* Slate 200 */
    --text-secondary: #94a3b8;
    /* Slate 400 */
    --text-muted: #64748b;
    /* Slate 500 */
    --text-on-primary: #0f172a;

    --border-light: #334155;
    /* Slate 700 */
    --border-medium: #475569;
    /* Slate 600 */
    --border-focus: hsla(var(--theme-primary-h), var(--theme-primary-s), 60%, 1);

    /* No shadows, only borders */
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-glow: 0 0 10px hsla(var(--theme-primary-h), var(--theme-primary-s), 60%, 0.3);

    /* Grid Pattern Variable */
    --grid-color: rgba(255, 255, 255, 0.05);
}

[data-theme="wireframe"] body {
    background-image:
        linear-gradient(var(--grid-color) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
    background-size: 40px 40px;
    background-position: center top;
}

[data-theme="wireframe"] * {
    font-family: 'Courier New', Courier, monospace !important;
    /* FORCE MONOSPACE */
}

/* Wireframe Logic - EVERYTHING HAS BORDERS */
[data-theme="wireframe"] .card,
[data-theme="wireframe"] .sidebar,
[data-theme="wireframe"] .topbar,
[data-theme="wireframe"] .btn,
[data-theme="wireframe"] .badge,
[data-theme="wireframe"] input,
[data-theme="wireframe"] .glass-panel {
    border: 1px solid var(--border-medium) !important;
    background: rgba(15, 23, 42, 0.8) !important;
    box-shadow: none !important;
    backdrop-filter: blur(2px);
    border-radius: 0 !important;
    /* No rounded corners */
}

/* Active Elements glow via border */
[data-theme="wireframe"] .btn-primary,
[data-theme="wireframe"] .active {
    border-color: var(--primary) !important;
    color: var(--primary) !important;
    background: rgba(var(--primary-rgb), 0.1) !important;
}

[data-theme="wireframe"] .btn-primary:hover {
    background: var(--primary) !important;
    color: var(--bg-surface) !important;
}

/* Corner markers on cards (pseudo-elements) */
[data-theme="wireframe"] .card::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    width: 6px;
    height: 6px;
    background: var(--border-medium);
    z-index: 10;
}

[data-theme="wireframe"] .card::after {
    content: '';
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 6px;
    height: 6px;
    background: var(--border-medium);
    z-index: 10;
}

/* ============================================
   MATT FINISH THEME
   Flat design, no gloss, reduced contrast
   ============================================ */
[data-theme="matt"] {
    /* Muted, flat background colors */
    --bg-base: #2a2d32;
    --bg-surface: #32363c;
    --bg-elevated: #3a3e45;
    --bg-input: #3a3e45;

    /* Muted text - less contrast */
    --text-primary: #b8bcc4;
    --text-secondary: #8a8f98;
    --text-tertiary: #6b7078;
    --text-muted: #5a5f66;

    /* Subtle borders */
    --border-default: #42464d;
    --border-subtle: #3a3e45;
    --border-light: #32363c;

    /* Reduced shadows - flat look */
    --shadow-sm: none;
    --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 3px 6px rgba(0, 0, 0, 0.1);

    /* Muted surface colors for RGB */
    --bg-surface-rgb: 50, 54, 60;
    --bg-elevated-rgb: 58, 62, 69;
    --bg-base-rgb: 42, 45, 50;
}

/* Remove glass effects for matt finish */
[data-theme="matt"] .glass-panel,
[data-theme="matt"] .modal {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--bg-surface);
    box-shadow: var(--shadow-md);
}

/* Flat buttons */
[data-theme="matt"] .btn-primary,
[data-theme="matt"] .btn {
    box-shadow: none;
    text-shadow: none;
}

[data-theme="matt"] .btn-primary:hover {
    box-shadow: none;
    transform: none;
}

/* Flat cards */
[data-theme="matt"] .card {
    box-shadow: none;
    border: 1px solid var(--border-subtle);
}

/* Apply theme colors */
:root {
    --primary-50: hsl(var(--theme-primary-h), var(--theme-primary-s), 97%);
    --primary-100: hsl(var(--theme-primary-h), var(--theme-primary-s), 93%);
    --primary-200: hsl(var(--theme-primary-h), var(--theme-primary-s), 86%);
    --primary-300: hsl(var(--theme-primary-h), var(--theme-primary-s), 76%);
    --primary-400: hsl(var(--theme-primary-h), var(--theme-primary-s), 64%);
    --primary-500: hsl(var(--theme-primary-h), var(--theme-primary-s), var(--theme-primary-l));
    --primary-600: hsl(var(--theme-primary-h), var(--theme-primary-s), calc(var(--theme-primary-l) - 5%));
    --primary-700: hsl(var(--theme-primary-h), var(--theme-primary-s), calc(var(--theme-primary-l) - 12%));
    --primary-800: hsl(var(--theme-primary-h), var(--theme-primary-s), calc(var(--theme-primary-l) - 20%));
    --primary-900: hsl(var(--theme-primary-h), var(--theme-primary-s), calc(var(--theme-primary-l) - 28%));

    /* Alias for convenience - ALL appearance modes should use these */
    --primary: var(--primary-500);
    --primary-hover: var(--primary-600);
    --primary-active: var(--primary-700);
}

/* ============================================
   DISPLAY SIZE (Density)
   ============================================ */

/* Compact */
[data-density="compact"] {
    --spacing-multiplier: 0.75;
}

/* Default */
[data-density="default"] {
    --spacing-multiplier: 1;
}

/* Comfortable */
[data-density="comfortable"] {
    --spacing-multiplier: 1.25;
}

/* Spacious */
[data-density="spacious"] {
    --spacing-multiplier: 1.5;
}

/* ============================================
   BORDER RADIUS LEVELS
   ============================================ */

/* Sharp (0%) */
[data-radius="0"] {
    --radius-multiplier: 0;
}

/* Subtle (25%) */
[data-radius="25"] {
    --radius-multiplier: 0.5;
}

/* Default (50%) */
[data-radius="50"] {
    --radius-multiplier: 1;
}

/* Rounded (75%) */
[data-radius="75"] {
    --radius-multiplier: 1.5;
}

/* Pill (100%) */
[data-radius="100"] {
    --radius-multiplier: 2;
}

/* ============================================
   FONT SIZE ADJUSTMENT
   ============================================ */

[data-font-size="xs"] {
    font-size: 14px;
}

[data-font-size="sm"] {
    font-size: 15px;
}

[data-font-size="md"] {
    font-size: 16px;
}

[data-font-size="lg"] {
    font-size: 17px;
}

[data-font-size="xl"] {
    font-size: 18px;
}

/* ============================================
   THEME PICKER UI
   ============================================ */

.theme-picker {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-3);
}

.theme-color-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid transparent;
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
}

.theme-color-btn:hover {
    transform: scale(1.1);
}

.theme-color-btn.active {
    border-color: var(--text-primary);
}

.theme-color-btn.active::after {
    content: '✓';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Color swatches */
.theme-color-btn[data-color="blue"] {
    background: hsl(225, 100%, 50%);
}

.theme-color-btn[data-color="indigo"] {
    background: hsl(243, 75%, 58%);
}

.theme-color-btn[data-color="purple"] {
    background: hsl(270, 76%, 55%);
}

.theme-color-btn[data-color="pink"] {
    background: hsl(330, 81%, 60%);
}

.theme-color-btn[data-color="rose"] {
    background: hsl(350, 89%, 60%);
}

.theme-color-btn[data-color="red"] {
    background: hsl(0, 84%, 60%);
}

.theme-color-btn[data-color="orange"] {
    background: hsl(25, 95%, 53%);
}

.theme-color-btn[data-color="amber"] {
    background: hsl(38, 92%, 50%);
}

.theme-color-btn[data-color="yellow"] {
    background: hsl(48, 96%, 53%);
}

.theme-color-btn[data-color="lime"] {
    background: hsl(84, 81%, 44%);
}

.theme-color-btn[data-color="green"] {
    background: hsl(142, 71%, 45%);
}

.theme-color-btn[data-color="emerald"] {
    background: hsl(160, 84%, 39%);
}

.theme-color-btn[data-color="teal"] {
    background: hsl(174, 84%, 38%);
}

.theme-color-btn[data-color="cyan"] {
    background: hsl(188, 94%, 43%);
}

.theme-color-btn[data-color="sky"] {
    background: hsl(199, 89%, 48%);
}

.theme-color-btn[data-color="white"] {
    background: linear-gradient(135deg, #ffffff, #e8e8e8);
    border: 1px solid #ccc;
}

.theme-color-btn[data-color="black"] {
    background: linear-gradient(135deg, #2d2d2d, #1a1a1a);
}

.theme-color-btn[data-color="brown"] {
    background: linear-gradient(135deg, hsl(30, 50%, 40%), hsl(30, 50%, 30%));
}

/* ============================================
   SETTINGS SLIDERS
   ============================================ */

.setting-slider {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
}

.setting-slider input[type="range"] {
    flex: 1;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--border-default);
    appearance: none;
    cursor: pointer;
}

.setting-slider input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary);
    cursor: pointer;
    border: 2px solid white;
    box-shadow: var(--shadow-md);
}

.setting-slider-value {
    min-width: 50px;
    text-align: right;
    font-weight: 600;
    color: var(--text-secondary);
}

/* ============================================
   TABS
   ============================================ */

.settings-tabs {
    display: flex;
    gap: var(--spacing-1);
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: var(--spacing-6);
}

.settings-tab {
    padding: var(--spacing-3) var(--spacing-5);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-secondary);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all var(--transition-fast);
    margin-bottom: -1px;
}

.settings-tab:hover {
    color: var(--text-primary);
}

.settings-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.settings-panel {
    display: none;
}

.settings-panel.active {
    display: block;
}

/* ============================================
   DARK MODE TOGGLE
   ============================================ */

.dark-mode-toggle {
    display: flex;
    gap: var(--spacing-2);
}

.mode-btn {
    flex: 1;
    padding: var(--spacing-3);
    border: 1px solid var(--border-default);
    background: var(--surface);
    border-radius: var(--radius-lg);
    cursor: pointer;
    text-align: center;
    transition: all var(--transition-fast);
}

.mode-btn:hover {
    background: var(--surface-hover);
}

.mode-btn.active {
    border-color: var(--primary);
    background: var(--primary-50);
    color: var(--primary);
}

.mode-btn-icon {
    font-size: var(--text-xl);
    display: block;
    margin-bottom: var(--spacing-1);
}

.mode-btn-label {
    font-size: var(--text-sm);
    font-weight: 500;
}