/* 
   Visual Styles & Polish
   Typography, colors, and interactions
   
   All colors are defined as CSS custom properties here.
   Dark mode works by redefining the tokens — no per-element overrides needed.
*/

/* ─── Color Tokens (Light Mode) ─────────────────────────────────────────── */
:root {
    /* Surfaces */
    --bg-page:          #fafafa;
    --bg-section:       #fff;
    --bg-input:         #fff;
    --bg-card:          #fff;
    --bg-elevated:      #fff;       /* dropdowns, suggestions */
    --bg-chip:          #f0f0f0;    /* tags, credit chips */
    --bg-chip-hover:    #e0e0e0;
    --bg-hover:         #f8f8f8;    /* suggestion hover */
    --bg-selected:      #f0f0f0;    /* suggestion checked */
    --bg-active-bar:    #f0f0f0;    /* active filters bar */

    /* Text */
    --text-primary:     #1a1a1a;
    --text-body:        #555;
    --text-meta:        #888;
    --text-muted:       #999;
    --text-label:       #666;
    --text-placeholder: #999;

    /* Borders */
    --border-default:   #e5e5e5;
    --border-input:     #ddd;
    --border-focus:     #1a1a1a;
    --border-elevated:  #ddd;
    --border-section:   #f0f0f0;
    --border-active:    #1a1a1a;

    /* Interactive / Accent */
    --accent:           #1a1a1a;
    --accent-hover:     #333;
    --accent-text:      #fff;

    /* Scrollbar */
    --scrollbar-thumb:  #d0d0d0;
    --scrollbar-hover:  #b0b0b0;

    /* Shadows */
    --shadow-dropdown:  0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-card:      0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-btn:       0 4px 12px rgba(26, 26, 26, 0.15);
    --focus-ring:       0 0 0 3px rgba(26, 26, 26, 0.1);

    /* Filter badge states */
    --badge-include-bg:     #4caf50;
    --badge-include-hover:  #45a049;
    --badge-include-border: #45a049;
    --badge-exclude-bg:     #f44336;
    --badge-exclude-hover:  #da190b;
    --badge-exclude-border: #da190b;
}

/* ─── Color Tokens (Dark Mode) ───────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    :root {
        /* Surfaces */
        --bg-page:          #1a1a1a;
        --bg-section:       #0a0a0a;
        --bg-input:         #0a0a0a;
        --bg-card:          #0a0a0a;
        --bg-elevated:      #2a2a2a;
        --bg-chip:          #2a2a2a;
        --bg-chip-hover:    #3a3a3a;
        --bg-hover:         #333;
        --bg-selected:      #3a3a3a;
        --bg-active-bar:    #2a2a2a;

        /* Text */
        --text-primary:     #e5e5e5;
        --text-body:        #aaa;
        --text-meta:        #aaa;
        --text-muted:       #777;
        --text-label:       #aaa;
        --text-placeholder: #777;

        /* Borders */
        --border-default:   #2a2a2a;
        --border-input:     #2a2a2a;
        --border-focus:     #e5e5e5;
        --border-elevated:  #3a3a3a;
        --border-section:   #3a3a3a;
        --border-active:    #3a3a3a;

        /* Interactive / Accent */
        --accent:           #e5e5e5;
        --accent-hover:     #fff;
        --accent-text:      #1a1a1a;

        /* Scrollbar */
        --scrollbar-thumb:  #3a3a3a;
        --scrollbar-hover:  #4a4a4a;

        /* Shadows */
        --shadow-dropdown:  0 4px 12px rgba(0, 0, 0, 0.4);
        --shadow-card:      0 4px 12px rgba(0, 0, 0, 0.3);
        --shadow-btn:       0 4px 12px rgba(0, 0, 0, 0.3);
        --focus-ring:       0 0 0 3px rgba(229, 229, 229, 0.05);

        /* Filter badge states (slightly brighter for dark bg) */
        --badge-include-bg:     #66bb6a;
        --badge-include-hover:  #4caf50;
        --badge-include-border: #4caf50;
        --badge-exclude-bg:     #ef5350;
        --badge-exclude-hover:  #f44336;
        --badge-exclude-border: #f44336;
    }
}

/* ─── Typography ──────────────────────────────────────────────────────────── */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
    font-weight: 600;
    line-height: 1.2;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.1rem; }

/* ─── Links ───────────────────────────────────────────────────────────────── */
a {
    color: var(--accent);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--text-meta);
}

/* ─── Inputs & Controls ───────────────────────────────────────────────────── */
input[type="text"],
input[type="search"] {
    font-family: inherit;
    font-size: 1rem;
    transition: all 0.2s ease;
}

input[type="checkbox"] {
    cursor: pointer;
}

/* ─── Transitions ─────────────────────────────────────────────────────────── */
button,
.result-card {
    transition: all 0.2s ease;
}

/* ─── Scrollbar ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

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

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

/* ─── Selection ───────────────────────────────────────────────────────────── */
::selection {
    background: var(--accent);
    color: var(--accent-text);
}

/* ─── Utility ─────────────────────────────────────────────────────────────── */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ─── Print ───────────────────────────────────────────────────────────────── */
@media print {
    .search-section,
    .search-container {
        display: none;
    }

    .video-player-wrapper {
        gap: 20px;
    }
}

/* ─── High Contrast ───────────────────────────────────────────────────────── */
@media (prefers-contrast: more) {
    .result-card {
        border-width: 2px;
    }

    .video-title {
        font-weight: 700;
    }
}

/* ─── Reduced Data ────────────────────────────────────────────────────────── */
@media (prefers-reduced-data: reduce) {
    .result-thumbnail img {
        image-rendering: pixelated;
    }
}

/* ─── GPU acceleration for smooth animations ──────────────────────────────── */
.result-card,
.credit-tag,
.tag-badge {
    will-change: transform;
    transform: translateZ(0);
}