/* ============================================================= Farlist theme — editorial · slow · ceremonial Source of truth: docs/system/design-system.md Architecture (Blueprint convention — see Blueprint base.css.tt): 1. Project tokens — semantic role names. Every Blueprint app defines the same set of names; the values change per app / per theme. Reading `var(--bg-base)` always means "the primary page background"; the value depends on the active theme. **Never use brand-poetic literal-color names** like --paper, --moss, --ink — they lie about their content the moment a sibling theme rebinds them (Inkwell makes --paper hold dark brown; --moss has held oxblood, persimmon, mustard in the Color Lab variants). 2. Blueprint contract — --color-bg / --color-text / --color-primary, consumed by framework CSS (components.css, landing.css, nav.css). Bridges project tokens onto framework names so any Blueprint app's CSS works against any theme. Swap a theme = rebind the project tokens. The contract derives automatically; framework CSS reskins; no other changes needed. V1 default theme: Mist (cool blue-white paper + slate-blue ink + sage). Future themes (Inkwell dark, Linen, Concrete, Slate Indigo) are stubbed at the bottom and activated by setting [data-theme="..."] on or . ============================================================= */ /* === Fonts === Three voices, one editorial system: • Crimson Pro — variable serif. Display only: page titles, item titles, the welcome eyebrow, the saved-card hero. Drawn for elegance at 24px+; its low x-height and sharp italic terminals punish small-size body work, so we don't ask it to do that. • Inter — variable sans, very high x-height, designed by Rasmus Andersson for UI body text. Handles all reading-grade content: item context, settings rows, /new prompts, captions. Italic in Inter is reserved for true emphasis (the .item-reflection quote keeps Crimson italic — a deliberate quote-feel exception). • JetBrains Mono — meta labels, eyebrows, year stamps. Never larger than ~13px. */ @import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,400..700;1,400..700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap'); /* ================================================================= Mist — V1 canonical theme (light editorial) Cool blue-white paper, slate-blue ink, sage accent. ================================================================= */ :root { /* === Surfaces (bg-*) — semantic role, theme-agnostic name === */ --bg-base: #f4f6f8; /* primary page background — cool blue-white */ --bg-card: #ebeef2; /* recessed surfaces — reflection screen frame, deep cards */ --bg-muted: #dfe3ea; /* edges, deepest divider variant */ --bg-deep: #cdd3dd; /* canvas behind frames */ /* === Form fields === The canonical background for boxy text fields and textareas (those rendered as bordered inputs, not as transparent inline editorial inputs like .letter-input). Keeping this as a separate token from --bg-base means changing input bg site-wide is one edit. Intentionally maps to --bg-base today so fields sit on the page without contrast — borders separate them. Editorial inline inputs (e.g. .letter-input, .letter-input-sm) deliberately use `background: transparent` and aren't governed by this token. */ --input-bg: var(--bg-base); /* === Text (text-*) — semantic role === */ --text-primary: #283448; /* primary text + ▣ done glyph (slate-blue, not navy) */ --text-secondary: #3e4a60; /* body that isn't a headline */ --text-tertiary: #545e75; /* italic context, mono labels — ~6:1 contrast on Mist bg */ --text-muted: #828a9c; /* placeholders, counts, parked items */ --text-faint: #b6bcc7; /* faintest */ /* === Hairlines (rule-*) === */ --rule: rgba(40,52,72,.18); --rule-soft: rgba(40,52,72,.10); --rule-softer: rgba(40,52,72,.05); /* === Accent (accent-*) — earns its place === Used only on: CTA, ● pursuing, caret, focus border. The Mist theme uses sage; Inkwell uses oxblood; Linen uses persimmon. The variable name stays --accent regardless. */ --accent: oklch(0.58 0.07 155); /* sage in Mist */ --accent-hover: oklch(0.50 0.07 155); --accent-soft: oklch(0.94 0.03 155); --accent-on: #f7faf6; /* foreground over accent */ /* === Type families === Three roles. Display = serif (voice). Body = sans (readability). Mono = meta (texture). */ --font-serif: "Crimson Pro", "Crimson Text", "Spectral", "GT Sectra", "Tiempos", Georgia, serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "JetBrains Mono", "Berkeley Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; /* === Editorial type scale (Farlist-specific) === * rem-based so every token scales with root font-size. Calibrated for * 17px root (mobile) — at root 17px the rem fractions resolve to the * same pixel values shown in the comments. At larger root sizes * (18/19/20px on tablet/desktop, or via --font-scale) the entire * scale grows proportionally. Display still uses clamp+vw for hero * sizing on the landing page. */ --t-display: clamp(3.294rem, 8.5vw, 6.588rem); /* 56px → 112px at 17px root */ --t-h1: 3.294rem; /* 56px @ 17px root */ --t-h2: 2.353rem; /* 40px */ --t-h3: 1.647rem; /* 28px */ --t-lead: 1.176rem; /* 20px */ --t-body: 1rem; /* 17px */ --t-meta: 0.765rem; /* 13px */ --t-mono-sm: 0.647rem; /* 11px */ --t-mono-xs: 0.588rem; /* 10px */ /* Tracking — negative on display sizes, .12em on uppercase mono */ --tk-display: -0.025em; --tk-h1: -0.018em; --tk-h2: -0.012em; --tk-h3: -0.005em; /* === Shadows (used very sparingly) === */ --shadow-soft: 0 1px 0 rgba(40,52,72,.04), 0 12px 40px rgba(40,52,72,.06); --shadow-sheet: 0 -10px 60px rgba(40,52,72,.18); /* ================================================================= Blueprint contract bridge — project tokens → framework names. Editing this section shifts which project tokens the framework consumes; editing the project tokens above shifts the values. ================================================================= */ /* Fonts — Crimson Pro serif handles display, Inter handles body. Sans contract var maps to body so framework code that asks for "sans" gets the readable body font, not the display serif. */ --font-display: var(--font-serif); --font-sans: var(--font-body); /* Type scale — Blueprint scale projected onto editorial scale */ --text-display: var(--t-h1); /* 56px @ 17px root */ --text-title: var(--t-h3); /* 28px */ --text-heading: var(--t-lead); /* 20px */ --text-body: var(--t-body); /* 17px */ --text-body-sm: 0.882rem; /* 15px */ --text-caption: var(--t-meta); /* 13px */ --text-micro: var(--t-mono-xs); /* 10px */ /* Colors — light mode (Mist). Dark sibling Inkwell rebinds project tokens via [data-theme="inkwell"] when activated. */ --color-bg: var(--bg-base); --color-surface: var(--bg-card); --color-border: var(--rule-soft); --color-text: var(--text-primary); --color-text-muted: var(--text-tertiary); --color-primary: var(--accent); --color-primary-rgb: 122, 156, 130; /* sRGB approx of accent for rgba() */ --color-primary-hover: var(--accent-hover); --color-primary-text: var(--accent-on); /* Semantic — quiet by design. No bright greens/reds; the product never congratulates the user, so success is just accent-soft. */ --color-success: var(--accent); --color-success-bg: var(--accent-soft); --color-warning: var(--text-secondary); --color-warning-bg: var(--bg-muted); --color-danger: #8b3a3a; --color-danger-bg: rgba(139, 58, 58, 0.08); --color-info: var(--text-secondary); --color-info-bg: var(--bg-card); /* Shape — Farlist prefers hairlines + small radii (no rounded cards) */ --radius: 2px; --radius-lg: 3px; --radius-xl: 6px; --radius-full: 9999px; /* Spacing — Blueprint 8px grid */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 4rem; /* Motion */ --duration-quick: 120ms; --duration-normal: 200ms; --duration-emphasis: 350ms; --duration-celebration: 500ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1); /* Layout — editorial body width (56–78ch) */ --app-content-width: 680px; } /* ================================================================= Future themes — drop-in via [data-theme="..."] on or . Each variant rebinds the project tokens (--bg-*, --text-*, --accent, etc.). The Blueprint contract bridge above re-derives automatically, so no other changes are needed. Activating Inkwell would look like: [data-theme="inkwell"] { --bg-base: #181612; --bg-card: #211e18; --bg-muted: #2a2620; --bg-deep: #0f0e0b; --text-primary: #f0e9d6; --text-secondary: #dcd4be; --text-tertiary: #9c947f; --text-muted: #6f6857; --text-faint: #4a4538; --accent: oklch(0.58 0.14 28); // oxblood --accent-hover: oklch(0.52 0.14 28); --accent-soft: oklch(0.30 0.08 28); --accent-on: #f5ede0; --rule: rgba(240,233,214,.22); --rule-soft: rgba(240,233,214,.12); --rule-softer: rgba(240,233,214,.06); } The Color Lab (`docs/research/concepts/Farlist-v4/color-lab.css`) has tested four variants: Inkwell, Linen, Concrete, Slate Indigo. When activating one, lift its block here or move to themes/[name].css per design-system.md. ================================================================= */ /* === Editorial primitives — Farlist screens === Used directly by Farlist views. Components.css remains responsible for Blueprint-default UI (buttons, cards, forms). */ .eyebrow { font-family: var(--font-mono); font-size: var(--t-mono-xs); text-transform: uppercase; letter-spacing: .12em; color: var(--text-tertiary); font-weight: 500; } .eyebrow.accent { color: var(--accent); } .metalabel { font-family: var(--font-mono); font-size: var(--t-mono-xs); text-transform: uppercase; letter-spacing: .12em; color: var(--text-muted); } .tag { font-family: var(--font-mono); font-size: var(--t-mono-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--text-tertiary); } /* Status glyphs — typographic, not iconic */ .glyph { width: 10px; height: 10px; display: inline-block; flex: 0 0 10px; position: relative; } .glyph.pursuing { background: var(--accent); border-radius: 50%; box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 18%, transparent); } .glyph.done { background: var(--text-primary); } .glyph.idea { border: 1px dashed var(--text-tertiary); border-radius: 50%; background: transparent; } .glyph.parked { border: 1px solid var(--text-muted); background: transparent; } .glyph.parked::after { content: ""; position: absolute; left: 1px; right: 1px; top: 4px; height: 1px; background: var(--text-muted); } /* Quiet link — underline that respects descenders */ .link-quiet { color: inherit; text-decoration: none; border-bottom: 1px solid var(--text-primary); padding-bottom: 1px; } /* === Brand voice — bare-element button override ===================== The Blueprint default in base.css renders