:root { /* colour ----------------------------------------------------------- */ --paper: #F5F2EC; --ink: #0F0E0C; --faint: #7A766E; --rule: rgba(15,14,12,0.12); --ruleS: rgba(15,14,12,0.06); --accent: #D5341A; /* Channel triplet for accent — fed into rgba(var(--accent-rgb), 0.X) by the accent tints below so a user-chosen accent (overridden at runtime via theme-runtime.js#applyAccent) recolours the tints too. */ --accent-rgb: 213, 52, 26; /* Legible foreground for text/glyphs painted onto a --accent background. theme-runtime.js#applyAccent overrides this per-accent via WCAG luminance (see inkOnFor in themes/accents.js). Fallback = near-white which suits the default vermillion (#D5341A, L≈0.167). Any rule that uses `background: var(--accent)` MUST pair it with this var, not a hardcoded var(--paper) / #fff — bright accents (yellow/canary/honey) need dark ink for legibility. */ --accent-ink: #fafafa; --hi: #FFE45C; /* typography ------------------------------------------------------- */ --cond: "Staatliches","Helvetica Neue",Arial,sans-serif; --sans: "JetBrains Mono","SF Mono",ui-monospace,monospace; --mono: "JetBrains Mono","SF Mono",ui-monospace,monospace; --jp: "Noto Sans KR","Apple SD Gothic Neo",sans-serif; /* radius scale ---------------------------------------------------- */ /* User requested fully squared corners app-wide. Every named radius is zero now — leaving --r-circle alone (50% on a square = full circle, which is a different geometric primitive, not a rounded corner). */ --r-sm: 0; --r-md: 0; --r-lg: 0; --r-pill: 0; --r-circle: 50%; /* shadow scale ---------------------------------------------------- */ --shadow-sheet: 0 -8px 24px rgba(0,0,0,0.18); --shadow-toast: 0 4px 14px rgba(0,0,0,0.18); --shadow-card: 0 12px 32px rgba(0,0,0,0.28); /* floating/centered popup cards */ /* transition durations -------------------------------------------- */ --dur-fast: 80ms; --dur-base: 150ms; --dur-slow: 180ms; --dur-slower: 200ms; --ease-out: cubic-bezier(.2, .7, .2, 1); /* z-index layers --------------------------------------------------- */ --z-row: 1; --z-rail: 2; --z-nav: 10; --z-composer: 20; --z-coach: 30; /* interactive-tutorial coach — below anim rows (z:50) */ --z-sheet: 60; --z-modal: 100; --z-tutorial: 200; --z-toast: 1000; --z-img-full: 1000; /* image fullscreen viewer */ --z-picker: 9000; /* colour picker — above every full-screen panel */ /* font-size scale — context-based (typography redesign 2026-05-26) ── * Five user-tunable contexts replace the six absolute roles * (--fs-micro / --fs-small / --fs-body / --fs-emphasis / --fs-headline / * --fs-hero). Each context owns ONE base size that the user can * change via a slider; its inner tiers (chip, eyebrow, dim variant, * etc.) derive from the base with fixed offsets so visual hierarchy * can never invert (e.g. a row chip can never grow larger than the * row title). * * --fs-rows — a task row's TITLE line only. Slider: TASK TITLE. * --fs-row-detail — a row's small text: tags/chips, when-cell, * sub/streak lines. Slider: ROW DETAIL. Split out * of --fs-rows (2026-06-19) so title + detail move * independently. * --fs-hero — every big/heading surface: mastheads, DONE count, * empty-state, AND section heads + popup/sheet * titles (--fs-titles derives from it). Slider: * HEADERS. * --fs-chrome — UI labels (mono uppercase, badges, buttons, pills) * AND long-form prose (--fs-body derives from it). * Slider: LABELS. * --fs-composer-hint / --fs-composer-input — composer headline + the * typing surface. Own sliders. * * Derived (not user-driven; derive from the bases above): * --fs-titles — section/modal/sheet headings = hero × 0.63 (clamped) * --fs-body — prose = chrome + 3px (folded into LABELS 2026-06-19) * Tier derivations (all clamped to 9px floor for legibility): * --fs-rows-chip = row-detail (in-row chip / status pill) * --fs-rows-when = row-detail + 1px (right-aligned when cell) * --fs-rows-sub = row-detail (sub-line meta below title) * --fs-titles-eyebrow = titles × 0.45 (mono eyebrow above title) * --fs-chrome-dim = chrome − 1px (faint variant for muted labels) * --fs-hero-han = hero × 0.6 (serif KR hanja companion) */ /* Each of the four slider bases sits at its slider's MINIMUM (2026-07-28): a fresh install opens at the tightest legible type and the user sizes up from there. These literals must mirror ROLE_FS in theme-runtime.js — font-size-defaults-test.js fails if the two drift apart. */ --fs-rows: 10px; --fs-row-detail: 9px; --fs-chrome: 9px; --fs-hero: 22px; /* Derived headings + prose (no own slider; track HEADERS / LABELS). At the new base sizes: hero 22 × 0.63 ≈ 14 (the clamp floor), and chrome 9 + 3 = 12 body. */ --fs-titles: clamp(14px, calc(var(--fs-hero) * 0.63), 36px); --fs-body: calc(var(--fs-chrome) + 3px); /* Composer headline (.h1--big, big serif "WHAT, WHEN." above the new-entry textarea). Decoupled from --fs-hero so users can size the two surfaces independently. */ --fs-composer-hint: 30px; /* Composer textarea (.nli-input) + the parsed-highlight overlay that paints on top. Decoupled from --fs-titles so users can shrink the typing surface without shrinking section headers. */ --fs-composer-input: 14px; --fs-rows-chip: max(9px, var(--fs-row-detail)); --fs-rows-when: max(9px, calc(var(--fs-row-detail) + 1px)); --fs-rows-sub: max(9px, var(--fs-row-detail)); --fs-titles-eyebrow: max(9px, calc(var(--fs-titles) * 0.45)); --fs-chrome-dim: max(9px, calc(var(--fs-chrome) - 1px)); --fs-hero-han: calc(var(--fs-hero) * 0.6); /* Dense-INBOX variant — kept as a derived token because INBOX rows render tighter than TODAY/BY DATE. Base = rows − 2px with a 10px floor so the row stays legible at the smallest slider value. */ --fs-rows-dense: max(10px, calc(var(--fs-rows) - 2px)); /* The dense row's #tag. Sits 2px under the dense title, exactly as the normal row's chip sits 2px under its title — so it resolves to 9px at the default 13px --fs-rows, matching the literal it replaced, and now grows with the slider instead of freezing. */ --fs-rows-dense-chip: max(8px, calc(var(--fs-rows-dense) - 2px)); /* spacing ---------------------------------------------------------- */ /* Primary horizontal gutter — every row + section content uses this */ /* via padding: px var(--pad-h) [px]. A "compact" theme can */ /* override --pad-h to tighten the layout horizontally with one line. */ --pad-h: 22px; /* Bottom home-indicator inset. A flat 30px floor (so non-notched / landscape / desktop, where env() resolves to 0, still get breathing room — the deliberate "nav flat-30" decision) that GROWS to the true safe-area inset (~34px portrait) on notched iPhones. Requires viewport-fit=cover (set in index.html). Single source for every bottom-most dock / fullscreen-panel padding. */ --home-pad: max(30px, env(safe-area-inset-bottom)); /* opacity tiers ---------------------------------------------------- */ /* Ink-on-paper tints (light theme + done-view-on-dark exception). */ --ink-04: rgba(15,14,12,0.04); --ink-08: rgba(15,14,12,0.08); --ink-18: rgba(15,14,12,0.18); --ink-22: rgba(15,14,12,0.22); --ink-25: rgba(15,14,12,0.25); --ink-28: rgba(15,14,12,0.28); --ink-32: rgba(15,14,12,0.32); --ink-35: rgba(15,14,12,0.35); --ink-55: rgba(15,14,12,0.55); --ink-70: rgba(15,14,12,0.7); /* Shared popup backdrop — every overlay/sheet/composer backdrop reads these so blur intensity + dim stay identical across the whole app. Keep blur low (2px) for a subtle frost, not a heavy glassy look. */ --backdrop-tint: rgba(15,14,12,0.35); --backdrop-blur: 2px; /* (0.06 → --ruleS · 0.12 → --rule, already defined above.) */ /* Paper-tone-on-dark tints (html.theme-dark overrides). */ --paper-04: rgba(232,226,212,0.04); --paper-05: rgba(232,226,212,0.05); --paper-07: rgba(232,226,212,0.07); --paper-10: rgba(232,226,212,0.10); --paper-14: rgba(232,226,212,0.14); --paper-15: rgba(232,226,212,0.15); --paper-18: rgba(232,226,212,0.18); --paper-22: rgba(232,226,212,0.22); --paper-25: rgba(232,226,212,0.25); --paper-28: rgba(232,226,212,0.28); --paper-30: rgba(232,226,212,0.30); --paper-32: rgba(232,226,212,0.32); --paper-35: rgba(232,226,212,0.35); --paper-55: rgba(232,226,212,0.55); --paper-70: rgba(232,226,212,0.7); /* Dark-mode surface palette — the warm-ink "off-black" surfaces a theme uses when state.theme === 'dark'. Pulled out of paper's theme.css into tokens so a future dark-tuned theme can override just these without rewriting every component rule. */ --paper-dark: #14130F; /* base background */ --ink-dark: #E8E2D4; /* warm ink on dark */ --faint-dark: #807A6E; /* muted text on dark */ --surface-dark-elev: #1B1A16; /* modal / sheet surface */ --accent-dark: #E0532C; /* vermillion (warmer dark) */ --accent-rgb-dark: 224, 83, 44; /* channel triplet for dark tints */ --accent-pressed: #C0421C; /* rail :active */ /* Accent tints — light/active states, focus rings. Use the channel triplet so a user-chosen accent recolours every tint at once. */ --accent-04: rgba(var(--accent-rgb), 0.04); --accent-06: rgba(var(--accent-rgb), 0.06); --accent-08: rgba(var(--accent-rgb), 0.08); --accent-10: rgba(var(--accent-rgb), 0.10); --accent-12: rgba(var(--accent-rgb), 0.12); --accent-18: rgba(var(--accent-rgb), 0.18); --accent-22: rgba(var(--accent-rgb), 0.22); --accent-35: rgba(var(--accent-rgb), 0.35); /* Dark-mode accent tints (warmer dark variant). */ --accent-dark-08: rgba(var(--accent-rgb-dark), 0.08); --accent-dark-10: rgba(var(--accent-rgb-dark), 0.10); /* White tints (done-view dark surface; not theme-aware). */ --white-18: rgba(255,255,255,0.18); --white-30: rgba(255,255,255,0.3); --white-40: rgba(255,255,255,0.4); --white-50: rgba(255,255,255,0.5); --white-55: rgba(255,255,255,0.55); }