/* ===== LEGACY CSS VARIABLE MAPPINGS ===== */
:root {
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
    --accent-light: #2d8291;
    --border: #e2e8f0;
    --text-dim: #64748b;
    --max-w: 860px;
    --surface: #f8fafc;
    --surface-2: #f1f5f9;
    --challenge-bg: rgba(26, 95, 107, 0.05);
}
.dark {
    --accent-light: #5eead4;
    --border: #334155;
    --text-dim: #94a3b8;
    --surface: #0f172a;
    --surface-2: #1e293b;
    --challenge-bg: rgba(45, 130, 145, 0.1);
}

/* ===== CONTENT TYPOGRAPHY ===== */
main { max-width: 860px; width: 100%; margin: 0 auto; padding: 3rem 1rem; overflow-wrap: break-word; word-break: break-word; min-width: 0; box-sizing: border-box; overflow-x: hidden; }
main h1 { font-size: 2rem; font-weight: 800; letter-spacing: -0.025em; margin-bottom: 0.5rem; line-height: 1.2; }
@media (max-width: 640px) {
    main h1 { font-size: 1.5rem; }
    main h2 { font-size: 1.25rem; }
}
main .subtitle { color: var(--text-dim); font-size: 1.05rem; margin-bottom: 2.5rem; line-height: 1.6; }
main .subtitle code { font-size: 0.9em; }
main h2 { font-size: 1.45rem; font-weight: 700; margin-top: 3rem; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--border); }
main h3 { font-size: 1.1rem; font-weight: 600; margin-top: 1.75rem; margin-bottom: 0.75rem; color: #1a5f6b; }
.dark main h3 { color: #2d8291; }
main p { margin-bottom: 1rem; line-height: 1.75; }
main ul, main ol { margin-bottom: 1rem; padding-left: 1.5rem; }
main ul li { list-style-type: disc; margin-bottom: 0.5rem; line-height: 1.75; }
main ol li { list-style-type: decimal; margin-bottom: 0.5rem; line-height: 1.75; }

/* ===== INLINE CODE ===== */
main code {
    background: #f1f5f9;
    padding: 0.15em 0.4em;
    border-radius: 0.25rem;
    font-family: var(--font-mono);
    font-size: 0.85em;
    color: #334155;
    overflow-wrap: break-word;
    word-break: break-word;
}
.dark main code {
    background: #1e293b;
    color: #e2e8f0;
}

/* ===== CODE BLOCKS ===== */
main pre {
    background: #0f172a;
    color: #e2e8f0;
    padding: 1.25rem;
    border-radius: 0.75rem;
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
    border: 1px solid #1e293b;
}
main pre code {
    background: transparent;
    padding: 0;
    font-size: inherit;
    color: inherit;
}

/* ===== CALLOUTS ===== */
.callout {
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
    border-radius: 0 0.75rem 0.75rem 0;
    border-left: 4px solid #1a5f6b;
    background: #f8fafc;
}
.dark .callout { background: #1e293b; border-left-color: #2d8291; }
.callout strong { display: block; margin-bottom: 0.25rem; color: #1a5f6b; }
.dark .callout strong { color: #2d8291; }
.callout.tip { border-left-color: #10b981; }
.callout.tip strong { color: #059669; }
.dark .callout.tip strong { color: #34d399; }
.callout.warn { border-left-color: #f59e0b; }
.callout.warn strong { color: #d97706; }
.dark .callout.warn strong { color: #fbbf24; }
.callout.danger { border-left-color: #ef4444; }
.callout.danger strong { color: #dc2626; }
.dark .callout.danger strong { color: #f87171; }
.callout p:last-child { margin-bottom: 0; }
.callout code { font-size: 0.82em; }

/* ===== TABLES ===== */
.table-wrap { overflow-x: auto; margin: 1.5rem 0; border-radius: 0.5rem; border: 1px solid #e2e8f0; }
.dark .table-wrap { border-color: #334155; }
table { width: 100%; min-width: 500px; border-collapse: collapse; font-size: 0.9rem; }
th { background: #f1f5f9; text-align: left; padding: 0.75rem 1rem; font-weight: 600; border-bottom: 2px solid #e2e8f0; color: #1a5f6b; white-space: nowrap; }
.dark th { background: #1e293b; border-bottom-color: #334155; color: #2d8291; }
td { padding: 0.75rem 1rem; border-bottom: 1px solid #e2e8f0; }
.dark td { border-bottom-color: #1e293b; }
td code, th code { font-size: 0.82em; }

/* ===== CHALLENGE BOXES ===== */
.challenge {
    padding: 1.5rem;
    margin: 2rem 0;
    border-radius: 0.75rem;
    border: 1px solid #1a5f6b;
    background: var(--challenge-bg);
}
.dark .challenge { border-color: #2d8291; }
.challenge h3 { color: #1a5f6b; margin-top: 0; }
.dark .challenge h3 { color: #2d8291; }
.challenge p:last-child { margin-bottom: 0; }

/* ===== DETAILS / SOLUTIONS ===== */
details { margin: 1rem 0 2rem; }
summary {
    cursor: pointer;
    font-weight: 600;
    color: #1a5f6b;
    padding: 0.75rem 0;
    transition: opacity 0.2s;
}
.dark summary { color: #2d8291; }
summary:hover { opacity: 0.7; }
.solution-body { padding: 1rem 0; }
.solution-body ul { margin-top: 0.5rem; }

/* ===== PAGE NAVIGATION ===== */
.page-nav {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 2px solid var(--border);
}
.page-nav a {
    text-decoration: none;
    color: inherit;
    padding: 1rem;
    border-radius: 0.75rem;
    border: 1px solid var(--border);
    transition: all 0.2s;
    flex: 1;
}
.page-nav a:hover { border-color: #1a5f6b; background: rgba(26, 95, 107, 0.05); }
.dark .page-nav a:hover { border-color: #2d8291; background: rgba(45, 130, 145, 0.1); }
.page-nav .label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-dim);
    margin-bottom: 0.25rem;
}
.page-nav .title { display: block; font-weight: 600; font-size: 0.95rem; }
.page-nav .next { text-align: right; }
@media (max-width: 640px) {
    .page-nav { flex-direction: column; }
    .page-nav .next { text-align: left; }
}

/* ===== LESSON CARDS (index page) ===== */
.lessons-grid {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 1rem 3rem;
    display: grid;
    gap: 1rem;
}
.lesson-card {
    display: block;
    text-decoration: none;
    color: inherit;
    padding: 1.5rem;
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
    background: white;
    transition: all 0.2s;
}
.dark .lesson-card { border-color: #334155; background: #0f172a; }
.lesson-card:hover { border-color: #1a5f6b; box-shadow: 0 4px 24px rgba(26, 95, 107, 0.15); transform: translateY(-2px); }
.dark .lesson-card:hover { border-color: #2d8291; }
.lesson-card__number { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #1a5f6b; }
.dark .lesson-card__number { color: #2d8291; }
.lesson-card h3 { font-size: 1.15rem; font-weight: 700; margin: 0.5rem 0; }
.lesson-card p { color: var(--text-dim); font-size: 0.9rem; line-height: 1.6; margin: 0; }
.lesson-card p code { font-size: 0.82em; }
.lesson-card__link { display: inline-block; margin-top: 1rem; font-size: 0.85rem; font-weight: 600; color: #1a5f6b; }
.dark .lesson-card__link { color: #2d8291; }

/* ===== HERO (index page) ===== */
.hero {
    max-width: 860px;
    margin: 0 auto;
    padding: 3rem 1rem 2rem;
    text-align: center;
}
.hero h1 {
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    margin-bottom: 1rem;
    line-height: 1.15;
}
.hero .highlight { color: #1a5f6b; }
.dark .hero .highlight { color: #2d8291; }
.hero p { color: var(--text-dim); font-size: 1.05rem; max-width: 640px; margin: 0 auto; line-height: 1.7; }
@media (max-width: 640px) {
    .hero h1 { font-size: 1.75rem; }
    main h1 { font-size: 1.5rem; }
}

/* ===== SYNTAX HIGHLIGHTING ===== */
.kw { color: #569cd6; }
.tp { color: #4ec9b0; }
.str { color: #ce9178; }
.fn { color: #dcdcaa; }
.cm { color: #6a9955; font-style: italic; }
.num { color: #b5cea8; }
.op { color: #e2e8f0; }
.pk { color: #c586c0; }
.lp { color: #569cd6; }

/* ===== BIG-O BADGES ===== */
.bigo {
    font-family: var(--font-mono);
    font-size: 0.8em;
    padding: 0.15em 0.5em;
    border-radius: 0.25rem;
    font-weight: 600;
    white-space: nowrap;
}
.bigo.o1 { color: #4ec9b0; background: rgba(78, 201, 176, 0.15); }
.bigo.ologn { color: #569cd6; background: rgba(86, 156, 214, 0.15); }
.bigo.on { color: #ce9178; background: rgba(206, 145, 120, 0.15); }
.bigo.onlogn { color: #c586c0; background: rgba(197, 134, 192, 0.15); }