/* Hermione design tokens + shared base — used by every page. * Lifted out of the individual pages so the visual language (colour, spacing, * type scale, focus behaviour) lives in one place and survives a future * frontend rewrite (e.g. a component framework can consume these CSS vars). */ /* Two palettes, one set of names. * * Dark is the default in :root, and it's a deliberately classroom-flavoured * "chalkboard": slate-green surfaces, warm chalk-white text, dusty muted tones, * and a faint chalk-dust texture on . Semantic hues stay dark enough that * white-on-colour pills, toasts and primary buttons keep their contrast. * * Light (a clean "whiteboard") is applied two ways: * 1. automatically, via prefers-color-scheme, when the teacher hasn't made * an explicit choice (i.e. there's no data-theme override pinning dark); * 2. on demand, when data-theme="light" is set on (the header toggle, * persisted to localStorage). * data-theme always wins over the system preference, so the toggle is a real * override in both directions. Pages set data-theme from an inline * script before first paint, so there's no flash of the wrong theme. */ :root { color-scheme: dark; /* surfaces — slate "blackboard" */ --bg: #243831; --surface: #2b4239; --surface-2: #355046; --border: #4d6358; --border-subtle: #36493f; /* text — warm chalk, all chosen to clear 4.5:1 on the surfaces they sit on */ --fg: #eef1e6; --fg-muted: #b4c0ad; --fg-subtle: #93a08e; /* semantic — softened "coloured chalk", but dark enough for white-on-colour */ --accent: #3f7cbb; --brand: #e9d27a; --green: #4caf63; --green-emphasis: #67c97e; --red: #ef8e8e; --amber: #e6c163; --help-bg: #b62324; --watch-bg: #9e6a03; /* a real type scale — five steps, not thirteen */ --fs-xs: 11px; --fs-sm: 12px; --fs-base: 14px; --fs-lg: 16px; --fs-xl: 20px; /* shape + motion — named once so every card, pill and modal agrees */ --radius-sm: 6px; --radius: 10px; --radius-lg: 12px; --radius-pill: 999px; --ease: cubic-bezier(.2, .6, .2, 1); /* elevation — three soft steps, tuned for the dark board */ --shadow-1: 0 1px 2px rgba(0, 0, 0, .28); --shadow-2: 0 6px 18px rgba(0, 0, 0, .38); --shadow-3: 0 18px 44px rgba(0, 0, 0, .5); /* semantic washes — a faint fill so a "needs help" card reads as coloured, * not just left-bordered. Mixed straight from the semantic hue so they * track light/dark automatically. */ --help-wash: color-mix(in srgb, var(--red) 12%, transparent); --watch-wash: color-mix(in srgb, var(--amber) 12%, transparent); --accent-wash: color-mix(in srgb, var(--accent) 14%, transparent); } /* Chalk-dust grain + a soft top-of-board glow, layered over the chalkboard. * Higher specificity than the per-page `body { background: var(--bg) }`, so it * adds a texture on top; the light theme turns it back off (below). */ :root body { background-image: radial-gradient(120% 80% at 50% -20%, rgba(255,255,255,.06), transparent 55%), radial-gradient(90% 60% at 85% 115%, rgba(255,255,255,.04), transparent 55%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"); background-attachment: fixed; } /* The light "whiteboard" palette. Surfaces invert (white page, grey cards); the * semantic colours are the darker, light-background variants so text still * clears 4.5:1, and the help/watch pills stay dark enough to carry white text. * The chalk texture is removed so the board reads as clean paper. */ :root[data-theme="light"] { color-scheme: light; --bg: #ffffff; --surface: #f6f8fa; --surface-2: #eaeef2; --border: #d0d7de; --border-subtle: #e4e8ed; --fg: #1f2328; --fg-muted: #59636e; --fg-subtle: #6e7781; --accent: #0969da; --brand: #8250df; --green: #1a7f37; --green-emphasis: #1f883d; --red: #cf222e; --amber: #9a6700; --help-bg: #cf222e; --watch-bg: #9a6700; /* softer, cooler shadows on the bright whiteboard */ --shadow-1: 0 1px 2px rgba(31, 35, 40, .08); --shadow-2: 0 4px 14px rgba(31, 35, 40, .1); --shadow-3: 0 16px 40px rgba(31, 35, 40, .16); } :root[data-theme="light"] body { background-image: none; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; --bg: #ffffff; --surface: #f6f8fa; --surface-2: #eaeef2; --border: #d0d7de; --border-subtle: #e4e8ed; --fg: #1f2328; --fg-muted: #59636e; --fg-subtle: #6e7781; --accent: #0969da; --brand: #8250df; --green: #1a7f37; --green-emphasis: #1f883d; --red: #cf222e; --amber: #9a6700; --help-bg: #cf222e; --watch-bg: #9a6700; --shadow-1: 0 1px 2px rgba(31, 35, 40, .08); --shadow-2: 0 4px 14px rgba(31, 35, 40, .1); --shadow-3: 0 16px 40px rgba(31, 35, 40, .16); } :root:not([data-theme="dark"]) body { background-image: none; } } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; } /* Crisper type on both palettes. */ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Keyboard focus is always visible; mouse focus stays quiet. */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } :focus:not(:focus-visible) { outline: none; } /* Quiet, theme-aware scrollbars so long columns/threads don't show a bright * default track over the chalkboard. */ * { scrollbar-width: thin; scrollbar-color: var(--border) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--radius-pill); border: 2px solid transparent; background-clip: padding-box; } *::-webkit-scrollbar-thumb:hover { background: var(--fg-subtle); background-clip: padding-box; } *::-webkit-scrollbar-track { background: transparent; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }