/* ===================================================== theme.css PURPOSE: Controls the ENTIRE app color scheme, plus spacing, radius, shadow, and typography scales. To change any color in the app, ONLY edit this file. No colors should be hardcoded in any other CSS file. ACTIVE THEME: iOS-native — system colors, light + dark HOW LIGHT/DARK WORKS: 1. Bare :root defines the LIGHT palette as the default. 2. A prefers-color-scheme: dark media query swaps in the DARK palette automatically when the OS is in dark mode and the user hasn't manually overridden. 3. [data-theme="dark"] / [data-theme="light"] on force one palette regardless of the OS setting — this is what the in-app theme toggle (Profile screen, via js/utils/theme-manager.js) sets. Values below are Apple's real iOS system colors (UIKit system palette), each pulled down slightly toward a warmer/darker tone (a "subtle dim" pass, 2026-08-29) — the app felt a bit too bright at the stock UIKit brightness, so backgrounds, labels, and every system tint color were dimmed by a small, consistent amount in both light and dark palettes. ===================================================== */ :root { /* ── iOS SYSTEM BACKGROUNDS (light) ─────────────────── */ --ios-systemBackground: #F5F5F2; --ios-secondarySystemBackground: #EBEBE7; --ios-tertiarySystemBackground: #F5F5F2; --ios-systemGroupedBackground: #EBEBE7; --ios-secondarySystemGroupedBackground: #F5F5F2; --ios-tertiarySystemGroupedBackground: #EBEBE7; /* ── iOS LABEL (TEXT) COLORS (light) ────────────────── */ --ios-label: #1C1C1E; --ios-secondaryLabel: rgba(50, 50, 45, 0.62); --ios-tertiaryLabel: rgba(50, 50, 45, 0.32); --ios-quaternaryLabel: rgba(50, 50, 45, 0.19); /* ── iOS SEPARATORS (light) ────────────────────────── Hairlines, not the old 2px colored borders. */ --ios-separator: rgba(50, 50, 45, 0.30); --ios-opaqueSeparator: #C3C1B9; /* ── iOS SYSTEM (TINT/ACCENT) COLORS (light) ───────── systemGreen is the app's tint color (see the semantic --color-accent-amber/--color-button-bg/etc. below, which all resolve to it) — reserved for interactive elements only (buttons, active states, links). Never used for plain headings/labels. Chosen over blue as a better fit for a study app — still real iOS system colors, not an arbitrary hex. systemBlue itself stays defined here too since it's still used decoratively (e.g. one of the deck-card gradient hues). */ --ios-systemBlue: #006BE0; --ios-systemRed: #E0392F; --ios-systemOrange: #E08A2A; --ios-systemYellow: #E0BC2A; --ios-systemGreen: #2FAE4E; --ios-systemMint: #1FAE9C; --ios-systemTeal: #2A9BAF; --ios-systemIndigo: #4D4CBC; --ios-systemPurple: #9A48C3; /* ── iOS GRAY SCALE (light) ────────────────────────── 1 = darkest gray, 6 = lightest (closest to bg). */ --ios-systemGray: #8E8E93; --ios-systemGray2: #AEAEB2; --ios-systemGray3: #C7C7CC; --ios-systemGray4: #D1D1D6; --ios-systemGray5: #E5E5EA; --ios-systemGray6: #EBEBE7; /* ── FILL COLORS (light) ────────────────────────────── Used for thin fills inside controls (segmented control track, switch backgrounds, etc). */ --ios-systemFill: rgba(120, 120, 128, 0.20); --ios-secondarySystemFill: rgba(120, 120, 128, 0.16); --ios-tertiarySystemFill: rgba(118, 118, 128, 0.12); /* ── ELEVATION SHADOWS (light) ─────────────────────── Replaces the old 2px colored borders on cards. Light backgrounds need only a soft, low-opacity shadow to read as "elevated." */ --shadow-elevation-1: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06); --shadow-elevation-2: 0 4px 12px rgba(0, 0, 0, 0.10), 0 2px 4px rgba(0, 0, 0, 0.06); /* ── SPACING SCALE (8pt grid) ──────────────────────── ACRONYM: px = pixels (smallest unit of measurement on a screen) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; /* ── RADIUS SCALE ───────────────────────────────────── iOS favors larger, "continuous corner" style rounding over small 4-8px rounding. */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 22px; /* ── SAFE AREA (notch/home-indicator clearance) ────── ACRONYM: env() = CSS environment variable function that reads device-reported safe-area insets. */ --safe-area-top: env(safe-area-inset-top, 0px); --safe-area-bottom: env(safe-area-inset-bottom, 0px); /* Height of the fixed bottom nav bar's own content (excluding the safe-area inset, which is added separately). #bottom-nav uses this directly; other screens use it to reserve scroll space so content never ends up hidden underneath the fixed bar. */ --bottom-nav-height: 56px; /* Same idea for the top app header, which is also position: fixed (so scrolled content passes beneath it, showing through its blur — matching the bottom nav). A fixed height means the title/subtitle stack just centers within it, no fragile height-guessing. */ --app-header-height: 56px; /* ── TYPOGRAPHY ─────────────────────────────────────── iOS type scale (San Francisco / SF Pro sizes), mapped onto -apple-system so it renders as actual SF Pro on real Apple devices and a close native equivalent (Segoe UI / Roboto) elsewhere. */ --font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-size-largeTitle: 34px; --font-size-title: 28px; --font-size-title2: 22px; --font-size-title3: 20px; --font-size-headline: 17px; --font-size-body: 17px; --font-size-subheadline: 15px; --font-size-footnote: 13px; --font-size-caption: 12px; --font-size-small: 12px; /* kept for back-compat with existing CSS */ /* ── CONFIDENCE SCORE COLORS (1–5) ─────────────────── Red (not confident) to green (very confident), using iOS system colors instead of arbitrary hex. */ --color-confidence-1: var(--ios-systemRed); --color-confidence-2: var(--ios-systemOrange); --color-confidence-3: var(--ios-systemYellow); --color-confidence-4: var(--ios-systemMint); --color-confidence-5: var(--ios-systemGreen); /* ── QUESTION/ANSWER TAB TINTS ─────────────────────── Theme-aware tints (derived from system colors via color-mix) instead of stale one-off rgba() values. */ --color-tab-question: color-mix(in srgb, var(--ios-systemOrange) 16%, transparent); --color-tab-answer: color-mix(in srgb, var(--ios-systemGreen) 18%, transparent); /* ── ACCENT TINTS (for glows/hover states) ─────────── Theme-aware replacements for the old stale rgba() glow colors scattered through the other CSS files. */ --tint-accent-soft: color-mix(in srgb, var(--ios-systemGreen) 12%, transparent); --tint-accent-medium: color-mix(in srgb, var(--ios-systemGreen) 20%, transparent); --tint-accent-strong: color-mix(in srgb, var(--ios-systemGreen) 35%, transparent); /* ── HIGHLIGHT-PEN LEGEND COLORS ────────────────────── Used ONLY by the highlight-to-card (OCR) feature's yellow=Question / green=Answer highlighter-pen legend (styles/highlight-select.css). This is a content color-code (like the confidence colors), NOT the interactive tint — kept separate from --color-accent-amber so it stays yellow regardless of what the app's own tint color is. */ --color-highlight-yellow: var(--ios-systemYellow); --tint-highlight-yellow-faint: color-mix(in srgb, var(--ios-systemYellow) 8%, transparent); --tint-highlight-yellow-soft: color-mix(in srgb, var(--ios-systemYellow) 20%, transparent); --tint-highlight-yellow-medium: color-mix(in srgb, var(--ios-systemYellow) 45%, transparent); --tint-highlight-green-faint: color-mix(in srgb, var(--ios-systemGreen) 8%, transparent); --tint-highlight-green-soft: color-mix(in srgb, var(--ios-systemGreen) 20%, transparent); --tint-highlight-green-medium: color-mix(in srgb, var(--ios-systemGreen) 40%, transparent); /* ── SEMANTIC APP VARIABLES ─────────────────────────── These are the names the REST of the app's CSS files already use. Only the values they resolve to change between light/dark/legacy — the names stay stable so no other file needs editing for theming. */ --color-background: var(--ios-systemGroupedBackground); --color-nav-bg: var(--ios-secondarySystemBackground); --color-border: var(--ios-separator); --color-accent-purple: var(--ios-systemIndigo); --color-accent-amber: var(--ios-systemGreen); --color-text-primary: var(--ios-label); --color-text-secondary: var(--ios-secondaryLabel); --color-text-muted: var(--ios-tertiaryLabel); --color-text-highlight: var(--ios-systemGreen); --color-card-text: var(--ios-label); --color-card-bg: var(--ios-secondarySystemGroupedBackground); --color-card-border: transparent; --color-button-bg: var(--ios-systemGreen); --color-button-border: transparent; --color-button-text: #FFFFFF; --color-button-hover: color-mix(in srgb, var(--ios-systemGreen) 85%, black); --color-nav-active: var(--ios-systemGreen); --color-surface-secondary: var(--ios-tertiarySystemFill); /* ── BORDERS ────────────────────────────────────────── Hairlines now, not 2px colored chrome. */ --border-width: 1px; --border-radius: var(--radius-md); --border-radius-card: var(--radius-lg); --border-style: solid; } /* ── DARK PALETTE — follows OS setting ───────────────── Applies automatically when the OS is in dark mode, UNLESS the user has manually forced light mode via [data-theme="light"] (handled below). */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ios-systemBackground: #000000; --ios-secondarySystemBackground: #161618; --ios-tertiarySystemBackground: #232325; /* Slightly lighter than pure black — this is what --color-background actually resolves to (the app's overall page background), so pure #000000 read as a touch too stark. A small, deliberately subtle lift. Dimmed further (was #0A0A0A) per the brightness pass. */ --ios-systemGroupedBackground: #060606; --ios-secondarySystemGroupedBackground: #161618; --ios-tertiarySystemGroupedBackground: #232325; --ios-label: #EDEDED; --ios-secondaryLabel: rgba(220, 220, 225, 0.58); --ios-tertiaryLabel: rgba(220, 220, 225, 0.30); --ios-quaternaryLabel: rgba(220, 220, 225, 0.18); --ios-separator: rgba(84, 84, 88, 0.60); --ios-opaqueSeparator: #38383A; --ios-systemBlue: #0974E0; --ios-systemRed: #DB4038; --ios-systemOrange: #DB8F1E; --ios-systemYellow: #DBBB1E; --ios-systemGreen: #29BD52; --ios-systemMint: #4EBAB4; --ios-systemTeal: #38B0C5; --ios-systemIndigo: #5351CA; --ios-systemPurple: #A84FD5; --ios-systemGray: #8E8E93; --ios-systemGray2: #636366; --ios-systemGray3: #48484A; --ios-systemGray4: #3A3A3C; --ios-systemGray5: #2C2C2E; --ios-systemGray6: #161618; --ios-systemFill: rgba(120, 120, 128, 0.36); --ios-secondarySystemFill: rgba(120, 120, 128, 0.32); --ios-tertiarySystemFill: rgba(118, 118, 128, 0.24); /* Dark backgrounds need a stronger shadow to read as elevated at all — a light-mode-strength shadow is nearly invisible on black. */ --shadow-elevation-1: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-elevation-2: 0 4px 14px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4); --color-button-hover: color-mix(in srgb, var(--ios-systemGreen) 85%, white); } } /* ── FORCED DARK — in-app toggle override ────────────── Set on by js/utils/theme-manager.js. Wins regardless of OS setting. */ [data-theme="dark"] { --ios-systemBackground: #000000; --ios-secondarySystemBackground: #161618; --ios-tertiarySystemBackground: #232325; /* Slightly lighter than pure black — see the identical comment in the prefers-color-scheme block above. */ --ios-systemGroupedBackground: #060606; --ios-secondarySystemGroupedBackground: #161618; --ios-tertiarySystemGroupedBackground: #232325; --ios-label: #EDEDED; --ios-secondaryLabel: rgba(220, 220, 225, 0.58); --ios-tertiaryLabel: rgba(220, 220, 225, 0.30); --ios-quaternaryLabel: rgba(220, 220, 225, 0.18); --ios-separator: rgba(84, 84, 88, 0.60); --ios-opaqueSeparator: #38383A; --ios-systemBlue: #0974E0; --ios-systemRed: #DB4038; --ios-systemOrange: #DB8F1E; --ios-systemYellow: #DBBB1E; --ios-systemGreen: #29BD52; --ios-systemMint: #4EBAB4; --ios-systemTeal: #38B0C5; --ios-systemIndigo: #5351CA; --ios-systemPurple: #A84FD5; --ios-systemGray: #8E8E93; --ios-systemGray2: #636366; --ios-systemGray3: #48484A; --ios-systemGray4: #3A3A3C; --ios-systemGray5: #2C2C2E; --ios-systemGray6: #161618; --ios-systemFill: rgba(120, 120, 128, 0.36); --ios-secondarySystemFill: rgba(120, 120, 128, 0.32); --ios-tertiarySystemFill: rgba(118, 118, 128, 0.24); --shadow-elevation-1: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-elevation-2: 0 4px 14px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4); --color-button-hover: color-mix(in srgb, var(--ios-systemGreen) 85%, white); } /* ── FORCED LIGHT — in-app toggle override ───────────── Set on by js/utils/theme-manager.js. Wins regardless of OS setting. Values match bare :root exactly (repeated explicitly so it always wins over the dark media query above, no matter selector order). */ [data-theme="light"] { --ios-systemBackground: #F5F5F2; --ios-secondarySystemBackground: #EBEBE7; --ios-tertiarySystemBackground: #F5F5F2; --ios-systemGroupedBackground: #EBEBE7; --ios-secondarySystemGroupedBackground: #F5F5F2; --ios-tertiarySystemGroupedBackground: #EBEBE7; --ios-label: #1C1C1E; --ios-secondaryLabel: rgba(50, 50, 45, 0.62); --ios-tertiaryLabel: rgba(50, 50, 45, 0.32); --ios-quaternaryLabel: rgba(50, 50, 45, 0.19); --ios-separator: rgba(50, 50, 45, 0.30); --ios-opaqueSeparator: #C3C1B9; --ios-systemBlue: #006BE0; --ios-systemRed: #E0392F; --ios-systemOrange: #E08A2A; --ios-systemYellow: #E0BC2A; --ios-systemGreen: #2FAE4E; --ios-systemMint: #1FAE9C; --ios-systemTeal: #2A9BAF; --ios-systemIndigo: #4D4CBC; --ios-systemPurple: #9A48C3; --ios-systemGray: #8E8E93; --ios-systemGray2: #AEAEB2; --ios-systemGray3: #C7C7CC; --ios-systemGray4: #D1D1D6; --ios-systemGray5: #E5E5EA; --ios-systemGray6: #EBEBE7; --ios-systemFill: rgba(120, 120, 128, 0.20); --ios-secondarySystemFill: rgba(120, 120, 128, 0.16); --ios-tertiarySystemFill: rgba(118, 118, 128, 0.12); --shadow-elevation-1: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06); --shadow-elevation-2: 0 4px 12px rgba(0, 0, 0, 0.10), 0 2px 4px rgba(0, 0, 0, 0.06); --color-button-hover: color-mix(in srgb, var(--ios-systemGreen) 85%, black); }