/* ==========================================================
   ClipEngine — theme packs
   ----------------------------------------------------------
   Each block redefines the design tokens declared in
   index.css :root. The switcher (scripts/theme.js) stamps
   <html data-theme="…">; the default "glass" theme is the
   bare :root in index.css and needs no block here.

   The mockups in design_mockups/ came in two kinds:
     - visual language  (terminal, neobrutalism, neumorphism,
       studio) — reproduced faithfully as a token pack;
     - layout concept   (midnight top-nav, dual-panel, spatial
       canvas, kanban board, paper/bento) — the current app
       keeps its left-sidebar shell, so these land as a
       palette + type + surface skin, not a re-layout.

   Keep every block to token overrides plus a small number of
   structural rules scoped under the same [data-theme]. Never
   restyle a component here without that guard, or it leaks
   into every theme.
   ========================================================== */

/* Anchor for the default so tooling can see all ids. */
:root[data-theme="glass"] { color-scheme: dark; }


/* ----------------------------------------------------------
   MIDNIGHT — design2 (top-nav). Flat navy, Google-blue accent.
   ---------------------------------------------------------- */
:root[data-theme="midnight"] {
    color-scheme: dark;
    --bg-primary: #0b1220;
    --bg-secondary: #111a2e;
    --bg-tertiary: #17233d;
    --bg-elevated: rgba(255, 255, 255, 0.02);

    --glass-bg: rgba(23, 35, 61, 0.55);
    --glass-border: rgba(120, 150, 200, 0.16);
    --glass-hover: rgba(120, 150, 200, 0.10);
    --glass-active: rgba(120, 150, 200, 0.16);
    --glass-blur: 14px;

    --text-primary: #eef2f8;
    --text-secondary: #93a4c0;
    --text-tertiary: #5b6c8c;
    --text-inverse: #0b1220;

    --accent-primary: #3b82f6;
    --accent-primary-glow: rgba(59, 130, 246, 0.28);
    --accent-secondary: #22d3ee;
    --accent-secondary-glow: rgba(34, 211, 238, 0.20);

    --gradient-primary: linear-gradient(135deg, #3b82f6 0%, #22d3ee 100%);
    --gradient-card: linear-gradient(145deg, rgba(59, 130, 246, 0.10), rgba(34, 211, 238, 0.04));
    --gradient-glow: radial-gradient(ellipse at center, rgba(59, 130, 246, 0.16) 0%, transparent 70%);

    --hairline: rgba(147, 164, 192, 0.22);
    --surface-raise: rgba(147, 164, 192, 0.08);
    --scrim: rgba(4, 8, 18, 0.66);
    --app-glow:
        radial-gradient(ellipse 70% 50% at 15% 0%, rgba(59, 130, 246, 0.10) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 100% 100%, rgba(34, 211, 238, 0.06) 0%, transparent 60%);

    --font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --card-radius: var(--radius-md);
}


/* ----------------------------------------------------------
   TERMINAL — design4. Deep black, mono, phosphor green.
   ---------------------------------------------------------- */
:root[data-theme="terminal"] {
    color-scheme: dark;
    --bg-primary: #09090b;
    --bg-secondary: #101012;
    --bg-tertiary: #161619;
    --bg-elevated: rgba(74, 222, 128, 0.03);

    --glass-bg: rgba(20, 22, 20, 0.7);
    --glass-border: rgba(74, 222, 128, 0.18);
    --glass-hover: rgba(74, 222, 128, 0.08);
    --glass-active: rgba(74, 222, 128, 0.14);
    --glass-blur: 0px;

    --text-primary: #d1f7dd;
    --text-secondary: #6f9a7d;
    --text-tertiary: #47624f;
    --text-inverse: #09090b;

    --accent-primary: #4ade80;
    --accent-primary-glow: rgba(74, 222, 128, 0.30);
    --accent-secondary: #22d3ee;
    --accent-secondary-glow: rgba(34, 211, 238, 0.22);

    --gradient-primary: linear-gradient(135deg, #4ade80 0%, #22d3ee 100%);
    --gradient-card: linear-gradient(145deg, rgba(74, 222, 128, 0.06), transparent);
    --gradient-glow: radial-gradient(ellipse at center, rgba(74, 222, 128, 0.14) 0%, transparent 70%);

    --hairline: rgba(74, 222, 128, 0.30);
    --surface-raise: rgba(74, 222, 128, 0.06);
    --scrim: rgba(0, 0, 0, 0.75);
    --app-glow: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(74, 222, 128, 0.06) 0%, transparent 60%);

    --font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, monospace;

    --radius-sm: 3px;
    --radius-md: 4px;
    --radius-lg: 5px;
    --radius-xl: 6px;
    --card-radius: 5px;
    --card-border-width: 1px;
}
:root[data-theme="terminal"] .btn { text-transform: uppercase; letter-spacing: 0.04em; }
:root[data-theme="terminal"] .logo-icon { filter: grayscale(1) brightness(1.4); }


/* ----------------------------------------------------------
   DUAL PANEL — design5. Soft charcoal, pink→orange accent.
   ---------------------------------------------------------- */
:root[data-theme="dual-panel"] {
    color-scheme: dark;
    --bg-primary: #0f1115;
    --bg-secondary: #161920;
    --bg-tertiary: #1e222c;
    --bg-elevated: rgba(255, 255, 255, 0.03);

    --glass-bg: rgba(30, 34, 44, 0.6);
    --glass-border: rgba(255, 255, 255, 0.09);
    --glass-hover: rgba(255, 255, 255, 0.06);
    --glass-active: rgba(255, 255, 255, 0.10);
    --glass-blur: 16px;

    --text-primary: #f4f4f6;
    --text-secondary: #9aa0ac;
    --text-tertiary: #626875;
    --text-inverse: #0f1115;

    --accent-primary: #f472b6;
    --accent-primary-glow: rgba(244, 114, 182, 0.28);
    --accent-secondary: #fb923c;
    --accent-secondary-glow: rgba(251, 146, 60, 0.22);

    --gradient-primary: linear-gradient(135deg, #f472b6 0%, #fb923c 100%);
    --gradient-card: linear-gradient(145deg, rgba(244, 114, 182, 0.10), rgba(251, 146, 60, 0.04));
    --gradient-glow: radial-gradient(ellipse at center, rgba(244, 114, 182, 0.16) 0%, transparent 70%);

    --hairline: rgba(255, 255, 255, 0.16);
    --surface-raise: rgba(255, 255, 255, 0.05);
    --scrim: rgba(6, 7, 10, 0.62);
    --app-glow:
        radial-gradient(ellipse 60% 50% at 85% 10%, rgba(244, 114, 182, 0.09) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 10% 90%, rgba(251, 146, 60, 0.06) 0%, transparent 60%);

    --card-radius: var(--radius-xl);
}


/* ----------------------------------------------------------
   STUDIO — design8. Near-black editor, neutral grays, blue.
   ---------------------------------------------------------- */
:root[data-theme="studio"] {
    color-scheme: dark;
    --bg-primary: #0a0a0a;
    --bg-secondary: #141414;
    --bg-tertiary: #1c1c1c;
    --bg-elevated: rgba(255, 255, 255, 0.02);

    --glass-bg: rgba(26, 26, 26, 0.85);
    --glass-border: #2e2e2e;
    --glass-hover: rgba(255, 255, 255, 0.04);
    --glass-active: rgba(255, 255, 255, 0.08);
    --glass-blur: 6px;

    --text-primary: #f2f2f2;
    --text-secondary: #9a9a9a;
    --text-tertiary: #6b6b6b;
    --text-inverse: #0a0a0a;

    --accent-primary: #3b82f6;
    --accent-primary-glow: rgba(59, 130, 246, 0.30);
    --accent-secondary: #60a5fa;
    --accent-secondary-glow: rgba(96, 165, 250, 0.22);

    --gradient-primary: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 60%, #60a5fa 100%);
    --gradient-card: linear-gradient(145deg, rgba(59, 130, 246, 0.08), transparent);
    --gradient-glow: radial-gradient(ellipse at center, rgba(59, 130, 246, 0.12) 0%, transparent 70%);

    --hairline: #3a3a3a;
    --surface-raise: rgba(255, 255, 255, 0.04);
    --scrim: rgba(0, 0, 0, 0.7);
    --app-glow: none;

    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --card-radius: 10px;
}


/* ----------------------------------------------------------
   SPATIAL — design7. Deep space slate, violet + sky, big radii.
   ---------------------------------------------------------- */
:root[data-theme="spatial"] {
    color-scheme: dark;
    --bg-primary: #0f172a;
    --bg-secondary: #16213c;
    --bg-tertiary: #1e2b4d;
    --bg-elevated: rgba(255, 255, 255, 0.04);

    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.12);
    --glass-hover: rgba(255, 255, 255, 0.10);
    --glass-active: rgba(255, 255, 255, 0.16);
    --glass-blur: 24px;

    --text-primary: #f8fafc;
    --text-secondary: #a3b0c8;
    --text-tertiary: #64748b;
    --text-inverse: #0f172a;

    --accent-primary: #c084fc;
    --accent-primary-glow: rgba(192, 132, 252, 0.35);
    --accent-secondary: #60a5fa;
    --accent-secondary-glow: rgba(96, 165, 250, 0.28);

    --gradient-primary: linear-gradient(135deg, #c084fc 0%, #60a5fa 100%);
    --gradient-card: linear-gradient(145deg, rgba(192, 132, 252, 0.12), rgba(96, 165, 250, 0.05));
    --gradient-glow: radial-gradient(ellipse at center, rgba(192, 132, 252, 0.20) 0%, transparent 70%);

    --hairline: rgba(255, 255, 255, 0.22);
    --surface-raise: rgba(255, 255, 255, 0.07);
    --scrim: rgba(2, 6, 18, 0.7);
    --app-glow:
        radial-gradient(ellipse 70% 50% at 20% 15%, rgba(192, 132, 252, 0.14) 0%, transparent 55%),
        radial-gradient(ellipse 60% 45% at 85% 85%, rgba(96, 165, 250, 0.12) 0%, transparent 55%);

    --radius-lg: 22px;
    --radius-xl: 28px;
    --card-radius: 24px;
}


/* ==========================================================
   LIGHT FAMILY
   ========================================================== */

/* ----------------------------------------------------------
   NEO BRUTALISM — design6. Warm paper, ink borders, hard shadow.
   ---------------------------------------------------------- */
:root[data-theme="neobrutalism"] {
    color-scheme: light;
    --bg-primary: #fdfaf6;
    --bg-secondary: #f4efe7;
    --bg-tertiary: #ece5d8;
    --bg-elevated: #ffffff;

    --glass-bg: #ffffff;
    --glass-border: #141414;
    --glass-hover: #f4efe7;
    --glass-active: #ffe8b0;
    --glass-blur: 0px;

    --text-primary: #141414;
    --text-secondary: #4a4238;
    --text-tertiary: #7a7266;
    --text-inverse: #ffffff;

    --accent-primary: #ff4d4d;
    --accent-primary-glow: rgba(255, 77, 77, 0.0);
    --accent-secondary: #ffcc00;
    --accent-secondary-glow: rgba(255, 204, 0, 0.0);

    --gradient-primary: linear-gradient(135deg, #ff4d4d 0%, #ff8a3d 100%);
    --gradient-card: linear-gradient(145deg, #ffffff, #ffffff);
    --gradient-glow: none;

    --hairline: #141414;
    --surface-raise: #f0e9dc;
    --scrim: rgba(20, 20, 20, 0.35);
    --app-glow: none;

    --font-family: 'Space Grotesk', 'Inter', -apple-system, sans-serif;

    --radius-sm: 2px;
    --radius-md: 3px;
    --radius-lg: 4px;
    --radius-xl: 6px;
    --radius-full: 4px;

    --card-radius: 4px;
    --card-border-width: 2.5px;
    --card-shadow: 5px 5px 0 #141414;
    --card-hover-shadow: 7px 7px 0 #141414;

    --shadow-sm: 3px 3px 0 #141414;
    --shadow-md: 5px 5px 0 #141414;
    --shadow-lg: 8px 8px 0 #141414;
    --shadow-glow: 5px 5px 0 #141414;
}
:root[data-theme="neobrutalism"] .btn,
:root[data-theme="neobrutalism"] .input,
:root[data-theme="neobrutalism"] .card,
:root[data-theme="neobrutalism"] .sidebar {
    border: 2.5px solid #141414;
}
:root[data-theme="neobrutalism"] .btn { box-shadow: 3px 3px 0 #141414; font-weight: 700; }
:root[data-theme="neobrutalism"] .btn:active { transform: translate(3px, 3px); box-shadow: none; }
:root[data-theme="neobrutalism"] .nav-link.active { box-shadow: 3px 3px 0 #141414; }


/* ----------------------------------------------------------
   KANBAN — design9. Cool gray board, white cards, indigo.
   ---------------------------------------------------------- */
:root[data-theme="kanban"] {
    color-scheme: light;
    --bg-primary: #f3f4f6;
    --bg-secondary: #e9ebef;
    --bg-tertiary: #e0e3e9;
    --bg-elevated: #ffffff;

    --glass-bg: #ffffff;
    --glass-border: #e2e5ea;
    --glass-hover: #f0f2f5;
    --glass-active: #e8ebf0;
    --glass-blur: 0px;

    --text-primary: #111827;
    --text-secondary: #4b5563;
    --text-tertiary: #9ca3af;
    --text-inverse: #ffffff;

    --accent-primary: #6366f1;
    --accent-primary-glow: rgba(99, 102, 241, 0.18);
    --accent-secondary: #0ea5e9;
    --accent-secondary-glow: rgba(14, 165, 233, 0.16);

    --gradient-primary: linear-gradient(135deg, #6366f1 0%, #0ea5e9 100%);
    --gradient-card: linear-gradient(145deg, #ffffff, #ffffff);
    --gradient-glow: radial-gradient(ellipse at center, rgba(99, 102, 241, 0.10) 0%, transparent 70%);

    --hairline: #d1d5db;
    --surface-raise: #eef1f4;
    --scrim: rgba(17, 24, 39, 0.4);
    --app-glow: none;

    --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.06);
    --shadow-md: 0 2px 8px rgba(17, 24, 39, 0.08);
    --shadow-lg: 0 8px 24px rgba(17, 24, 39, 0.12);
    --shadow-glow: 0 0 0 3px rgba(99, 102, 241, 0.25);

    --card-radius: var(--radius-md);
    --card-shadow: 0 1px 3px rgba(17, 24, 39, 0.08);
    --card-hover-shadow: 0 4px 14px rgba(17, 24, 39, 0.12);
}


/* ----------------------------------------------------------
   NEUMORPHISM — design10. Single-tone clay, soft dual shadows.
   ---------------------------------------------------------- */
:root[data-theme="neumorphism"] {
    color-scheme: light;
    --bg-primary: #e0e5ec;
    --bg-secondary: #e0e5ec;
    --bg-tertiary: #d6dbe3;
    --bg-elevated: #e0e5ec;

    --glass-bg: #e0e5ec;
    --glass-border: transparent;
    --glass-hover: #e6ebf2;
    --glass-active: #dae0e8;
    --glass-blur: 0px;

    --text-primary: #4a5568;
    --text-secondary: #718096;
    --text-tertiary: #a0aec0;
    --text-inverse: #ffffff;

    --accent-primary: #764ba2;
    --accent-primary-glow: rgba(118, 75, 162, 0.20);
    --accent-secondary: #667eea;
    --accent-secondary-glow: rgba(102, 126, 234, 0.18);

    --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-card: linear-gradient(145deg, #e6ebf2, #d5dae1);
    --gradient-glow: none;

    --hairline: rgba(163, 177, 198, 0.4);
    --surface-raise: #e6ebf2;
    --scrim: rgba(163, 177, 198, 0.45);
    --app-glow: none;

    --font-family: 'Nunito', 'Inter', -apple-system, sans-serif;

    --radius-lg: 16px;
    --radius-xl: 20px;
    --card-radius: 18px;
    --card-border-width: 0px;
    --card-shadow: 6px 6px 12px #a3b1c6, -6px -6px 12px #ffffff;
    --card-hover-shadow: 8px 8px 16px #a3b1c6, -8px -8px 16px #ffffff;

    --shadow-sm: 4px 4px 8px #a3b1c6, -4px -4px 8px #ffffff;
    --shadow-md: 6px 6px 12px #a3b1c6, -6px -6px 12px #ffffff;
    --shadow-lg: 10px 10px 20px #a3b1c6, -10px -10px 20px #ffffff;
    --shadow-glow: inset 3px 3px 6px #a3b1c6, inset -3px -3px 6px #ffffff;
}
:root[data-theme="neumorphism"] .btn,
:root[data-theme="neumorphism"] .input {
    background: #e0e5ec;
    box-shadow: 5px 5px 10px #a3b1c6, -5px -5px 10px #ffffff;
    border: none;
}
:root[data-theme="neumorphism"] .btn:active,
:root[data-theme="neumorphism"] .input:focus {
    box-shadow: inset 4px 4px 8px #a3b1c6, inset -4px -4px 8px #ffffff;
}
:root[data-theme="neumorphism"] .sidebar { border-right: none; box-shadow: 8px 0 16px rgba(163, 177, 198, 0.4); }


/* ----------------------------------------------------------
   PAPER — design3 (bento) light. Warm off-white, frosted cards.
   ---------------------------------------------------------- */
:root[data-theme="paper"] {
    color-scheme: light;
    --bg-primary: #f7f5f1;
    --bg-secondary: #efece5;
    --bg-tertiary: #e7e3da;
    --bg-elevated: rgba(255, 255, 255, 0.8);

    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(20, 20, 30, 0.08);
    --glass-hover: rgba(255, 255, 255, 0.9);
    --glass-active: rgba(255, 255, 255, 1);
    --glass-blur: 12px;

    --text-primary: #1f1d29;
    --text-secondary: #625e6f;
    --text-tertiary: #9a95a6;
    --text-inverse: #ffffff;

    --accent-primary: #7c5cff;
    --accent-primary-glow: rgba(124, 92, 255, 0.22);
    --accent-secondary: #10b981;
    --accent-secondary-glow: rgba(16, 185, 129, 0.18);

    --gradient-primary: linear-gradient(135deg, #7c5cff 0%, #10b981 100%);
    --gradient-card: linear-gradient(145deg, rgba(124, 92, 255, 0.08), rgba(16, 185, 129, 0.04));
    --gradient-glow: radial-gradient(ellipse at center, rgba(124, 92, 255, 0.12) 0%, transparent 70%);

    --hairline: rgba(20, 20, 30, 0.14);
    --surface-raise: rgba(20, 20, 30, 0.04);
    --scrim: rgba(30, 27, 38, 0.4);
    --app-glow:
        radial-gradient(circle at top right, rgba(124, 92, 255, 0.10), transparent 55%),
        radial-gradient(circle at bottom left, rgba(16, 185, 129, 0.06), transparent 55%);

    --font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif;

    --shadow-sm: 0 1px 3px rgba(30, 27, 38, 0.06);
    --shadow-md: 0 4px 16px rgba(30, 27, 38, 0.08);
    --shadow-lg: 0 12px 32px rgba(30, 27, 38, 0.12);

    --card-radius: var(--radius-xl);
    --card-shadow: 0 1px 3px rgba(30, 27, 38, 0.06);
    --card-hover-shadow: 0 8px 24px rgba(30, 27, 38, 0.10);
}


/* ==========================================================
   Appearance picker — the swatch grid on the Profiles page.
   Not theme-scoped: it must read the same in every theme.
   ========================================================== */
.theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--space-md);
    margin-top: var(--space-md);
}
.theme-choice {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-md);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    background: var(--glass-bg);
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.theme-choice:hover { border-color: var(--accent-primary); transform: translateY(-2px); }
.theme-choice.is-active {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px var(--accent-primary-glow);
}
.theme-swatch {
    height: 44px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--glass-border);
    display: flex;
    align-items: flex-end;
    padding: 6px;
    gap: 4px;
}
.theme-swatch-chip {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1px solid rgba(127, 127, 127, 0.3);
}
.theme-choice-name { font-weight: 600; font-size: var(--font-size-sm); }
.theme-choice-meta { font-size: var(--font-size-xs); color: var(--text-secondary); }
.theme-choice-tag {
    align-self: flex-start;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 1px 6px;
    border-radius: var(--radius-full);
    background: var(--surface-raise);
    color: var(--text-tertiary);
}

/* Sidebar quick-switch <select>. */
.theme-switch { margin-bottom: var(--space-sm); }
.theme-switch-label {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    margin-bottom: 4px;
}
.theme-select {
    width: 100%;
    padding: var(--space-xs) var(--space-sm);
    font-family: inherit;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.theme-select:focus { outline: none; border-color: var(--accent-primary); }