/* * ============================================================================ * FABULA DESIGN SYSTEM - Theme Tokens * ============================================================================ * * Two themes: "dark" (original cyberpunk) and "writerly" (literary magazine) * * Usage: * or * * Token naming convention: * --f-{category}-{variant} * * Categories: * bg = backgrounds * fg = foreground / text * border = borders and dividers * accent = primary accent color * muted = secondary/muted accent * card = card backgrounds * nav = navigation elements * badge = tag/badge backgrounds * icon = icon colors * conn = connection type colors (shared across themes) * * ============================================================================ */ /* ----- WRITERLY THEME (default) ----------------------------------------- */ /* Aesthetic: marketing v2 — EB Garamond + JetBrains Mono on warm paper, */ /* oxblood accent. Mirrors the tokens defined in static/marketing/v2/css/site.css */ /* so the catalog reads as a continuation of the marketing site. */ [data-theme="writerly"] { /* --- Typography (mirrors v2) --- */ --f-font-display: 'EB Garamond', 'Sorts Mill Goudy', Georgia, serif; --f-font-body: 'EB Garamond', 'Sorts Mill Goudy', Georgia, serif; --f-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --f-font-size-base: 17px; /* marketing uses 19px; catalog stays a touch denser */ --f-line-height-body: 1.55; --f-line-height-heading: 1.12; --f-letter-spacing-heading: -0.012em; --f-letter-spacing-label: 0.18em; /* mono eyebrows / labels */ /* --- Page backgrounds (v2 paper / paper-2) --- */ --f-bg-page: oklch(97.5% 0.008 75); --f-bg-surface: oklch(98.5% 0.006 75); --f-bg-elevated: oklch(95% 0.010 75); --f-bg-inset: oklch(93% 0.012 75); --f-bg-hero: oklch(97.5% 0.008 75); --f-bg-nav: oklch(97.5% 0.008 75 / 0.92); /* --- Text colors (v2 ink scale) --- */ --f-fg-primary: oklch(20% 0.012 60); --f-fg-secondary: oklch(38% 0.014 60); --f-fg-tertiary: oklch(55% 0.014 60); --f-fg-placeholder: oklch(60% 0.014 60); --f-fg-heading: oklch(20% 0.012 60); --f-fg-link: oklch(20% 0.012 60); /* v2: anchors are ink with rule underline */ --f-fg-link-hover: oklch(45% 0.12 25); /* v2: oxblood on hover */ --f-fg-inverse: oklch(92% 0.010 80); /* --- Borders (v2 paper-rule) --- */ --f-border-default: oklch(85% 0.012 70); --f-border-light: oklch(90% 0.010 75); --f-border-strong: oklch(75% 0.014 70); --f-border-accent: oklch(45% 0.12 25 / 0.45); /* --- Primary accent (v2 oxblood) --- */ --f-accent-primary: oklch(45% 0.12 25); --f-accent-primary-bg: oklch(45% 0.12 25 / 0.10); --f-accent-primary-fg: oklch(38% 0.12 25); --f-accent-green: #4a7c59; /* sage green (characters) */ --f-accent-green-bg: #eef4f0; --f-accent-green-fg: #3a6347; --f-accent-blue: #4a6b8a; /* steel blue (episodes) */ --f-accent-blue-bg: #edf2f7; --f-accent-blue-fg: #3a5570; --f-accent-violet: #6b5a8a; /* dusty violet (organizations) */ --f-accent-violet-bg: #f0edf5; --f-accent-violet-fg: #554770; --f-accent-rose: #8a5a6b; /* dusty rose (emotional) */ --f-accent-rose-bg: #f5edf0; --f-accent-rose-fg: #704757; --f-accent-indigo: #5a6b8a; /* muted indigo (acts) */ --f-accent-indigo-bg: #edf0f5; --f-accent-indigo-fg: #475570; --f-accent-cyan: #4a7a7c; /* teal (graph/connections) */ --f-accent-cyan-bg: #edf4f4; --f-accent-cyan-fg: #3a6163; --f-accent-orange: #8a6b3d; /* deep amber (objects) */ --f-accent-orange-bg: #f5f0e5; --f-accent-orange-fg: #6b4f28; /* --- Card styling (paper-on-paper, very subtle shadows) --- */ --f-card-bg: oklch(98.5% 0.006 75); --f-card-bg-hover: oklch(99% 0.005 75); --f-card-border: oklch(85% 0.012 70); --f-card-border-hover: oklch(45% 0.12 25 / 0.55); --f-card-shadow: 0 1px 2px oklch(20% 0.012 60 / 0.04); --f-card-shadow-hover: 0 2px 6px oklch(20% 0.012 60 / 0.08); --f-card-radius: 6px; /* --- Badge / tag styling --- */ --f-badge-bg: oklch(95% 0.010 75); --f-badge-fg: oklch(38% 0.014 60); --f-badge-border: oklch(85% 0.012 70); /* --- Scrollbar --- */ --f-scrollbar-track: oklch(95% 0.010 75); --f-scrollbar-thumb: oklch(75% 0.014 70); --f-scrollbar-thumb-hover: oklch(60% 0.014 60); /* --- Decorative --- */ --f-rule-color: oklch(85% 0.012 70); --f-rule-accent: oklch(45% 0.12 25); --f-blockquote-border: oklch(45% 0.12 25); --f-blockquote-bg: oklch(95% 0.010 75); --f-selection-bg: oklch(45% 0.12 25 / 0.10); /* --- Transitions --- */ --f-transition-fast: 150ms ease; --f-transition-base: 250ms ease; --f-transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1); /* --- Connection type colors (muted for writerly) --- */ --conn-color-causal: #5a8a8a; --conn-color-foreshadowing: #7a6b8a; --conn-color-thematic-parallel: #8a7b4a; --conn-color-character-continuity: #4a7c59; --conn-color-escalation: #8a4a4a; --conn-color-callback: #4a6b8a; --conn-color-emotional-echo: #8a5a6b; --conn-color-symbolic-parallel: #6b5a8a; --conn-color-temporal: #5a6b8a; } /* ----- DARK THEME (warm-night, v2-aligned) ------------------------------ */ /* Aesthetic: same EB Garamond + JetBrains Mono voice as writerly, on the v2 */ /* `--night-*` warm near-black palette, with a brightened oxblood accent. */ /* Pairs cleanly with the marketing site's `.section--dark` blocks. */ [data-theme="dark"] { /* --- Typography (mirrors writerly so the brand voice carries) --- */ --f-font-display: 'EB Garamond', 'Sorts Mill Goudy', Georgia, serif; --f-font-body: 'EB Garamond', 'Sorts Mill Goudy', Georgia, serif; --f-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --f-font-size-base: 17px; --f-line-height-body: 1.55; --f-line-height-heading: 1.12; --f-letter-spacing-heading: -0.012em; --f-letter-spacing-label: 0.18em; /* --- Page backgrounds (v2 night scale) --- */ --f-bg-page: oklch(18% 0.010 65); --f-bg-surface: oklch(22% 0.012 65); --f-bg-elevated: oklch(25% 0.014 65); --f-bg-inset: oklch(15% 0.008 65); --f-bg-hero: oklch(18% 0.010 65); --f-bg-nav: oklch(18% 0.010 65 / 0.92); /* --- Text (warm off-whites) --- */ --f-fg-primary: oklch(92% 0.010 80); --f-fg-secondary: oklch(72% 0.012 75); --f-fg-tertiary: oklch(60% 0.014 70); --f-fg-placeholder: oklch(48% 0.014 70); --f-fg-heading: oklch(94% 0.010 80); --f-fg-link: oklch(92% 0.010 80); --f-fg-link-hover: oklch(62% 0.13 25); /* brightened oxblood */ --f-fg-inverse: oklch(20% 0.012 60); /* --- Borders --- */ --f-border-default: oklch(32% 0.014 65); --f-border-light: oklch(28% 0.012 65); --f-border-strong: oklch(45% 0.014 65); --f-border-accent: oklch(55% 0.12 25 / 0.45); /* --- Primary accent (brightened oxblood for dark backgrounds) --- */ --f-accent-primary: oklch(62% 0.13 25); --f-accent-primary-bg: oklch(55% 0.12 25 / 0.14); --f-accent-primary-fg: oklch(70% 0.13 25); /* --- Entity accents: muted, warm-shifted to sit on warm-black --- */ --f-accent-green: oklch(70% 0.10 150); /* sage */ --f-accent-green-bg: oklch(70% 0.10 150 / 0.12); --f-accent-green-fg: oklch(78% 0.10 150); --f-accent-blue: oklch(70% 0.08 240); /* steel */ --f-accent-blue-bg: oklch(70% 0.08 240 / 0.12); --f-accent-blue-fg: oklch(78% 0.08 240); --f-accent-violet: oklch(70% 0.09 300); /* dusk */ --f-accent-violet-bg: oklch(70% 0.09 300 / 0.12); --f-accent-violet-fg: oklch(78% 0.09 300); --f-accent-rose: oklch(70% 0.10 15); /* rose */ --f-accent-rose-bg: oklch(70% 0.10 15 / 0.12); --f-accent-rose-fg: oklch(78% 0.10 15); --f-accent-indigo: oklch(70% 0.08 270); --f-accent-indigo-bg: oklch(70% 0.08 270 / 0.12); --f-accent-indigo-fg: oklch(78% 0.08 270); --f-accent-cyan: oklch(72% 0.08 195); --f-accent-cyan-bg: oklch(72% 0.08 195 / 0.12); --f-accent-cyan-fg: oklch(80% 0.08 195); --f-accent-orange: oklch(75% 0.10 70); /* warm amber */ --f-accent-orange-bg: oklch(75% 0.10 70 / 0.12); --f-accent-orange-fg: oklch(82% 0.10 70); /* --- Card styling (opaque night-2 — no transparency bleed) --- */ --f-card-bg: oklch(22% 0.012 65); --f-card-bg-hover: oklch(25% 0.014 65); --f-card-border: oklch(32% 0.014 65); --f-card-border-hover: oklch(55% 0.12 25 / 0.55); --f-card-shadow: 0 1px 2px oklch(0% 0 0 / 0.30); --f-card-shadow-hover: 0 4px 12px oklch(0% 0 0 / 0.40); --f-card-radius: 6px; /* --- Badge / tag --- */ --f-badge-bg: oklch(25% 0.014 65); --f-badge-fg: oklch(72% 0.012 75); --f-badge-border: oklch(32% 0.014 65); /* --- Scrollbar --- */ --f-scrollbar-track: oklch(15% 0.008 65); --f-scrollbar-thumb: oklch(32% 0.014 65); --f-scrollbar-thumb-hover: oklch(45% 0.014 65); /* --- Decorative --- */ --f-rule-color: oklch(32% 0.014 65); --f-rule-accent: oklch(55% 0.12 25); --f-blockquote-border: oklch(55% 0.12 25); --f-blockquote-bg: oklch(22% 0.012 65); --f-selection-bg: oklch(55% 0.12 25 / 0.25); --f-transition-fast: 150ms ease; --f-transition-base: 250ms ease; --f-transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1); /* --- Connection type colors (brightened a touch for dark) --- */ --conn-color-causal: oklch(72% 0.08 195); --conn-color-foreshadowing: oklch(70% 0.10 300); --conn-color-thematic-parallel: oklch(75% 0.10 70); --conn-color-character-continuity: oklch(70% 0.10 150); --conn-color-escalation: oklch(65% 0.14 25); --conn-color-callback: oklch(70% 0.08 240); --conn-color-emotional-echo: oklch(70% 0.10 15); --conn-color-symbolic-parallel: oklch(70% 0.09 300); --conn-color-temporal: oklch(70% 0.08 270); } /* ============================================================================ * SEMANTIC UTILITY CLASSES * These resolve to different values per theme via CSS custom properties. * ============================================================================ */ /* --- Document-wide background follows the active theme. --- */ /* Without this, stays white and dark mode "leaks" the paper bg. */ html[data-theme] body { background-color: var(--f-bg-page); color: var(--f-fg-secondary); } /* --- Page-level --- */ .f-page { background-color: var(--f-bg-page); color: var(--f-fg-secondary); font-family: var(--f-font-body); font-size: var(--f-font-size-base); line-height: var(--f-line-height-body); } /* --- Marketing v2 chrome (.nav / .footer / .wordmark) re-skinned for dark. --- */ /* These mirror the rules in marketing_base.html so the catalog gets the same */ /* warm-night chrome without duplicating per-template styles. */ [data-theme="dark"] .nav { background: color-mix(in srgb, var(--f-bg-page) 92%, transparent); border-bottom-color: var(--f-border-default); } [data-theme="dark"] .nav__links a { color: var(--f-fg-secondary); } [data-theme="dark"] .nav__links a:hover, [data-theme="dark"] .nav__links a[aria-current="page"] { color: var(--f-fg-primary); border-bottom-color: var(--f-accent-primary); } [data-theme="dark"] .wordmark { color: var(--f-fg-primary); } [data-theme="dark"] .wordmark .dot { color: var(--f-accent-primary); } [data-theme="dark"] .nav__theme { color: var(--f-fg-secondary); border-color: var(--f-border-default); } [data-theme="dark"] .nav__theme:hover { color: var(--f-accent-primary); border-color: var(--f-accent-primary); } [data-theme="dark"] .footer { background: var(--f-bg-page); border-top-color: var(--f-border-default); color: var(--f-fg-secondary); } [data-theme="dark"] .footer h4 { color: var(--f-fg-primary); } [data-theme="dark"] .footer a { color: var(--f-fg-secondary); border-bottom-color: var(--f-border-default); } [data-theme="dark"] .footer a:hover { color: var(--f-accent-primary); border-bottom-color: var(--f-accent-primary); } [data-theme="dark"] .footer__colophon { color: var(--f-fg-tertiary); border-top-color: var(--f-border-default); } .f-heading { font-family: var(--f-font-display); color: var(--f-fg-heading); line-height: var(--f-line-height-heading); letter-spacing: var(--f-letter-spacing-heading); } .f-label { font-family: var(--f-font-body); font-size: 0.75rem; font-weight: 500; letter-spacing: var(--f-letter-spacing-label); text-transform: uppercase; color: var(--f-fg-tertiary); } .f-mono { font-family: var(--f-font-mono); } /* --- Text levels --- */ .f-text-primary { color: var(--f-fg-primary); } .f-text-secondary { color: var(--f-fg-secondary); } .f-text-tertiary { color: var(--f-fg-tertiary); } .f-text-heading { color: var(--f-fg-heading); } .f-text-link { color: var(--f-fg-link); transition: color var(--f-transition-fast); } .f-text-link:hover { color: var(--f-fg-link-hover); } /* --- Backgrounds --- */ .f-bg-page { background-color: var(--f-bg-page); } .f-bg-surface { background-color: var(--f-bg-surface); } .f-bg-elevated { background-color: var(--f-bg-elevated); } .f-bg-inset { background-color: var(--f-bg-inset); } /* --- Cards --- */ .f-card { background: var(--f-card-bg); border: 1px solid var(--f-card-border); border-radius: var(--f-card-radius); box-shadow: var(--f-card-shadow); transition: all var(--f-transition-base); } .f-card:hover, a.f-card:hover { background: var(--f-card-bg-hover); border-color: var(--f-card-border-hover); box-shadow: var(--f-card-shadow-hover); } /* --- Badges --- */ .f-badge { background: var(--f-badge-bg); color: var(--f-badge-fg); border: 1px solid var(--f-badge-border); border-radius: 4px; padding: 0.125rem 0.5rem; font-size: 0.75rem; font-weight: 500; } /* --- Navigation --- */ .f-nav { background: var(--f-bg-nav); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--f-border-light); } /* --- Rules / dividers --- */ .f-rule { border-color: var(--f-rule-color); } .f-rule-accent { border-color: var(--f-rule-accent); } /* --- Borders --- */ .f-border { border-color: var(--f-border-default); } .f-border-light { border-color: var(--f-border-light); } .f-border-strong { border-color: var(--f-border-strong); } /* --- Blockquotes --- */ .f-blockquote { border-left: 2px solid var(--f-blockquote-border); background: var(--f-blockquote-bg); padding: 1rem 1.25rem; border-radius: 0 var(--f-card-radius) var(--f-card-radius) 0; } /* --- Selection --- */ ::selection { background: var(--f-selection-bg); } /* --- Scrollbar --- */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--f-scrollbar-track); } ::-webkit-scrollbar-thumb { background: var(--f-scrollbar-thumb); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--f-scrollbar-thumb-hover); } /* --- Accent-colored utilities --- */ .f-accent-primary { color: var(--f-accent-primary); } .f-accent-primary-bg { background-color: var(--f-accent-primary-bg); } .f-accent-green { color: var(--f-accent-green); } .f-accent-green-bg { background-color: var(--f-accent-green-bg); } .f-accent-blue { color: var(--f-accent-blue); } .f-accent-blue-bg { background-color: var(--f-accent-blue-bg); } .f-accent-violet { color: var(--f-accent-violet); } .f-accent-violet-bg { background-color: var(--f-accent-violet-bg); } .f-accent-cyan { color: var(--f-accent-cyan); } .f-accent-cyan-bg { background-color: var(--f-accent-cyan-bg); } /* --- Connection colors (theme-aware) --- */ [data-theme] .conn-causal { --conn-color: var(--conn-color-causal); } [data-theme] .conn-foreshadowing { --conn-color: var(--conn-color-foreshadowing); } [data-theme] .conn-thematic-parallel { --conn-color: var(--conn-color-thematic-parallel); } [data-theme] .conn-character-continuity { --conn-color: var(--conn-color-character-continuity); } [data-theme] .conn-escalation { --conn-color: var(--conn-color-escalation); } [data-theme] .conn-callback { --conn-color: var(--conn-color-callback); } [data-theme] .conn-emotional-echo { --conn-color: var(--conn-color-emotional-echo); } [data-theme] .conn-symbolic-parallel { --conn-color: var(--conn-color-symbolic-parallel); } [data-theme] .conn-temporal { --conn-color: var(--conn-color-temporal); } /* --- Writerly-specific prose styling --- */ [data-theme="writerly"] .f-prose { font-family: var(--f-font-body); color: var(--f-fg-secondary); line-height: var(--f-line-height-body); } [data-theme="writerly"] .f-prose p { margin-bottom: 1.25em; } [data-theme="writerly"] .f-prose p:last-child { margin-bottom: 0; } [data-theme="writerly"] .f-prose strong { color: var(--f-fg-primary); font-weight: 600; } [data-theme="writerly"] .f-prose em { font-style: italic; color: var(--f-fg-primary); } [data-theme="writerly"] .f-prose a { color: var(--f-fg-link); text-decoration: underline; text-decoration-color: var(--f-border-accent); text-underline-offset: 3px; } /* --- Smooth transitions for theme switching --- */ html { scroll-behavior: smooth; } html[data-theme] * { transition-property: background-color, border-color, color, box-shadow; transition-duration: 0ms; /* instant on page load */ } html.theme-transitioning * { transition-duration: 300ms !important; } /* --- Writerly-specific decorative elements --- */ [data-theme="writerly"] .f-ornament::before { content: ''; display: block; width: 40px; height: 2px; background: var(--f-border-accent); margin-bottom: 1.5rem; } [data-theme="writerly"] .f-ornament-center::before { content: ''; display: block; width: 40px; height: 2px; background: var(--f-border-accent); margin: 0 auto 1.5rem; } /* --- Dark theme retains existing animations --- */ [data-theme="dark"] .f-animate-gradient { background-size: 200% 200%; animation: gradient-shift 15s ease infinite; } @keyframes gradient-shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } [data-theme="dark"] .f-glass { background: rgba(15, 23, 42, 0.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* --- Fade-in animation (both themes, subtler in writerly) --- */ @keyframes fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .f-fade-in { animation: fadeIn 0.5s ease-out forwards; } .f-stagger > * { opacity: 0; animation: fadeIn 0.4s ease-out forwards; } .f-stagger > *:nth-child(1) { animation-delay: 0.03s; } .f-stagger > *:nth-child(2) { animation-delay: 0.06s; } .f-stagger > *:nth-child(3) { animation-delay: 0.09s; } .f-stagger > *:nth-child(4) { animation-delay: 0.12s; } .f-stagger > *:nth-child(5) { animation-delay: 0.15s; } .f-stagger > *:nth-child(6) { animation-delay: 0.18s; } /* --- Connection badges (shared, theme-aware) --- */ .f-conn-badge { background-color: color-mix(in srgb, var(--conn-color) 12%, transparent); border: 1px solid color-mix(in srgb, var(--conn-color) 30%, transparent); color: var(--conn-color); transition: all var(--f-transition-base); } [data-theme="writerly"] .f-conn-badge { background-color: color-mix(in srgb, var(--conn-color) 8%, var(--f-bg-surface)); border-color: color-mix(in srgb, var(--conn-color) 25%, var(--f-border-default)); } .f-conn-badge:hover { background-color: color-mix(in srgb, var(--conn-color) 20%, transparent); border-color: color-mix(in srgb, var(--conn-color) 50%, transparent); } /* --- Form inputs --- */ .f-form-input:focus { border-color: var(--f-accent-primary) !important; outline: none; } /* ============================================================================ * FOCUS INDICATORS — WCAG AAA * ============================================================================ */ :focus-visible { outline: 2px solid var(--f-accent-primary); outline-offset: 2px; } /* Remove default focus ring, keep focus-visible */ :focus:not(:focus-visible) { outline: none; } /* Enhanced focus for buttons and links */ a:focus-visible, button:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--f-accent-primary); outline-offset: 2px; border-radius: 4px; } /* ============================================================================ * REDUCED MOTION — Accessibility * ============================================================================ */ @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; } } /* ============================================================================ * HOVER UTILITIES — replace inline JS onmouseover handlers * ============================================================================ */ .f-hover-accent { transition: color var(--f-transition-fast); } .f-hover-accent:hover, .f-hover-accent:focus-visible { color: var(--f-accent-primary) !important; } .f-hover-border { transition: border-color var(--f-transition-fast); } .f-hover-border:hover, .f-hover-border:focus-visible { border-color: var(--f-accent-primary) !important; } .f-hover-bg { transition: background var(--f-transition-fast); } .f-hover-bg:hover, .f-hover-bg:focus-visible { background: var(--f-bg-elevated) !important; } .f-hover-card { transition: border-color var(--f-transition-fast), box-shadow var(--f-transition-fast), transform var(--f-transition-fast); } .f-hover-card:hover, .f-hover-card:focus-visible { border-color: var(--f-accent-primary); box-shadow: var(--f-card-shadow-hover); transform: translateY(-2px); } .f-hover-reveal { transition: opacity var(--f-transition-fast); } .f-hover-reveal:hover, .f-hover-reveal:focus-visible { opacity: 1 !important; } .f-hover-link { transition: color var(--f-transition-fast); } .f-hover-link:hover, .f-hover-link:focus-visible { color: var(--f-fg-link-hover, var(--f-accent-primary)) !important; }