/* ============================================================================ theme.css — the "Sefer" design system. Single source of truth for the app's look: scholarly ink-navy + brass, Frank Ruhl Libre display, Assistant body. HOW THIS FILE IS ORGANIZED (and how to make future changes): 1. TOKENS — change a color/radius/font HERE and it changes everywhere. 2. BASE — elements shared by all pages (buttons, inputs, tables). 3. COMPONENTS — named classes reused across pages. 4. PER-PAGE — overrides for page-local class names, grouped by page. Rules for future work: • New UI takes its colors from the tokens (var(--ink), var(--brass)…). • Never add gradients, hover-lift transforms, or new accent colors. • Prefer adding a class here over writing inline styles in the HTML. This file loads LAST in so it wins ties against page styles. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre:wght@500;700;900&family=Assistant:wght@400;600;700&display=swap'); /* ───────────────────────────── 1 · TOKENS ────────────────────────────────── */ :root { /* palette */ --ink: #182238; /* primary — deep navy, used for actions/headers */ --ink-hover: #101828; --ink-soft: #ebeef4; /* tinted surface for selected/hover states */ --brass: #b99753; /* accent rule/highlight — used sparingly */ --brass-ink: #7d6a3f; /* brass legible on white */ --paper: #faf9f5; /* page ground */ --surface: #ffffff; /* cards */ --line: #ddd9cc; /* borders */ --line-soft: #edeae0; /* row separators */ --text: #23262e; --text-2: #6d7280; --on-ink: #f2efe6; /* text on navy */ /* semantic (status chips keep their meaning, tuned to the palette) */ --ok-bg: #eef2ea; --ok-fg: #3c5c2e; --info-bg: #ebeff6; --info-fg: #2c4a77; --warn-bg: #f8f0e2; --warn-fg: #8a5c1d; --bad-bg: #f7e9e7; --bad-fg: #8f2f26; /* shape & type */ --radius: 5px; --radius-sm: 4px; --shadow: 0 1px 2px rgba(24, 30, 48, 0.06); --font-body: 'Assistant', 'Heebo', -apple-system, sans-serif; --font-display: 'Frank Ruhl Libre', 'Assistant', serif; /* re-point the legacy token system (styles.css) at Sefer, so the hundreds of existing var(--primary-*) usages fall in line without edits */ --primary-50: #f4f5f8; --primary-100: var(--ink-soft); --primary-200: #d7dce6; --primary-300: #aeb6cb; --primary-400: #5d6b8c; --primary-500: var(--ink); --primary-600: var(--ink); --primary-700: var(--ink-hover); --primary-800: var(--ink-hover); --primary-900: #0b111e; } /* ───────────────────────────── 2 · BASE ──────────────────────────────────── */ body { background: var(--paper); font-family: var(--font-body); color: var(--text); } h1, h2, h3 { font-family: var(--font-display); letter-spacing: 0; } /* Buttons: flat ink, no gradients, no shine sweep, no levitation */ button { background: var(--ink) !important; background-image: none !important; color: var(--on-ink); border-radius: var(--radius-sm) !important; box-shadow: none !important; letter-spacing: 0; font-family: var(--font-body); } button::before { display: none !important; } button:hover { background: var(--ink-hover) !important; transform: none !important; } button:active { transform: none !important; } button.secondary { background: var(--surface) !important; color: var(--ink); border: 1px solid var(--ink); } button.secondary:hover { background: var(--ink-soft) !important; } button.danger { background: #8f2f26 !important; color: #fff; } button.danger:hover { background: #7a251d !important; } input[type="text"], input[type="number"], input[type="date"], input[type="time"], input[type="password"], input[type="email"], input[type="search"], select, textarea { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-family: var(--font-body); } input:focus, select:focus, textarea:focus { outline: 2px solid var(--ink-soft); border-color: var(--ink); } table th { font-family: var(--font-body); } /* ─────────────────────────── 3 · COMPONENTS ──────────────────────────────── */ /* Cards (skills page sections, honors cards, admin sections) */ .skill-section, .card, .section, .settings-section { background: var(--surface); border: 1px solid var(--line) !important; border-radius: var(--radius) !important; box-shadow: var(--shadow) !important; } .skill-section:hover { box-shadow: var(--shadow) !important; transform: none !important; } /* Skill headers: white with a brass base rule (the Sefer signature) */ .skill-header:not(.rtl-header), .skill-header.rtl-header { background: var(--surface) !important; background-image: none !important; color: var(--ink) !important; font-family: var(--font-display); font-weight: 700; font-size: 17px; border-bottom: 2px solid var(--brass) !important; } .skill-header:not(.rtl-header):hover, .skill-header.rtl-header:hover { background: #f4f2ea !important; } /* Category / group headers: solid ink bands */ .group-header, .group-title { background: var(--ink) !important; background-image: none !important; color: var(--on-ink) !important; border-radius: var(--radius) !important; box-shadow: none !important; font-family: var(--font-display); } /* Top bars (skills tracker bar + generic page
) */ #teacherTopBar, header { background: var(--ink) !important; background-image: none !important; color: var(--on-ink) !important; border-bottom: none; box-shadow: none !important; } #teacherTopBar h2, header h1 { color: var(--on-ink); } #hamburgerBtn, #settingsGearBtn, #logoutIconBtn, #adminNavBtn { background: transparent !important; color: var(--on-ink) !important; border: 1px solid transparent; } #hamburgerBtn:hover, #settingsGearBtn:hover, #logoutIconBtn:hover, #adminNavBtn:hover { background: rgba(255, 255, 255, 0.12) !important; } header a { color: #c9c2ab; } /* Status pills (skills values) — keep meaning, calm the colors */ .status-mastered { background: var(--ok-bg) !important; color: var(--ok-fg) !important; } .status-practiced { background: var(--info-bg) !important; color: var(--info-fg) !important; } .status-introduced{ background: var(--warn-bg) !important; color: var(--warn-fg) !important; } .skill-badge, .chip, .pill { border-radius: 3px; } /* Settings drawer (skills) */ .settings-panel { background: var(--paper); font-family: var(--font-body); } .settings-header { background: var(--ink) !important; color: var(--on-ink) !important; } .settings-section-header { background: var(--surface) !important; color: var(--ink) !important; } /* Login screen */ .login-header-band { background: var(--ink) !important; background-image: none !important; } .login-card { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } /* ─────────────────────────── 4 · PER-PAGE ────────────────────────────────── */ /* honors.html */ .tabs button { background: var(--surface) !important; color: var(--text-2); border: 1px solid var(--line); } .tabs button.active { background: var(--ink) !important; color: var(--on-ink); border-color: var(--ink); } .btn-primary { background: var(--ink) !important; color: var(--on-ink) !important; } .btn-light { background: var(--surface) !important; color: var(--ink) !important; border: 1px solid var(--line) !important; } .pill.weekly { background: var(--info-bg) !important; color: var(--info-fg) !important; } .pill.monthly { background: var(--warn-bg) !important; color: var(--warn-fg) !important; } /* report-card.html sidebar */ .sidebar-tab { background: transparent !important; color: var(--text-2) !important; border-radius: 0 !important; } .sidebar-tab.active { background: transparent !important; color: var(--ink) !important; border-bottom: 2px solid var(--brass) !important; font-weight: 700; } .gen-btn { border-radius: var(--radius-sm) !important; box-shadow: none !important; } .gen-btn.primary { background: var(--ink) !important; color: var(--on-ink) !important; } .gen-btn.secondary { background: var(--surface) !important; color: var(--ink) !important; border: 1px solid var(--ink) !important; } .gen-btn.accent { background: var(--brass) !important; color: var(--ink-hover) !important; } .style-section, .gen-section { border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--surface); } /* admin.html collapsibles */ details.collapsible > summary, .collapsible summary { font-family: var(--font-display); color: var(--ink); } /* setup wizard */ .copy-btn { background: var(--ink) !important; color: var(--on-ink) !important; border-radius: var(--radius-sm) !important; } .btn.btn-primary { background: var(--ink) !important; color: var(--on-ink) !important; } .btn.btn-secondary { background: var(--surface) !important; color: var(--ink) !important; border: 1px solid var(--ink) !important; }