/* Design tokens. Present mode (data-mode="present" on ) rescales type, strokes and handles so the same manipulative reads from the back of a classroom. */ :root { /* --- palette. Cool neutrals so the mathematics carries the colour. --- */ --ink: #16202c; --ink-soft: #4a5a6b; --ink-faint: #8496a6; --paper: #f7f9fb; --surface: #ffffff; --surface-sunk: #eef2f6; --border: #d6dfe7; --border-strong: #b6c4d1; /* Figure colours, following the textbook's blue figures on white. */ --figure-fill: #cfeaf3; --figure-fill-2: #f6dfc8; --figure-stroke: #2b6b83; --figure-stroke-2: #a1622a; /* Semantic. Never colour alone — always paired with a mark or words. */ --ok: #1f7a4d; --ok-soft: #e3f5ec; --nearly: #9a6b00; --nearly-soft: #fdf3dc; --no: #b3261e; --no-soft: #fdeceb; --accent: #1f5fa8; --accent-soft: #e6eff9; --highlight: #d94f8a; /* --- type --- */ --font-sans: "Segoe UI", system-ui, -apple-system, sans-serif; --font-math: "Cambria Math", Cambria, "Times New Roman", Georgia, serif; --font-mono: "Cascadia Mono", Consolas, monospace; --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.375rem; --fs-2xl: 1.75rem; --fs-3xl: 2.25rem; /* --- geometry rendering: the values Present mode overrides --- */ --geo-stroke: 2; --geo-stroke-thin: 1.25; --geo-annotation-stroke: 1.5; --handle-r: 7; --handle-hit-r: 16; --geo-label-size: 15px; --geo-small-label-size: 13px; /* --- spacing & shape --- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --radius: 10px; --radius-sm: 6px; --radius-lg: 16px; --shadow: 0 1px 2px rgba(22, 32, 44, 0.06), 0 4px 12px rgba(22, 32, 44, 0.07); --shadow-lg: 0 8px 32px rgba(22, 32, 44, 0.14); --panel-width: 340px; --header-h: 56px; } /* Present mode: bigger everything, and the scaffolding hides itself. */ :root[data-mode="present"] { --fs-xs: 0.95rem; --fs-sm: 1.05rem; --fs-base: 1.25rem; --fs-lg: 1.5rem; --fs-xl: 1.9rem; --fs-2xl: 2.4rem; --fs-3xl: 3rem; --geo-stroke: 3.5; --geo-stroke-thin: 2; --geo-annotation-stroke: 2.5; --handle-r: 11; --handle-hit-r: 22; --geo-label-size: 24px; --geo-small-label-size: 20px; --panel-width: 400px; --header-h: 64px; } @media (prefers-reduced-motion: reduce) { :root { --motion: 0; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }