/* styles/variables.css — design tokens, TWO layers (see ARCHITECTURE). Layer 1: raw PRIMITIVES (palette, grades, scale) — components never touch these. Layer 2: SEMANTIC aliases that point at primitives — components use ONLY these. This is the "Sourdough" theme (docs/DESIGN-SYSTEM.md): monochrome e-ink / Swiss-editorial. The whole re-skin is done HERE — every existing component restyles because it only ever read the Layer-2 aliases. */ /* FLAVORS (the `data-theme` axis) live as reference files under themes/ — each a pure token override; see themes/_template.css to add one. Imported here (imports must precede all other rules, so before @font-face) so the ONE stylesheet every page + the catalog already loads carries them. The flavor selectors out-specify :root, so import order doesn't affect cascade. Sourdough is the hueless :root default below and needs no file. */ @import "themes/baguette.css"; @import "themes/brioche.css"; /* ---- Redaction grades, self-hosted (docs/DESIGN-SYSTEM.md §3) ---------------- Each grade is its OWN family, so switching grade = swapping family (a class change), which is how "grade as signal" works. */ @font-face { font-family: "Redaction"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/redaction-400.woff2") format("woff2"); } @font-face { font-family: "Redaction 35"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/redaction-35-400.woff2") format("woff2"); } @font-face { font-family: "Redaction 50"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/redaction-50-400.woff2") format("woff2"); } @font-face { font-family: "Redaction 70"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/redaction-70-400.woff2") format("woff2"); } :root { /* ---- Layer 1: primitives ------------------------------------------------ */ /* monochrome paper + ink — six values do everything (DESIGN-SYSTEM §2) */ --paper: #E2E0D8; /* page background — dimmed warm grey, NOT bright */ --paper-2: #E8E6DF; /* subtle hover surface */ --panel: #E8E6DF; /* grouped "sheet" — a hair brighter than the page */ --ink: #1C1B17; /* primary text, filled dots, rules */ --ink-muted: #6E6C64; /* secondary text, section labels */ --ink-faint: #ABA89F; /* fading insights, empty/future dots */ --hairline: #1C1B17; /* solid rules (under headlines) */ --line-soft: rgba(28, 27, 23, .14); /* translucent border for quiet grouping */ /* grade font families (clean = human, grain = AI / in-transit). Grain is grade 50 — one step up from the 35 working grade for more visible texture. */ --font-smooth: "Redaction", "Times New Roman", Georgia, serif; --font-grain: "Redaction 50", "Redaction 35", "Times New Roman", Georgia, serif; --font-accent: "Redaction 70", "Times New Roman", Georgia, serif; /* the FINE grain face — grade 35 only, skipping the rougher 50. Grade texture only reads as texture (not noise) at >= --text-2xl (CLAUDE.md lesson 4); a component that must show the AI-grain signal in small text (a chat bubble, --text-sm) reads this instead of --font-grain so the "AI wrote this" cue survives without Redaction 50's rough strokes collapsing into mush at 14px. Still a Redaction face, still visibly not --font-smooth — the signal doesn't disappear, it just doesn't demonstrate the roughest texture where it can't read anyway. */ --font-grain-fine: "Redaction 35", "Times New Roman", Georgia, serif; /* monospace — code blocks / inline code (grade-independent: code stays mono, the AI signal for code is the dashed edge, not a font swap). System stack, nothing to host. */ --font-mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace; --font-weight-regular: 400; /* house weight — even for headlines */ --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* reserved for rare extra punch */ /* type scale (mobile-first, rem @ 16px) — fluid display via clamp */ --text-xs: 0.8125rem; /* 13px caption */ --text-sm: 0.875rem; /* 14px label / eyebrow */ --text-base: 0.9375rem; /* 15px body */ --text-lg: 1.05rem; --text-xl: 1.3rem; /* section heading */ --text-2xl: 1.6rem; --text-3xl: 2.25rem; --display: clamp(2rem, 6vw, 2.75rem); /* the masthead headline */ --leading-tight: 1.02; /* display */ --leading-normal: 1.5; --leading-relaxed: 1.55; /* body */ /* spacing — 4px base scale */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; /* radius — crisp, almost square (DESIGN-SYSTEM §4) */ --radius-sm: 4px; --radius-md: 4px; --radius-pill: 2px; /* badges are near-rectangular here, not pills */ /* rules */ --rule: 1.5px solid var(--hairline); /* under-headline rule */ --border: 1px solid var(--hairline); /* buttons, hard edges you tap */ --content-max: 768px; --page-pad: clamp(1.25rem, 5vw, 2.5rem); /* ---- Layer 2: semantic aliases (the only tokens components touch) ------- Re-pointed at the monochrome primitives. Because components read these and never the primitives, the whole app re-themes from the lines below. */ /* surfaces & text */ --color-bg: var(--paper); --color-surface: var(--panel); --color-fg: var(--ink); --color-muted: var(--ink-muted); --color-line: var(--line-soft); /* ACCENT — the ONE signature hue (doctrine: "full reach, single hue"). This is the single brand knob a theme/product sets. REACH is full — links, focus rings, ::selection, and the primary button fill all point here. COUNT is one — the palette stays CLOSED: exactly one accent, and success/danger NEVER get their own hue (below). The default (Sourdough) keeps it HUELESS by setting it to ink, so nothing gains colour except a subtle ink ::selection. An accented theme (Baguette, Brioche) overrides just these four. See DESIGN-SYSTEM.md §2. */ --color-accent: var(--ink); /* hueless default — a flavor overrides to its one hue */ --color-accent-hover: var(--ink); --color-accent-contrast: var(--paper); --color-accent-soft: var(--paper-2); /* "primary" now chains to the accent (was hardcoded ink) — so the primary button fill follows the one brand hue automatically; hueless by default because accent = ink. */ --color-primary: var(--color-accent); --color-primary-hover: var(--color-accent-hover); --color-primary-contrast: var(--color-accent-contrast); --color-primary-soft: var(--color-accent-soft); /* success / danger collapse to ink in monochrome — signalled by weight/treatment, not hue (DESIGN-SYSTEM §2: states from opacity + size, palette stays closed — the ONE hue is the accent above; states never get their own) */ --color-success: var(--ink); --color-success-hover: var(--ink); --color-success-contrast: var(--paper); --color-success-soft: var(--paper-2); --color-danger: var(--ink); --color-danger-hover: var(--ink); --color-danger-contrast: var(--paper); --color-danger-soft: var(--paper-2); /* status badge */ --color-ok-bg: transparent; --color-ok-fg: var(--ink); --color-archived-bg: transparent; --color-archived-fg: var(--ink-muted); /* the inheritable grade switch — DESIGN-SYSTEM §3 "As an atom". Default = human/clean; ancestors flip it; CSS inheritance distributes it. */ --type-font: var(--font-smooth); /* base font shorthand */ --font-base: var(--text-base)/var(--leading-relaxed) var(--type-font); /* AI spotlight veil (GRAIN) — set ONCE here so every page fades the same way. Pick ONE (CSS comments don't nest — keep exactly one line uncommented): */ --ai-veil-alpha: 22%; /* tweak this one number to change the dim depth everywhere */ --ai-veil: color-mix(in srgb, var(--ink) var(--ai-veil-alpha), transparent); /* dim: gentle ink recede */ /* --ai-veil: color-mix(in srgb, var(--paper) 70%, transparent); */ /* wash: bleach toward blank paper */ /* --ai-veil: transparent; */ /* lift: no veil, the element pops alone */ /* how slowly the spotlight box glides onto the next surface when the AI switches focus, and its easing — gentle like a page transition (soft start, soft landing), never a snap. Keep the duration ≤ the reasoner's SETTLE_MS (700ms) so the box lands before it acts. */ --ai-focus-move: 0.65s; --ai-focus-ease: ease-in-out; /* AI takeover STACKING — one source of truth so the AI module (grain/ai/ai.css) and any consumer chrome (e.g. the app's portfolio-frame console/chat) agree without duplicating magic z-index numbers. veil < spotlit surface < the AI surfaces that stay above the veil. */ --z-ai-veil: 9000; /* the dimming backdrop */ --z-ai-spot: 9001; /* the spotlit surface, lifted out of the dim */ --z-ai-surface: 9002; /* AI surfaces kept above the veil (acting label, console, chat) */ /* paper grain SVG overlay opacity (DESIGN-SYSTEM §6) — override in dark mode to reduce contrast */ --paper-grain-opacity: 0.09; } /* ============================================================================================ THEMING — two ORTHOGONAL axes, both pure TOKEN re-skins (the whole point of the two-layer system): only Layer-1 PRIMITIVES flip; Layer-2 aliases point at them, so every component re-colours with ZERO edits. See grain/README.md §4 + §6 (consumer guide). • `data-color-scheme` = light | dark (follows the OS; force it on to override) • `data-theme` = the FLAVOR (default = Sourdough via :root; add bread varieties) They compose: any flavor in either scheme. `grain/scripts/theme.js` sets both on (persisted). ============================================================================================ */ /* ---- Color scheme: dark (flavor-agnostic — applies to whatever flavor is active). Warm+soft, no pure black/white, to keep the e-ink feel. Auto by OS unless forced light. ---- */ @media (prefers-color-scheme: dark) { :root:not([data-color-scheme="light"]) { --paper: #1B1A16; --paper-2: #232219; --panel: #232219; --ink: #E4E1D8; --ink-muted: #9A968B; --ink-faint: #6B6862; --hairline: #E4E1D8; --line-soft: rgba(228, 225, 216, 0.16); --ai-veil: color-mix(in srgb, #000 50%, transparent); /* dark: dimming darkens further */ --paper-grain-opacity: 0.04; } } :root[data-color-scheme="dark"] { --paper: #1B1A16; --paper-2: #232219; --panel: #232219; --ink: #E4E1D8; --ink-muted: #9A968B; --ink-faint: #6B6862; --hairline: #E4E1D8; --line-soft: rgba(228, 225, 216, 0.16); --ai-veil: color-mix(in srgb, #000 50%, transparent); --paper-grain-opacity: 0.04; } /* ============================================================================================ FLAVORS (`data-theme`) — bread varieties, each a pure token override (light + composed dark). Sourdough is the :root default above (hueless). The accented flavors now live as reference files under themes/ (Baguette, Brioche) — @imported at the top of this file. An accented flavor overrides the four --color-accent slots with its ONE signature hue; success/danger stay monochrome (doctrine above). The flavor+dark selector (0,3,0) outranks the plain dark block (0,2,0), so it wins in dark mode. `theme.js` switches any value; add a variety by copying themes/_template.css. See grain/README §4/§6 + DESIGN-SYSTEM §2. ============================================================================================ */