/* ============================================================
   theme.css — Shared dark/light theme variables + base styles
   Used by: login.php, menu.php, list_device.php, list_key.php
   ============================================================ */

/* ===== SHARED THEME VARIABLES ===== */
:root[data-theme="dark"] {
    /* Background */
    --bg-body: linear-gradient(145deg, #0f0c29 0%, #302b63 55%, #24243e 100%);
    --bg-blob-1: #667eea;
    --bg-blob-2: #764ba2;
    /* Cards */
    --card-bg: rgba(255, 255, 255, .065);
    --card-bg-hover: rgba(255, 255, 255, .10);
    --card-border: rgba(255, 255, 255, .10);
    --card-border-h: rgba(255, 255, 255, .20);
    --card-shadow: 0 8px 32px rgba(0, 0, 0, .30);
    --card-shadow-h: 0 20px 48px rgba(0, 0, 0, .40);
    /* Text */
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, .50);
    --text-muted: rgba(255, 255, 255, .30);
    /* Theme toggle */
    --toggle-bg: rgba(255, 255, 255, .08);
    --toggle-border: rgba(255, 255, 255, .14);
    --toggle-c: rgba(255, 255, 255, .65);
    /* Meta tag colors */
    --meta-dark: #302b63;
    --meta-light: #ede7f6;
}

:root[data-theme="light"] {
    /* Background */
    --bg-body: linear-gradient(145deg, #e8eaf6 0%, #ede7f6 55%, #f3e5f5 100%);
    --bg-blob-1: #7c9ff5;
    --bg-blob-2: #b390e8;
    /* Cards */
    --card-bg: rgba(255, 255, 255, .80);
    --card-bg-hover: rgba(255, 255, 255, .97);
    --card-border: rgba(102, 126, 234, .18);
    --card-border-h: rgba(102, 126, 234, .40);
    --card-shadow: 0 4px 24px rgba(102, 126, 234, .12);
    --card-shadow-h: 0 16px 40px rgba(102, 126, 234, .22);
    /* Text */
    --text-primary: #1e1b4b;
    --text-secondary: #4c4a7a;
    --text-muted: #8b89b0;
    /* Theme toggle */
    --toggle-bg: rgba(102, 126, 234, .08);
    --toggle-border: rgba(102, 126, 234, .22);
    --toggle-c: #6c6a9a;
    /* Meta tag colors */
    --meta-dark: #302b63;
    --meta-light: #ede7f6;
}

/* ===== BASE RESET ===== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ===== BODY ===== */
body {
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    background: var(--bg-body);
    min-height: 100vh;
    color: var(--text-primary);
    transition: background .35s, color .3s;
}

/* ===== ANIMATED BLOBS ===== */
body::before,
body::after {
    content: '';
    position: fixed;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .14;
    pointer-events: none;
    animation: blobFloat 9s ease-in-out infinite;
}

body::before {
    width: 420px;
    height: 420px;
    background: var(--bg-blob-1);
    top: -120px;
    left: -100px;
}

body::after {
    width: 360px;
    height: 360px;
    background: var(--bg-blob-2);
    bottom: -90px;
    right: -90px;
    animation-delay: -4.5s;
}

@keyframes blobFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50%       { transform: translateY(28px) scale(1.05); }
}

/* ===== THEME TOGGLE BUTTON (fixed top-right) ===== */
.theme-toggle {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 100;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid var(--toggle-border);
    background: var(--toggle-bg);
    color: var(--toggle-c);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s, border-color .2s, transform .15s;
    font-size: 1.05rem;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.theme-toggle:hover {
    background: var(--card-bg-hover);
    border-color: var(--card-border-h);
    transform: scale(1.08);
}

.theme-toggle:active {
    transform: scale(.94);
}