/* Latin 103 Reader — design tokens. One file for colour, type, spacing, motion, z-index. Light is the base; dark follows the system preference unless overrides it. Reading-text controls (size, face) are driven by data-size / data-face on , set before first paint by the inline script in index.html. */ :root { color-scheme: light; /* Surfaces — chroma-0 neutrals, tinted only a hair toward the ink hue. */ --bg: oklch(0.985 0.002 60); --bg-chrome: oklch(0.955 0.004 60); /* header, panels */ --bg-raised: oklch(1 0 0); --line: oklch(0.86 0.006 60); --line-strong: oklch(0.72 0.01 60); /* Ink */ --ink: oklch(0.2 0.015 60); --ink-2: oklch(0.42 0.015 60); /* secondary: English, parse line (≥ 7:1 on bg) */ --ink-3: oklch(0.55 0.012 60); /* tertiary: line numbers, meta (≥ 4.5:1) */ /* Rubric — the one accent. Madder red, as in a rubricated book. */ --rubric: oklch(0.5 0.16 25); --rubric-soft: oklch(0.5 0.16 25 / 0.12); --rubric-ink: oklch(0.42 0.16 25); /* Marks in the text */ --underline: oklch(0.86 0.17 95); /* looked-up word */ --underline-learned: transparent; --glow-bg: oklch(0.94 0.045 235); /* grammar-focus span */ --glow-ring: oklch(0.86 0.08 235); --glow-ink: oklch(0.36 0.1 235); --selection: oklch(0.9 0.06 235); --cursor-bg: oklch(0.5 0.16 25 / 0.2); /* the word being spoken (audio follow-along) */ --cursor-line: oklch(0.5 0.16 25); /* State */ --focus: oklch(0.55 0.17 235); --danger: oklch(0.5 0.17 25); --success: oklch(0.5 0.12 150); /* Type */ --face-serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif; --face-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --face-dyslexic: "OpenDyslexic", "Comic Sans MS", Verdana, sans-serif; --face-reading: var(--face-serif); --face-ui: var(--face-sans); --face-mono: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace; --reading-scale: 1.25; /* size step 3 of 8 (20px) */ --reading-size: calc(1rem * var(--reading-scale)); --reading-leading: 1.55; --measure: 34em; /* ≈ 65–70 ch in the serif */ --ui-xs: 0.75rem; --ui-sm: 0.8125rem; --ui-md: 0.9375rem; --ui-lg: 1.0625rem; /* Notes size (Settings → Type "Notes", data-note-size on ): one factor over everything note-like — margin glosses, captions, the panel's rows and note bodies, "In plain words", the summaries' English — never the reading text or the chrome. Step 4 = 1: today's look. The --note-* tokens are the --ui-* steps under that factor; em-sized notes in the text multiply the factor in themselves. */ --note-scale: 1; --note-xs: calc(var(--ui-xs) * var(--note-scale)); --note-sm: calc(var(--ui-sm) * var(--note-scale)); --note-md: calc(var(--ui-md) * var(--note-scale)); /* Space */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --gutter: max(3.25rem, 2.4em); /* line-number margin; grows with the reading size (capped on phones, reader.css) */ --margin-col: 14rem; /* margin-notes gutter: tablet; 15rem from 1100px (reader.css) */ --margin-gap: 1.25rem; --panel-default: 24rem; /* side panel: desktop width when the divider has not been moved */ --panel-min: 18rem; /* side panel: resizable between these (read by main.js) */ --panel-max: 60vw; --tap: 44px; --radius-sm: 4px; --radius: 8px; --radius-lg: 12px; --shadow-pop: 0 1px 2px oklch(0 0 0 / 0.08), 0 6px 18px oklch(0 0 0 / 0.14); --scroll-shade: oklch(0 0 0 / 0.14); /* edge fade on a box that scrolls sideways (paradigm tables) */ /* Motion */ --t-fast: 120ms; --t-base: 180ms; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* z scale */ --z-sticky: 10; --z-popover: 20; --z-modal: 30; --z-tooltip: 40; } /* Reading size: eight steps — 16 18 20 23 27 32 38 44 px */ html[data-size="1"] { --reading-scale: 1; } html[data-size="2"] { --reading-scale: 1.125; } html[data-size="3"] { --reading-scale: 1.25; } html[data-size="4"] { --reading-scale: 1.4375; } html[data-size="5"] { --reading-scale: 1.6875; } html[data-size="6"] { --reading-scale: 2; } html[data-size="7"] { --reading-scale: 2.375; } html[data-size="8"] { --reading-scale: 2.75; } /* Notes size: seven steps in finer increments than the reading scale (~8% apart) */ html[data-note-size="1"] { --note-scale: 0.76; } html[data-note-size="2"] { --note-scale: 0.84; } html[data-note-size="3"] { --note-scale: 0.92; } html[data-note-size="4"] { --note-scale: 1; } html[data-note-size="5"] { --note-scale: 1.09; } html[data-note-size="6"] { --note-scale: 1.19; } html[data-note-size="7"] { --note-scale: 1.3; } /* Reading face */ html[data-face="serif"] { --face-reading: var(--face-serif); } html[data-face="sans"] { --face-reading: var(--face-sans); } html[data-face="dyslexic"] { --face-reading: var(--face-dyslexic); --reading-leading: 1.7; --measure: 30em; } /* Dark palette */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: oklch(0.19 0.01 60); --bg-chrome: oklch(0.23 0.01 60); --bg-raised: oklch(0.26 0.01 60); --line: oklch(0.33 0.01 60); --line-strong: oklch(0.46 0.012 60); --ink: oklch(0.92 0.01 70); --ink-2: oklch(0.76 0.012 70); --ink-3: oklch(0.64 0.012 70); --rubric: oklch(0.72 0.14 25); --rubric-soft: oklch(0.72 0.14 25 / 0.16); --rubric-ink: oklch(0.78 0.13 25); --underline: oklch(0.8 0.15 95); --glow-bg: oklch(0.31 0.05 235); --glow-ring: oklch(0.42 0.08 235); --glow-ink: oklch(0.85 0.06 235); --selection: oklch(0.38 0.07 235); --cursor-bg: oklch(0.72 0.14 25 / 0.3); --cursor-line: oklch(0.78 0.13 25); --focus: oklch(0.78 0.13 235); --danger: oklch(0.72 0.15 25); --success: oklch(0.75 0.12 150); --shadow-pop: 0 1px 2px oklch(0 0 0 / 0.4), 0 8px 24px oklch(0 0 0 / 0.5); --scroll-shade: oklch(0 0 0 / 0.5); } } :root[data-theme="dark"] { color-scheme: dark; --bg: oklch(0.19 0.01 60); --bg-chrome: oklch(0.23 0.01 60); --bg-raised: oklch(0.26 0.01 60); --line: oklch(0.33 0.01 60); --line-strong: oklch(0.46 0.012 60); --ink: oklch(0.92 0.01 70); --ink-2: oklch(0.76 0.012 70); --ink-3: oklch(0.64 0.012 70); --rubric: oklch(0.72 0.14 25); --rubric-soft: oklch(0.72 0.14 25 / 0.16); --rubric-ink: oklch(0.78 0.13 25); --underline: oklch(0.8 0.15 95); --glow-bg: oklch(0.31 0.05 235); --glow-ring: oklch(0.42 0.08 235); --glow-ink: oklch(0.85 0.06 235); --selection: oklch(0.38 0.07 235); --cursor-bg: oklch(0.72 0.14 25 / 0.3); --cursor-line: oklch(0.78 0.13 25); --focus: oklch(0.78 0.13 235); --danger: oklch(0.72 0.15 25); --success: oklch(0.75 0.12 150); --shadow-pop: 0 1px 2px oklch(0 0 0 / 0.4), 0 8px 24px oklch(0 0 0 / 0.5); --scroll-shade: oklch(0 0 0 / 0.5); } @media (prefers-reduced-motion: reduce) { :root { --t-fast: 0ms; --t-base: 0ms; } } /* Registered so getComputedStyle() returns the panel bounds in px (main.js reads them for the divider); the :root values above are the real ones. */ @property --panel-min { syntax: ""; inherits: true; initial-value: 0px; } @property --panel-max { syntax: ""; inherits: true; initial-value: 0px; }