/* theme.css - CSS Variables for Light/Dark themes */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ==========================================
   LIGHT THEME (default)
   ========================================== */
:root, [data-theme="light"] {
    /* structure */
    --bg-abyss: #AEB3CD;
    --bg-card: #F0F0F0;
    --border-card: #000000;

    /* header */
    --bg-header: #454a6c;
    --text-header: #ffffff;

    /* accent */
    --accent: #6366f1;
    --accent-hover: #7c7ff2;

    /* text */
    --text-primary: #1a1a1a;
    --text-secondary: #555555;
    --text-muted: #888888;

    /* UI */
    --border: #c0c0c0;
    --bg-white: #ffffff;
    --bg-hover: #e8e8e8;
    --bg-subtle: #e8e8e8;

    /* card strips */
    --card-header-bg: #e8e8e8;
    --card-header-border: #d0d0d0;

    /* hover tint for card strips */
    --hover-tint: #e4e4f8;
    --selected-strip-bg: #d0e0f8;
    --selected-glow: 0 0 12px 3px rgba(59, 130, 246, 0.5);
    --selected-accent: #3b82f6;

    /* status */
    --status-ok: #22c55e;
    --status-warn: #eab308;
    --status-error: #ef4444;

    /* media card specific */
    --media-id-text: #fff;
    --media-id-bg: var(--accent);

    /* digest button - Fallout style */
    --digest-bg: radial-gradient(circle at center, #5a7070, #4a5c5c);
    --digest-border: #3d4a4a;
    --digest-text: #b8cccc;
    --digest-pressed-bg: radial-gradient(ellipse at center, #80ffbc 0%, #3cffa8 35%, #2dcc88 70%, #1f8a5e 100%);
    --digest-pressed-border: #176848;
    --digest-pressed-text: #1a1410;

    /* loading block bar */
    --loading-bar-color: #6366f1;
    --loading-bar-glow: none;
    --loading-bracket-color: #888888;
    --loading-text-color: #555555;

    /* scrollbar */
    --scrollbar-track: #e8e8e8;
    --scrollbar-thumb: #c0c0c0;
    --scrollbar-thumb-hover: #a0a0a0;
}

/* ==========================================
   DARK THEME
   ========================================== */
[data-theme="dark"] {
    /* structure */
    --bg-abyss: #1a1c2e;
    --bg-card: #252830;
    --border-card: #3a3f4a;

    /* header */
    --bg-header: #12141f;
    --text-header: #ffffff;

    /* accent - brighter for dark mode */
    --accent: #818cf8;
    --accent-hover: #a5b4fc;

    /* text - inverted for dark */
    --text-primary: #e8e8e8;
    --text-secondary: #a0a0a0;
    --text-muted: #888888;

    /* UI elements */
    --border: #3a3f4a;
    --bg-white: #303540;
    --bg-hover: #2d303a;
    --bg-subtle: #1e2028;

    /* card strips */
    --card-header-bg: #1e2028;
    --card-header-border: #3a3f4a;

    /* hover tint for card strips - darker purple tint */
    --hover-tint: #181824;
    --selected-strip-bg: #3d3048;
    --selected-glow: 0 0 20px 4px rgba(129, 140, 248, 0.7);
    --selected-accent: var(--accent);

    /* status */
    --status-ok: #4ade80;
    --status-warn: #fbbf24;
    --status-error: #f87171;

    /* media card specific */
    --media-id-text: #000;
    --media-id-bg: var(--accent);

    /* digest button - Fallout style (darker adaptation) */
    --digest-bg: radial-gradient(circle at center, #3a4a4a, #2a3636);
    --digest-border: #2d3a3a;
    --digest-text: #8aacac;
    --digest-pressed-bg: radial-gradient(ellipse at center, #60df9c 0%, #2cdf88 35%, #1dac68 70%, #0f6a3e 100%);
    --digest-pressed-border: #0f5838;
    --digest-pressed-text: #0a0a08;

    /* loading block bar */
    --loading-bar-color: #818cf8;
    --loading-bar-glow: 0 0 8px rgba(129, 140, 248, 0.5);
    --loading-bracket-color: #606060;
    --loading-text-color: #a0a0a0;

    /* scrollbar */
    --scrollbar-track: #1e2028;
    --scrollbar-thumb: #3a3f4a;
    --scrollbar-thumb-hover: #4a5060;
}

/* ==========================================
   BASE STYLES
   ========================================== */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 13px;
    background: var(--bg-abyss);
    color: var(--text-primary);
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: background 0.2s ease;
}

/* monospace font for technical content */
.mono, .media-id, .media-date, code, pre {
    font-family: 'JetBrains Mono', 'Consolas', 'Monaco', 'Lucida Console', monospace;
}

/* ==========================================
   SCROLLBAR STYLING
   ========================================== */
/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* Webkit (Chrome, Edge, Safari) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}