/* ============================================================================= * theme.css — CodeEngine shared design system (single source of truth) * * Loaded by EVERY page. Provides: * 1. Self-hosted webfonts (Fredoka for kids, Inter for the "pro" tiers). * 2. PRIMITIVE tokens: raw color scales, spacing, radius, shadow, type. * 3. SEMANTIC tokens scoped by html[data-theme="light"|"dark"]. The semantic * names are byte-identical to what the existing pages already reference * (--bg --panel --border --text --muted --accent --accent-hover --fun), so * a page re-skins the instant `data-theme` is set on — no edits to * the page's own CSS required. html[data-theme] (0,1,1) also out-specifies * each page's local :root (0,1,0), so these win even if declared first. * 4. Framework-free component classes (.ce-btn .ce-card .ce-tag .ce-progress …) * for NEW pages. They are PREFIXED (ce-) so they never collide with the * unprefixed .card/.tag/.badge the existing hub/studio pages already own. * * Fonts are cached 7 days by the server — version the FILENAME if you re-cut a * face (e.g. fredoka-600.v2.woff2), never overwrite silently. * ========================================================================== */ /* ---- 1. Fonts (self-hosted; school networks often block font CDNs) -------- */ @font-face { font-family: "Fredoka"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/fredoka-400.woff2") format("woff2"); } @font-face { font-family: "Fredoka"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/fredoka-600.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/inter-400.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/inter-600.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/inter-700.woff2") format("woff2"); } /* ---- 2. Primitive tokens -------------------------------------------------- */ :root { /* Blue (brand / accents / links) */ --blue-50:#eff6ff; --blue-100:#dbeafe; --blue-200:#bfdbfe; --blue-300:#93c5fd; --blue-400:#60a5fa; --blue-500:#3b82f6; --blue-600:#2563eb; --blue-700:#1d4ed8; --blue-800:#1e40af; --blue-900:#1e3a8a; /* Green (success / "go" / primary action) */ --green-50:#ecfdf5; --green-100:#d1fae5; --green-300:#6ee7b7; --green-400:#34d399; --green-500:#10b981; --green-600:#059669; --green-700:#047857; /* Amber (fun / rewards / stars) */ --amber-100:#fef3c7; --amber-300:#fcd34d; --amber-400:#fbbf24; --amber-500:#f59e0b; --amber-600:#d97706; /* Red (danger / errors) */ --red-100:#fee2e2; --red-400:#f87171; --red-500:#ef4444; --red-600:#dc2626; /* Violet (secondary accent) */ --violet-400:#a78bfa; --violet-500:#8b5cf6; --violet-600:#7c3aed; /* Slate (light-mode neutrals) */ --slate-50:#f8fafc; --slate-100:#f1f5f9; --slate-200:#e2e8f0; --slate-300:#cbd5e1; --slate-400:#94a3b8; --slate-500:#64748b; --slate-600:#475569; --slate-700:#334155; --slate-800:#1e293b; --slate-900:#0f172a; /* Ink (dark-mode neutrals — GitHub-ish, matches the studio's existing look) */ --ink-50:#e6edf3; --ink-100:#c9d1d9; --ink-300:#8b949e; --ink-500:#484f58; --ink-600:#30363d; --ink-700:#21262d; --ink-800:#161b22; --ink-900:#0d1117; /* Spacing (4px step) */ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; /* Radius */ --radius-sm:6px; --radius-md:10px; --radius-lg:16px; --radius-xl:22px; --radius-pill:999px; /* Shadows */ --shadow-1:0 1px 2px rgba(15,23,42,.08), 0 1px 3px rgba(15,23,42,.10); --shadow-2:0 4px 12px rgba(15,23,42,.12); --shadow-3:0 12px 32px rgba(15,23,42,.18); /* Typography */ --font-kid:"Fredoka","Segoe UI",system-ui,sans-serif; --font-ui:"Inter","Segoe UI",system-ui,-apple-system,Roboto,sans-serif; --font-mono:ui-monospace,"Cascadia Code",Consolas,"SF Mono",monospace; --fs-100:.75rem; --fs-200:.85rem; --fs-300:.95rem; --fs-400:1rem; --fs-500:1.15rem; --fs-600:1.35rem; --fs-700:1.7rem; --fs-800:2.2rem; --lh-tight:1.2; --lh-base:1.55; } /* ---- 3. Semantic tokens by theme ----------------------------------------- */ /* Values below MATCH the pages' existing palettes exactly, so adopting * theme.css is a safe consolidation: the only intended visible change is the * font. Deliberate palette beautification happens in a later phase. */ /* DARK — studio + hub (the established GitHub-dark palette). */ html[data-theme="dark"] { color-scheme: dark; --bg:#0d1117; --panel:#161b22; --panel-2:#21262d; --border:#30363d; --text:#e6edf3; --muted:#8b949e; --accent:#238636; --accent-hover:#2ea043; --accent-ink:#ffffff; /* text on top of --accent */ --info:#79c0ff; --danger:#f85149; --fun:var(--amber-400); --font-app:var(--font-ui); --ring:0 0 0 3px rgba(56,139,253,.4); } /* LIGHT — kids' puzzle pages + course map (bright, friendly). */ html[data-theme="light"] { color-scheme: light; --bg:#f4f8ff; --panel:#ffffff; --panel-2:#eef4fb; --border:#d5e0f0; --text:#1c2a3a; --muted:#6b7c93; --accent:#22a06b; --accent-hover:#1c8a5b; --accent-ink:#ffffff; --info:#2c6fd6; --danger:#d64550; --fun:#ff8f3d; --font-app:var(--font-kid); --ring:0 0 0 3px rgba(44,111,214,.35); /* Puzzle-stage board palette (read by engine/render.js via getComputedStyle). */ --stage-floor:#eaf2ff; --stage-floor-2:#ffffff; --stage-grid:#d9e6fa; --stage-wall:#8098bd; --stage-wall-2:#9db3d4; --stage-wall-3:#63789d; } /* ---- 4. Components (opt-in; NEW pages use these; prefixed to never collide * with existing page classes like hub.css's .card/.tag/.badge). ------ */ .ce-btn { display:inline-flex; align-items:center; gap:var(--space-2); font-family:inherit; font-weight:600; font-size:var(--fs-300); padding:var(--space-2) var(--space-4); border-radius:var(--radius-md); border:1px solid transparent; background:var(--panel-2); color:var(--text); cursor:pointer; text-decoration:none; line-height:1; transition:background .15s, box-shadow .15s, transform .05s; } .ce-btn:hover { background:var(--border); } .ce-btn:active { transform:translateY(1px); } .ce-btn:focus-visible { outline:none; box-shadow:var(--ring); } .ce-btn--primary { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); } .ce-btn--primary:hover { background:var(--accent-hover); } .ce-btn--ghost { background:transparent; border-color:var(--border); } .ce-btn--ghost:hover { background:var(--panel-2); } .ce-btn--danger { background:var(--danger); color:#fff; border-color:var(--danger); } .ce-btn--lg { font-size:var(--fs-400); padding:var(--space-3) var(--space-6); border-radius:var(--radius-lg); } .ce-card { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--space-5); box-shadow:var(--shadow-1); } .ce-badge { display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-100); font-weight:700; padding:2px 10px; border-radius:var(--radius-pill); background:var(--panel-2); color:var(--muted); } .ce-tag { display:inline-block; font-size:var(--fs-100); font-weight:700; padding:2px 9px; border-radius:var(--radius-pill); } .ce-tag.green { background:var(--green-100); color:var(--green-700); } .ce-tag.red { background:var(--red-100); color:var(--red-600); } .ce-tag.gold { background:var(--amber-100); color:var(--amber-600); } .ce-tag.blue { background:var(--blue-100); color:var(--blue-700); } .ce-progress { height:10px; background:var(--panel-2); border-radius:var(--radius-pill); overflow:hidden; } .ce-progress > i { display:block; height:100%; background:var(--accent); border-radius:inherit; transition:width .3s ease; } /* ---- M9: language template toolbox (lang-panel.js) ------------------ Shared component: the studio mounts it in a side panel, the guide page reuses it. Class names keep their original ce-cpp-* prefix (the panel began as C++-only) and are now language-agnostic. Purely token-driven so it themes light/dark with no extra rules. */ .ce-cpp { display:flex; flex-direction:column; min-height:0; font-family:var(--font-ui); } .ce-cpp-controls { flex:0 0 auto; padding:var(--space-2); border-bottom:1px solid var(--border); background:var(--panel); } .ce-cpp-search { width:100%; padding:7px 10px; font:inherit; font-size:var(--fs-100); color:var(--text); background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-sm); } .ce-cpp-search:focus { outline:none; box-shadow:var(--ring); border-color:var(--accent); } .ce-cpp-chips { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; } .ce-cpp-chip { font:inherit; font-size:var(--fs-100); font-weight:600; cursor:pointer; padding:2px 9px; border-radius:var(--radius-pill); background:var(--panel-2); color:var(--muted); border:1px solid transparent; } .ce-cpp-chip:hover { color:var(--text); } .ce-cpp-chip.is-on { background:var(--accent); color:var(--accent-ink); } .ce-cpp-chip:focus-visible { outline:none; box-shadow:var(--ring); } .ce-cpp-list { flex:1 1 auto; overflow-y:auto; min-height:0; } .ce-cpp-cat > summary { cursor:pointer; user-select:none; display:flex; align-items:center; gap:8px; padding:7px var(--space-2); font-size:var(--fs-100); font-weight:700; color:var(--text); background:var(--panel-2); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:1; } .ce-cpp-cat > summary:focus-visible { outline:none; box-shadow:var(--ring); } .ce-cpp-cat-title { flex:1 1 auto; } .ce-cpp-count { font-weight:700; color:var(--muted); font-size:var(--fs-100); } .ce-cpp-row { display:flex; align-items:stretch; gap:0; border-bottom:1px solid var(--border); } .ce-cpp-item { flex:1 1 auto; display:flex; align-items:center; gap:8px; text-align:left; font:inherit; font-size:var(--fs-100); cursor:pointer; padding:6px var(--space-2); background:transparent; color:var(--text); border:0; } .ce-cpp-item:hover { background:var(--panel-2); } .ce-cpp-item:focus-visible { outline:none; box-shadow:var(--ring); } .ce-cpp-label { flex:1 1 auto; } .ce-cpp-lvl { flex:0 0 auto; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:1px 6px; border-radius:var(--radius-pill); background:var(--panel-2); color:var(--muted); } .ce-cpp-lvl[data-level="basic"] { color:var(--accent); } .ce-cpp-lvl[data-level="intermediate"] { color:var(--info); } .ce-cpp-lvl[data-level="advanced"] { color:var(--fun); } .ce-cpp-info { flex:0 0 auto; width:28px; font:inherit; font-weight:700; cursor:pointer; background:transparent; color:var(--muted); border:0; border-left:1px solid var(--border); } .ce-cpp-info:hover, .ce-cpp-info.is-on { color:var(--accent); background:var(--panel-2); } .ce-cpp-info:focus-visible { outline:none; box-shadow:var(--ring); } .ce-cpp-note { padding:8px var(--space-2); background:var(--bg); border-bottom:1px solid var(--border); } .ce-cpp-explain { margin:0 0 6px; font-size:var(--fs-100); line-height:var(--lh-base); color:var(--muted); } .ce-cpp-code { margin:0; padding:8px; overflow-x:auto; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-sm); font-family:var(--font-mono); font-size:var(--fs-100); line-height:1.45; color:var(--text); } .ce-cpp-trigger { margin:6px 0 0; font-size:var(--fs-100); color:var(--muted); } .ce-cpp-trigger code { font-family:var(--font-mono); background:var(--panel-2); padding:1px 5px; border-radius:4px; color:var(--info); } .ce-cpp-empty { padding:var(--space-4); text-align:center; color:var(--muted); font-size:var(--fs-100); } .ce-topbar { display:flex; align-items:center; gap:var(--space-4); padding:var(--space-2) var(--space-4); background:var(--panel); border-bottom:1px solid var(--border); flex:0 0 auto; }