/* ===========================================
   Follow-Along Page - Base Styles
   Variables, Reset, Typography
   =========================================== */

:root {
    --bg-color: #0F0F0F;
    --card-bg: #1a1a1a;
    --text-primary: #ffffff;
    --text-secondary: #888;
    --volt: #DFFF00;
    --accent: #DFFF00;
    --accent-gold: #DFFF00;
    --tag-bg: rgba(255,255,255,0.1);
    --transition: all 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
    --sidebar-width: 280px;
    --sidebar-width-collapsed: 60px;

    /* Video Player Controls */
    --player-accent: #DFFF00;
    --player-glass-bg: rgba(0, 0, 0, 0.6);
    --player-glass-border: rgba(255, 255, 255, 0.1);
    --player-glass-blur: 12px;
    --player-text: rgba(255, 255, 255, 0.9);
    --player-text-muted: rgba(255, 255, 255, 0.6);
    --player-progress-bg: rgba(255, 255, 255, 0.2);
    --player-transition-fast: 150ms ease;
    --player-transition-medium: 300ms ease;
}

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

html, body {
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg-color);
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}

body.design-variant-a {
    background: #0F0F0F !important;
}

.font-display {
    font-family: 'Anton', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.text-outline {
    -webkit-text-stroke: 1px rgba(255,255,255,0.3);
    color: transparent;
}