/* ══════════════════════════════════════════════════════════════
   EPUB Reader — Centralized Theme Design System
   Single Source of Truth for All Colors & Themes
   ══════════════════════════════════════════════════════════════ */

:root,
[data-theme="dark"] {
    --bg: #0f1118;
    --surface: #181a24;
    --surface-hover: #1f2230;
    --bg-panel: #181a24;
    --text: #e4e6ed;
    --text-secondary: #8b8fa3;
    --accent: #6c8aff;
    --accent-hover: #8da4ff;
    --accent-transparent: rgba(108, 138, 255, 0.15);
    --accent-transparent-hover: rgba(108, 138, 255, 0.25);
    --accent-shadow: rgba(108, 138, 255, 0.35);
    --border: #272a36;
    --border-light: rgba(255, 255, 255, 0.08);
    --radius: 12px;
    --radius-sm: 8px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    --shadow-popover: 0 20px 50px rgba(0, 0, 0, 0.6);
    --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    --overlay-bg: rgba(0, 0, 0, 0.6);
    --glass-bg: rgba(255, 255, 255, 0.04);
    --glass-bg-hover: rgba(255, 255, 255, 0.08);
    --glass-bg-active: rgba(255, 255, 255, 0.12);
    --glass-border: rgba(255, 255, 255, 0.08);
    --toggle-track-off: #333745;
    --toggle-thumb-off: #8b8fa3;
    --toggle-thumb-on: #ffffff;
    --scrollbar-thumb: #272a36;
    --hue-gradient: linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
}

[data-theme="light"] {
    --bg: #f5f6fa;
    --surface: #ffffff;
    --surface-hover: #eef0f5;
    --bg-panel: #ffffff;
    --text: #1a1c26;
    --text-secondary: #6b6f82;
    --accent: #4a6cf7;
    --accent-hover: #3b5de7;
    --accent-transparent: rgba(74, 108, 247, 0.12);
    --accent-transparent-hover: rgba(74, 108, 247, 0.22);
    --accent-shadow: rgba(74, 108, 247, 0.28);
    --border: #dde0ea;
    --border-light: rgba(0, 0, 0, 0.08);
    --shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    --shadow-popover: 0 20px 40px rgba(0, 0, 0, 0.15);

    --overlay-bg: rgba(0, 0, 0, 0.4);
    --glass-bg: rgba(0, 0, 0, 0.04);
    --glass-bg-hover: rgba(0, 0, 0, 0.08);
    --glass-bg-active: rgba(0, 0, 0, 0.12);
    --glass-border: rgba(0, 0, 0, 0.08);
    --toggle-track-off: #cbd5e1;
    --toggle-thumb-off: #64748b;
    --toggle-thumb-on: #ffffff;
    --scrollbar-thumb: #dde0ea;
    --hue-gradient: linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
}

[data-theme="sepia"] {
    --bg: #f4ecd8;
    --surface: #ede3c8;
    --surface-hover: #e4d9b8;
    --bg-panel: #f4ecd8;
    --text: #5c4a2f;
    --text-secondary: #8b7355;
    --accent: #a06d3b;
    --accent-hover: #86582a;
    --accent-transparent: rgba(160, 109, 59, 0.15);
    --accent-transparent-hover: rgba(160, 109, 59, 0.25);
    --accent-shadow: rgba(160, 109, 59, 0.3);
    --border: #d4c5a9;
    --border-light: rgba(92, 74, 47, 0.12);
    --shadow: 0 4px 20px rgba(92, 74, 58, 0.12);
    --shadow-popover: 0 20px 40px rgba(92, 74, 47, 0.22);

    --overlay-bg: rgba(60, 45, 25, 0.4);
    --glass-bg: rgba(92, 74, 47, 0.06);
    --glass-bg-hover: rgba(92, 74, 47, 0.1);
    --glass-bg-active: rgba(92, 74, 47, 0.15);
    --glass-border: rgba(92, 74, 47, 0.12);
    --toggle-track-off: #d4c5a9;
    --toggle-thumb-off: #8b7355;
    --toggle-thumb-on: #ffffff;
    --scrollbar-thumb: #d4c5a9;
    --hue-gradient: linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
}

/* ── Universal Utility & Swatch Color Tokens ──────────────── */
:root {
    --color-white: #ffffff;
    --color-black: #000000;
    --color-danger: #ef4444;
    --color-danger-hover: #dc2626;
    --color-danger-bg: rgba(239, 68, 68, 0.15);
    --color-success: #10b981;
    --color-warning: #f59e0b;

    /* Preset Chips & Palette Grid Swatches */
    --swatch-off-white: #e4e6ed;
    --swatch-pure-white: #ffffff;
    --swatch-slate-gray: #94a3b8;
    --swatch-sepia-dark: #5c4a2f;
    --swatch-sky-blue: #60a5fa;
    --swatch-emerald: #34d399;
    --swatch-soft-rose: #f472b6;
    --swatch-amber: #fbbf24;

    --swatch-bg-dark: #0f1118;
    --swatch-bg-oled: #000000;
    --swatch-bg-mocha: #1e1e2e;
    --swatch-bg-light: #f5f6fa;
    --swatch-bg-sepia: #f4ecd8;
    --swatch-bg-slate: #e2e8f0;
    --swatch-bg-midnight: #0f172a;
    --swatch-bg-forest: #064e3b;

    --swatch-f8fafc: #f8fafc;
    --swatch-475569: #475569;
    --swatch-1e293b: #1e293b;
    --swatch-e6d7b8: #e6d7b8;
    --swatch-3b2e1e: #3b2e1e;
    --swatch-f97316: #f97316;
    --swatch-06b6d4: #06b6d4;
    --swatch-3b82f6: #3b82f6;
    --swatch-6366f1: #6366f1;
    --swatch-8b5cf6: #8b5cf6;
    --swatch-ec4899: #ec4899;
    --swatch-f43f5e: #f43f5e;
    --swatch-14532d: #14532d;
}

/* ══════════════════════════════════════════════════════════════
   GLOBAL COPY / DRAG PROTECTION
   ══════════════════════════════════════════════════════════════ */

/* Global Link Reset */
a {
    color: inherit;
    text-decoration: none;
}

/* Disable text selection & dragging on all UI elements */
*,
*::before,
*::after {
    -webkit-user-drag: none;
}

/* Prevent icons, images, buttons, nav from being selected/copied */
img,
svg,
.material-icons-round,
button,
a,
nav,
header,
.header,
.toc-sidebar,
.tts-panel,
.settings-panel,
.settings-overlay,
.paged-nav,
.page-flip-container,
.chapter-nav,
.scroll-top,
.icon-btn,
.toc-link,
.nav-btn,
.progress-bar,
.progress-fill,
.vo-card,
.vo-preset-chip,
.vo-toggle,
.ui-btn,
.theme-btn {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* Keep text inputs and textareas fully interactive */
input,
textarea,
[contenteditable="true"] {
    -webkit-user-select: text;
    -moz-user-select: text;
    user-select: text;
}

/* Prevent image drag */
img {
    pointer-events: auto;
    -webkit-user-drag: none;
}