/**
 * StudyMate Production Design System & Layout Tokens
 * Brand Color: #6781cf (Your Academic Partner)
 * Fonts: Newsreader (Reading/Headlines) & Inter (UI/Nav)
 */

/* ==========================================================================
   1. ROOT VARIABLES & THEME TOKENS
   ========================================================================== */
:root {
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-serif: 'Newsreader', Georgia, serif;

    /* Light Canvas (Warm Slate / Clean White) */
    --bg-base: #F8FAFC;
    --bg-surface: #FFFFFF;
    --bg-surface-elevated: #F1F5F9;
    --border-color: #E2E8F0;
    --border-hairline: rgba(226, 232, 240, 0.8);
    --text-primary: #0F172A;
    --text-secondary: #475569;
    --text-muted: #94A3B8;

    /* StudyMate Brand Color */
    --brand-primary: #6781cf;
    --brand-hover: #566ebc;
    --brand-surface: rgba(103, 129, 207, 0.12);

    --shadow-soft: 0 4px 20px -2px rgba(15, 23, 42, 0.05);
    --shadow-elevated: 0 10px 30px -5px rgba(15, 23, 42, 0.08);
}

[data-theme="dark"] {
    /* Dark Canvas (Deep Obsidian / Slate - Zero Harsh Pure Black) */
    --bg-base: #0B0F19;
    --bg-surface: #111827;
    --bg-surface-elevated: #1F2937;
    --border-color: #1F2937;
    --border-hairline: rgba(31, 41, 55, 0.8);
    --text-primary: #F1F5F9;
    --text-secondary: #94A3B8;
    --text-muted: #64748B;

    --brand-primary: #6781cf;
    --brand-hover: #566ebc;
    --brand-surface: rgba(103, 129, 207, 0.18);

    --shadow-soft: 0 4px 20px -2px rgba(0, 0, 0, 0.3);
    --shadow-elevated: 0 10px 30px -5px rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   2. BASE TYPOGRAPHY & SCROLLBAR
   ========================================================================== */
body {
    font-family: var(--font-sans);
    background-color: var(--bg-base);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.font-reading {
    font-family: var(--font-serif);
    font-feature-settings: "kern", "liga", "clig", "calt";
    letter-spacing: -0.011em;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.3);
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.5);
}

/* ==========================================================================
   3. ACTIVE NAV & COMPONENT SURFACES
   ========================================================================== */
.active-nav-tab {
    background-color: var(--bg-surface) !important;
    color: var(--brand-primary) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.card-surface {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-soft);
    border-radius: 1rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.card-surface:hover {
    border-color: rgba(103, 129, 207, 0.35);
}

/* ==========================================================================
   4. GOOGLE KEEP-STYLE MASONRY GRID (FOR NOTES & ANNOTATIONS)
   ========================================================================== */
.notes-masonry {
    column-count: 1;
    column-gap: 1rem;
}

@media (min-width: 640px) {
    .notes-masonry {
        column-count: 2;
    }
}

@media (min-width: 1024px) {
    .notes-masonry {
        column-count: 3;
    }
}

.notes-masonry-item {
    break-inside: avoid;
    margin-bottom: 1rem;
}

/* ==========================================================================
   5. ROTATING 6-TONAL PALETTES (FOR CINEMA SLIDES)
   ========================================================================== */
.palette-0 { --accent: #6781cf; --accent-bg: #EEF2FF; --accent-border: #C7D2FE; --accent-text: #1E1B4B; }
.palette-1 { --accent: #059669; --accent-bg: #ECFDF5; --accent-border: #A7F3D0; --accent-text: #064E3B; }
.palette-2 { --accent: #E11D48; --accent-bg: #FFF1F2; --accent-border: #FECDD3; --accent-text: #4C0519; }
.palette-3 { --accent: #D97706; --accent-bg: #FFFBEB; --accent-border: #FDE68A; --accent-text: #451A03; }
.palette-4 { --accent: #7C3AED; --accent-bg: #F5F3FF; --accent-border: #DDD6FE; --accent-text: #2E1065; }
.palette-5 { --accent: #0D9488; --accent-bg: #F0FDFA; --accent-border: #99F6E4; --accent-text: #134E4A; }

[data-theme="dark"] .palette-0 { --accent-bg: rgba(103, 129, 207, 0.12); --accent-border: rgba(103, 129, 207, 0.3); --accent-text: #E0E7FF; }
[data-theme="dark"] .palette-1 { --accent-bg: rgba(5, 150, 105, 0.12); --accent-border: rgba(5, 150, 105, 0.3); --accent-text: #D1FAE5; }
[data-theme="dark"] .palette-2 { --accent-bg: rgba(225, 29, 72, 0.12); --accent-border: rgba(225, 29, 72, 0.3); --accent-text: #FFE4E6; }
[data-theme="dark"] .palette-3 { --accent-bg: rgba(217, 119, 6, 0.12); --accent-border: rgba(217, 119, 6, 0.3); --accent-text: #FEF3C7; }
[data-theme="dark"] .palette-4 { --accent-bg: rgba(124, 58, 237, 0.12); --accent-border: rgba(124, 58, 237, 0.3); --accent-text: #EDE9FE; }
[data-theme="dark"] .palette-5 { --accent-bg: rgba(13, 148, 136, 0.12); --accent-border: rgba(13, 148, 136, 0.3); --accent-text: #CCFBF1; }

/* ==========================================================================
   6. 16:9 CINEMA STAGE & THEATER MODE
   ========================================================================== */
.cinema-stage-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: var(--bg-surface);
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: var(--shadow-elevated);
    border: 1px solid var(--border-color);
}

.theater-mode {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    aspect-ratio: auto !important;
    z-index: 9999 !important;
    border-radius: 0 !important;
    border: none !important;
}

/* ==========================================================================
   7. PRINT REVISION CHEAT SHEET (@media print)
   ========================================================================== */
@media print {
    header, aside, #stu-chat-drawer, #auth-modal-backdrop, .no-print {
        display: none !important;
    }
    body {
        background: white !important;
        color: black !important;
        font-size: 10pt;
    }
    .print-2-col {
        column-count: 2 !important;
        column-gap: 1.5cm !important;
    }
    .print-break-inside {
        break-inside: avoid;
    }
}

/* ==========================================================================
   8. RESPONSIVE AUTHENTICATION HEADER CONTROLS
   ========================================================================== */
body:not(.is-authenticated) .auth-only {
    display: none !important;
}

/* Desktop: Show navigation tabs, hide hamburger */
@media (min-width: 768px) {
    body.is-authenticated #desktop-nav-tabs {
        display: flex !important;
    }
    body.is-authenticated #mobile-menu-btn {
        display: none !important;
    }
}

/* Mobile: Hide navigation tabs, show hamburger */
@media (max-width: 767px) {
    body.is-authenticated #desktop-nav-tabs {
        display: none !important;
    }
    body.is-authenticated #mobile-menu-btn {
        display: flex !important;
    }
}