tokens.css
Rama main · réplica de lectura del repositorio original.
/* Legacy token sheet · structural scale + orphan colours · 2026-09-25
*
* The active colour palette lives in src/app/refactor.css (:root and .dark,
* "morning light" warm skin); this file keeps the structural scale (type,
* space, radius, motion) and now only owns the colour tokens refactor.css
* does not redefine: sky, blue-wash, overlay-ink, and the print family, plus
* a warm legacy fallback for everything else. Token names are contract — the
* MUI bridge (scripts/gen-mui-tokens.mjs -> src/theme/site-tokens.json)
* reads blue-wash and sky by name, so names may never be removed here.
* Values follow the morning-light warm axis: 85-92 paper family, 48-55 ink
* and clay, 78 honey, 150 sage, 25 danger. */
:root {
--color-paper: oklch(97% 0.007 250);
--color-paper-strong: oklch(99.4% 0.003 250);
--color-ink: oklch(24% 0.042 252);
--color-night: oklch(18% 0.034 252);
--color-night-ink: oklch(93.5% 0.012 245);
--color-accent: oklch(44% 0.132 255);
--color-accent-ink: oklch(98.6% 0.005 250);
--color-accent-soft: oklch(90.5% 0.048 255);
--color-teal: oklch(52% 0.088 205);
--color-teal-soft: oklch(90% 0.034 205);
--color-signal: oklch(74% 0.115 78);
--color-signal-ink: oklch(26% 0.045 75);
--color-sky: oklch(85% 0.05 80);
--color-muted: oklch(91.5% 0.013 250);
--color-muted-text: oklch(46% 0.024 252);
/* The sheet: one step off the page, for a card that holds a reading and for the
* bands that separate one reading from the next. It was a warm parchment tint
* until this palette, which is the one thing it cannot be here -- brass has to
* mean a measured value and nothing else, and a page of warm cards would spend
* that meaning before the reader reaches a single number. */
--color-sheet-wash: oklch(91.5% 0.03 245);
--color-sheet-surface: oklch(98.2% 0.011 245);
--color-sheet-ink: oklch(45% 0.06 250);
--color-blue-wash: oklch(92.5% 0.03 75);
--color-danger: oklch(52% 0.16 22);
--color-overlay-ink: oklch(100% 0 0);
--color-print-paper: oklch(100% 0 0);
--color-print-ink: oklch(25% 0.03 48);
--color-print-muted: oklch(44% 0.02 50);
/* The four public topics need to be told apart, and the obvious way -- one hue
* per topic, red for feelings, green for life -- would spend the whole palette
* on a taxonomy and leave brass no longer meaning "this is the reading". So the
* topics vary inside the blueprint family instead: 258, 232, 205, 188, a walk
* from prussian to cyan to a cyan-green, with chroma falling as hue turns so
* none of the four shouts louder than another. A cyanotype print is a
* monochrome object; these are four exposures of it. */
--color-topic-self: oklch(46% 0.105 45);
--color-topic-emotion: oklch(50% 0.09 25);
--color-topic-relationship: oklch(51% 0.07 70);
--color-topic-life: oklch(47% 0.06 140);
--background: var(--color-paper);
--foreground: var(--color-ink);
--paper: var(--color-paper);
--paper-strong: var(--color-paper-strong);
--ink: var(--color-ink);
--night: var(--color-night);
--accent: var(--color-accent);
--muted: var(--color-muted);
--muted-foreground: var(--color-muted-text);
--muted-text: var(--color-muted-text);
--sheet-wash: var(--color-sheet-wash);
--sheet-surface: var(--color-sheet-surface);
--sheet-ink: var(--color-sheet-ink);
--blue-wash: var(--color-blue-wash);
--danger: var(--color-danger);
--accent-wash: color-mix(in oklab, var(--accent) 11%, var(--paper));
--surface-contrast: var(--color-ink);
--surface-contrast-ink: var(--color-paper);
--teal: var(--color-teal);
--teal-soft: var(--color-teal-soft);
--signal: var(--color-signal);
--signal-ink: var(--color-signal-ink);
--sky: var(--color-sky);
--topic-self: var(--color-topic-self);
--topic-emotion: var(--color-topic-emotion);
--topic-relationship: var(--color-topic-relationship);
--topic-life: var(--color-topic-life);
--line: color-mix(in oklab, var(--ink) 18%, transparent);
--soft-line: color-mix(in oklab, var(--ink) 11%, transparent);
--sheet-line: color-mix(in oklab, var(--sheet-ink) 22%, transparent);
--border: var(--soft-line);
--ring: var(--accent);
/* The measuring instrument. Its parts are tokens because a quiz's progress and
* a result's dimension have to read as the same object across two pages. */
--meter-track: color-mix(in oklab, var(--ink) 7%, transparent);
--meter-rule: color-mix(in oklab, var(--ink) 20%, transparent);
--meter-fill: var(--accent);
--meter-needle: var(--signal);
/* Archivo carries the display tier; it has no han glyphs, so CJK falls through
* to the system faces behind it and keeps its own metrics. Body text stays on
* the system stack in both scripts -- a downloaded body face would buy nothing
* for the half of this product that is Chinese. */
--font-display: var(--font-archivo), "Segoe UI", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
--font-body: "Segoe UI", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
--font-code: var(--font-plex-mono), "Cascadia Code", "SFMono-Regular", Consolas, monospace;
--space-3xs: 0.25rem;
--space-2xs: 0.5rem;
--space-xs: 0.75rem;
--space-sm: 1rem;
--space-md: 1.5rem;
--space-lg: 2rem;
--space-xl: 3rem;
--space-2xl: 4.5rem;
--space-3xl: 7rem;
--text-2xs: 0.6875rem;
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-md: 1rem;
--text-lg: 1.25rem;
--text-xl: 1.75rem;
--text-2xl: 2.5rem;
--text-3xl: 3.25rem;
--text-display: 4rem;
/* Tracking is part of the hierarchy, not decoration: the display tier is set
* tight because Archivo's Latin is wide at heavy weights, and the small
* all-caps labels are opened up because 11px letters need the air. */
--tracking-display: -0.022em;
--tracking-title: -0.012em;
--tracking-body: 0em;
--tracking-label: 0.08em;
--radius-control: 0.3rem;
--radius-panel: 0.5rem;
--radius-media: 0.25rem;
--radius-pill: 999px;
--shadow-card-hover: 0 1.25rem 2.5rem color-mix(in oklab, var(--color-ink) 14%, transparent);
--shadow-feedback: 0 0.875rem 2rem color-mix(in oklab, var(--color-ink) 17%, transparent);
--shadow-dialog: 0 1.5rem 4rem color-mix(in oklab, var(--color-night) 26%, transparent);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--duration-short: 180ms;
--duration-medium: 280ms;
--layout-max: 80rem;
--header-height: 4.5rem;
--banner-height: 4.5rem;
--shadow-soft: 0 1.25rem 2.75rem color-mix(in oklab, var(--color-ink) 11%, transparent);
--shadow-lift: 0 1.75rem 3.5rem color-mix(in oklab, var(--color-ink) 16%, transparent);
}
.dark {
--color-paper: var(--color-night);
--color-paper-strong: oklch(24% 0.036 252);
--color-ink: var(--color-night-ink);
--color-accent: oklch(72% 0.118 250);
--color-accent-ink: oklch(17% 0.038 252);
--color-accent-soft: oklch(30% 0.062 252);
--color-teal: oklch(75% 0.075 205);
--color-teal-soft: oklch(28% 0.045 205);
--color-signal: oklch(81% 0.11 80);
--color-signal-ink: oklch(22% 0.035 78);
--color-sky: oklch(76% 0.045 78);
--color-muted: oklch(28% 0.016 55);
--color-muted-text: oklch(75.5% 0.016 245);
--color-sheet-wash: oklch(29% 0.038 248);
--color-sheet-surface: oklch(23.5% 0.03 250);
--color-sheet-ink: oklch(78% 0.055 245);
--color-blue-wash: oklch(28% 0.03 60);
--color-topic-self: oklch(74.5% 0.1 45);
--color-topic-emotion: oklch(77% 0.09 25);
--color-topic-relationship: oklch(79% 0.07 70);
--color-topic-life: oklch(77.5% 0.055 140);
--color-danger: oklch(74% 0.12 22);
/* Light mode inverts to ink for its loudest surface. Dark mode has nothing
* darker than the page to invert to, so the contrast surface becomes the
* lightest layer instead and the elevation ladder stays readable:
* page 18% -> cards 24% -> header, footer, panels 28%. */
--surface-contrast: oklch(28% 0.038 252);
--surface-contrast-ink: var(--color-night-ink);
}