/* NomoreLater design tokens — Pixel Momo * single source: docs/design/design-system.md — extension/tokens.css and * landing/tokens.css must stay byte-identical (checked by scripts/check.mjs). * * Narrative: green = us (Momo, digesting, done) · red = the enemy / exit * (YouTube jump, destruction). No blue. * * Dark mode: light tokens live on :root. Dark overrides are declared twice — * [data-theme="dark"] → extension's future switch (currently inert) * :root[data-theme="auto"] + media → landing opts in via * The extension HTML sets no data-theme attribute, so it stays light. */ /* ---------------------------------------------------------------- pixel font */ @font-face { font-family: "VT323"; src: url("./fonts/VT323-Regular.woff2") format("woff2"); font-display: swap; } /* -------------------------------------------------------------- light tokens */ :root { /* color — greens (Momo canonical hex from docs/brand-assets/momo-usage.md) */ --nml-green: #71af3f; /* body green — non-text accent / illustration / soft bg */ --nml-green-deep: #0d5820; /* shell green — primary CTA fill (+white), focus ring, green text */ --nml-green-soft: color-mix(in srgb, var(--nml-green) 12%, var(--nml-surface-strong)); /* done badge bg / soft fill */ /* color — warm neutrals (blue slate retired) */ --nml-beige: #f1d892; /* shell beige — warm fields / trust / worldview bg */ --nml-ink: #181613; /* body text (warm ink) */ --nml-muted: #5d574f; /* secondary text — AA 4.5:1, no 40% alpha */ --nml-paper: #f4f1eb; /* page background */ --nml-surface: #fbfaf7; /* card surface */ --nml-surface-strong: #ffffff; /* topmost surface */ --nml-line: #e3ddd2; /* border */ /* color — functional */ --nml-red: #cc0000; /* timestamp jump (YouTube exit) / danger — white text 5.9:1 */ --nml-warn: #92400e; /* coverage warning text (amber) */ --nml-warn-bg: color-mix(in srgb, var(--nml-warn) 12%, var(--nml-surface-strong)); /* warn fill */ --nml-focus: var(--nml-green-deep); /* focus ring — non-text 3:1+ */ /* type */ --nml-font-body: "Pretendard Variable", Pretendard, system-ui, sans-serif; --nml-font-pixel: "VT323", Silom, Monaco, monospace; --nml-t-display: 32px; /* hero (landing scales up via clamp) */ --nml-t-h1: 24px; /* panel hero */ --nml-t-h2: 18px; /* section title */ --nml-t-body: 15px; /* body */ --nml-t-small: 13px; /* secondary */ --nml-t-micro: 11px; /* badge only — never body */ --nml-lh-tight: 1.2; --nml-lh-normal: 1.5; --nml-lh-relaxed: 1.65; /* spacing — step = 4px, named by step count (raw values off-scale forbidden) */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; /* landing section rhythm */ --sp-16: 64px; /* landing section rhythm */ /* radius (20px retired) */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px; /* border */ --bd: 1px solid var(--nml-line); /* elevation — two steps only (warm-tinted shadow, ink rgb 24 22 19) */ --e-1: 0 1px 2px rgba(24, 22, 19, 0.06), 0 1px 3px rgba(24, 22, 19, 0.04); /* card, subtle */ --e-2: 0 4px 12px rgba(24, 22, 19, 0.12), 0 2px 4px rgba(24, 22, 19, 0.08); /* toast / modal */ /* motion — UI transitions = ease, Momo/pixel = steps() */ --dur-fast: 120ms; --dur: 220ms; --dur-slow: 320ms; --ease: cubic-bezier(0.2, 0.7, 0.3, 1); } /* ---------------------------------------------------------------- dark tokens * Warm dark (#16140f family, not blue-gray). Kept identical under both selectors. */ [data-theme="dark"] { --nml-green-deep: #167a30; /* one step lighter so fills read on dark (white text 5.5:1) */ --nml-beige: #2e2717; /* deep warm surface tint */ --nml-ink: #f2ede4; --nml-muted: #b5ab9c; /* AA on dark */ --nml-paper: #16140f; --nml-surface: #1e1b15; --nml-surface-strong: #26221a; --nml-line: rgba(255, 255, 255, 0.12); --nml-warn: #e3a008; /* lighter amber for dark */ /* --nml-green stays #71af3f (works on dark); green-soft / warn-bg re-mix via surface-strong */ } @media (prefers-color-scheme: dark) { :root[data-theme="auto"] { --nml-green-deep: #167a30; --nml-beige: #2e2717; --nml-ink: #f2ede4; --nml-muted: #b5ab9c; --nml-paper: #16140f; --nml-surface: #1e1b15; --nml-surface-strong: #26221a; --nml-line: rgba(255, 255, 255, 0.12); --nml-warn: #e3a008; } } /* --------------------------------------------------- universal a11y (both surfaces) */ :focus-visible { outline: 2px solid var(--nml-focus); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }