/* ═══════════════════════════════════════════════════════
   TSG Bookmarks Dashboard — Theme (Glassmorphism)
   THE skin file. Change only this to reskin the entire app.
   ═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    /* ── Surface & Glass ─────────────────────── */
    --surface-bg: rgba(255, 255, 255, 0.06);
    --surface-bg-hover: rgba(255, 255, 255, 0.10);
    --surface-border: rgba(255, 255, 255, 0.12);
    --surface-border-hover: rgba(255, 255, 255, 0.22);
    --surface-blur: 20px;
    --surface-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    --surface-shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.4);

    /* ── Colors ──────────────────────────────── */
    --accent-primary: #7c6aff;
    --accent-primary-rgb: 124, 106, 255;
    --accent-secondary: #00e5b0;
    --accent-secondary-rgb: 0, 229, 176;
    --accent-gradient: linear-gradient(135deg, #7c6aff, #00e5b0);
    --accent-gradient-hover: linear-gradient(135deg, #9080ff, #20ffcc);
    --accent-warning: #ff6b6b;
    --accent-success: #00e5b0;

    /* ── Text ────────────────────────────────── */
    --text-primary: #f0f0f8;
    --text-secondary: rgba(240, 240, 248, 0.6);
    --text-tertiary: rgba(240, 240, 248, 0.35);
    --text-on-accent: #ffffff;

    /* ── Background ──────────────────────────── */
    --bg-primary: #0a0a1a;
    --bg-secondary: #12122a;
    --bg-gradient: linear-gradient(135deg, #0a0a1a 0%, #1a1040 50%, #0a1a2a 100%);

    /* ── Typography ──────────────────────────── */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-size-xs: 0.7rem;
    --font-size-sm: 0.8rem;
    --font-size-base: 0.95rem;
    --font-size-lg: 1.15rem;
    --font-size-xl: 1.5rem;
    --font-size-2xl: 2rem;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* ── Layout ──────────────────────────────── */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --gap-sm: 0.75rem;
    --gap-md: 1.25rem;
    --gap-lg: 2rem;
    --panel-padding: 1.5rem;

    /* ── Transitions ─────────────────────────── */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;
    --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    /* ── Z-Index Layers ──────────────────────── */
    --z-bg: 0;
    --z-content: 10;
    --z-ticker: 50;
    --z-modal: 100;
    --z-toast: 150;

    /* ── Scrollbar ───────────────────────────── */
    --scrollbar-bg: rgba(255,255,255,0.04);
    --scrollbar-thumb: rgba(255,255,255,0.15);

    /* ── Input ───────────────────────────────── */
    --input-bg: rgba(255, 255, 255, 0.06);
    --input-border: rgba(255, 255, 255, 0.12);
    --input-focus-border: var(--accent-primary);
    --input-text: var(--text-primary);
    --input-placeholder: var(--text-tertiary);

    /* ── Tag Colors ──────────────────────────── */
    --tag-bg: rgba(124, 106, 255, 0.15);
    --tag-text: var(--accent-primary);
    --tag-border: rgba(124, 106, 255, 0.3);

    /* ── Status Colors ───────────────────────── */
    --status-ok: #00e5b0;
    --status-warn: #ffb347;
    --status-error: #ff6b6b;
    --status-info: #7c6aff;
}

/* ── Light Mode Override ─────────────────────────────── */
@media (prefers-color-scheme: light) {
    :root {
        --surface-bg: rgba(255, 255, 255, 0.55);
        --surface-bg-hover: rgba(255, 255, 255, 0.70);
        --surface-border: rgba(0, 0, 0, 0.08);
        --surface-border-hover: rgba(0, 0, 0, 0.14);
        --surface-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
        --surface-shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.12);

        --text-primary: #1a1a2e;
        --text-secondary: rgba(26, 26, 46, 0.6);
        --text-tertiary: rgba(26, 26, 46, 0.35);

        --bg-primary: #e4e4f0;
        --bg-secondary: #d8d8e8;
        --bg-gradient: linear-gradient(135deg, #e4e4f0 0%, #d0c8f0 50%, #c8dce8 100%);

        --input-bg: rgba(255, 255, 255, 0.5);
        --input-border: rgba(0, 0, 0, 0.1);

        --scrollbar-bg: rgba(0,0,0,0.04);
        --scrollbar-thumb: rgba(0,0,0,0.15);

        --tag-bg: rgba(124, 106, 255, 0.1);
    }
}