/* ============================================================ PYTHON COACH V2 — Mobile-First Stylesheet Baseline: 375px (iPhone SE) Design language: Duolingo geometry — fixed top bar, scrollable main viewport, fixed bottom tab nav. ============================================================ */ /* ── DESIGN TOKENS ─────────────────────────────────────────── */ :root { /* Brand */ --green: #58CC02; --green-dark: #46A302; --green-light: #D7FFB8; --blue: #1CB0F6; --red: #FF4B4B; --yellow: #FFD900; /* Primary action palette — cyan/blue, universally accessible. Do NOT rely on --green or --red for buttons or state indicators. */ --primary: #0E9FE0; --primary-dark: #0E8FCC; /* Surface */ --bg: #FFFFFF; --surface: #F7F7F7; --border: #E5E5E5; --border-dark: #CACACA; /* Text */ --text: #1C1C1C; --text-muted: #AFAFAF; --text-secondary: #5A5A5A; --text-inverse: #FFFFFF; /* Layout geometry — IMMUTABLE anchor: all viewport offsets MUST reference var(--topbar-h) so the UI never jumps on tab switch. */ --topbar-h: 60px; --bottomnav-h: 72px; /* Shape */ --radius: 16px; --radius-sm: 10px; --radius-xs: 6px; /* Type */ --font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --mono: 'Fira Code', 'Cascadia Code', 'JetBrains Mono', 'Courier New', monospace; /* Hint system */ --hint-bg: #FFFBEB; --hint-border: #F59E0B; --hint-item-bg: #FFFFFF; --hint-item-border: #E5E5E5; --hint-solution-bg: #1A1A2E; --hint-solution-border: #F59E0B; --hint-solution-label: #F59E0B; /* Lesson panel code blocks — shared with hint system dark-code aesthetic */ --hint-code-bg: #1A1A2E; --hint-code-text: #E2E8F0; } /* ── DARK MODE TOKEN OVERRIDES ──────────────────────────────── */ /* Applied when is set. */ /* The flash-prevention script in each page sets this */ /* attribute before any CSS is parsed — no flash of wrong theme. */ [data-theme="dark"] { --bg: #0F172A; --surface: #1E293B; --border: #2D3748; --border-dark: #3D4F63; --text: #E2E8F0; --text-muted: #64748B; --text-secondary: #94A3B8; --text-inverse: #0F172A; --primary: #38BDF8; --primary-dark: #0EA5E9; --hint-bg: #1E293B; --hint-border: #F59E0B; --hint-item-bg: #0F172A; --hint-item-border: #2D3748; --hint-solution-bg: #0B1120; --hint-code-bg: #0B1120; --green: #4ADE80; --yellow: #FACC15; --red: #F87171; /* Unchanged in dark mode — calibrated for always-dark surfaces: --hint-solution-border, --hint-solution-label, --hint-code-text */ } /* Hub chapter accent colours — lightened for dark backgrounds */ [data-theme="dark"] body[data-v2-hub] { --hub-ch1-color: #95CFA8; --hub-ch1-dark: #4A9466; --hub-ch2-color: #6B21A8; --hub-ch2-dark: #220440; --hub-ch3-color: #0891B2; --hub-ch3-dark: #034E6A; --hub-ch4-color: #7EC8D8; --hub-ch4-dark: #2E7A8A; --hub-ch5-color: #93C5FD; --hub-ch5-dark: #3B82F6; --hub-ch6-color: #FB7185; --hub-ch6-dark: #BE123C; } /* ── RESET ──────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; overscroll-behavior: none; } body { font-family: var(--font); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; } button { font-family: inherit; cursor: pointer; }