/** * tokens.css — ChatStory Design Tokens * Single source of truth for all visual constants (inspired by ExcaliClaw). * Zero hardcoded visual values should live outside this file. * * Model: a PRESET (editorial | slate | warm) owns the structural look * (background, surface, text, border, fonts). The admin's per-story ACCENT * (--primary-color / --secondary-color / --link-color, injected inline) overrides * the accent tokens, with the preset accent as fallback. Muted/dim/surface-raised * derive via color-mix so any accent yields a coherent palette. * * Applied via . */ :root { /* ─── Type families ───────────────────────────────────── */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-serif: 'Fraunces', 'Playfair Display', Georgia, serif; --font-display: var(--font-serif); --font-mono: 'JetBrains Mono', ui-monospace, 'Courier New', monospace; /* JOTF brand fonts (Fontshare) — headline + body */ --font-clash: 'Clash Display', 'Oswald', var(--font-sans); --font-satoshi: 'Satoshi', 'Inter', var(--font-sans); /* ─── Type scale (fluid) ──────────────────────────────── */ --text-xs: clamp(0.72rem, 0.68rem + 0.2vw, 0.8rem); --text-sm: clamp(0.85rem, 0.80rem + 0.25vw, 0.95rem); --text-base: clamp(1rem, 0.95rem + 0.3vw, 1.12rem); --text-lg: clamp(1.2rem, 1.10rem + 0.5vw, 1.4rem); --text-xl: clamp(1.5rem, 1.30rem + 1vw, 2rem); --text-2xl: clamp(2rem, 1.60rem + 2vw, 3rem); --text-3xl: clamp(2.6rem, 2.00rem + 3vw, 4rem); --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --leading-tight: 1.15; --leading-normal: 1.55; --leading-relaxed: 1.75; /* Viewer font-size scaling — set via , applied to text as calc(var(--text-*) * var(--font-size-factor)). */ --font-size-factor-small: 0.85; --font-size-factor-normal: 1; --font-size-factor-large: 1.25; --font-size-factor-bigger: 1.5; --font-size-factor-really-bigger: 2; --font-size-factor: 1; /* ─── Spacing ─────────────────────────────────────────── */ --space-2xs: 0.25rem; --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4.5rem; /* ─── Radius ──────────────────────────────────────────── */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px; /* ─── Motion ──────────────────────────────────────────── */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --transition-fast: all 0.15s var(--ease); --transition-base: all 0.3s var(--ease); --transition-slow: all 0.6s var(--ease); /* ─── Z-index ─────────────────────────────────────────── */ --z-base: 1; --z-nav: 50; --z-tooltip: 80; --z-overlay: 100; /* ─── Layout ──────────────────────────────────────────── */ --slide-max-width: 900px; --nav-size: 2.75rem; /* ─── PRESET DEFAULTS: Editorial · light (also the base fallback) ── */ --preset-bg: #FCFBF7; --preset-surface: #FFFFFF; --preset-text: #1F1B16; --preset-accent: #B4472E; --preset-accent-2: #7C5A3A; --preset-border: #E7E2D6; --preset-accent-contrast: #FFFFFF; --preset-font-header: var(--font-serif); --preset-font-body: var(--font-sans); /* ─── SEMANTIC TOKENS (what components consume) ────────── Each falls back to the preset. The admin's per-story color vars (--primary-color, --background-color, …) are injected inline ONLY when the "Override preset colors" option is on, so by default the preset owns the palette. Muted/dim/raised derive so any accent stays coherent. */ --color-bg: var(--background-color, var(--preset-bg)); --color-text: var(--text-color, var(--preset-text)); --color-accent: var(--primary-color, var(--preset-accent)); --color-accent-2: var(--secondary-color, var(--preset-accent-2)); --color-link: var(--link-color, var(--color-accent)); --color-accent-contrast: var(--preset-accent-contrast); --color-surface: var(--preset-surface); --color-surface-raised: color-mix(in srgb, var(--color-surface) 88%, var(--color-text) 12%); --color-text-muted: color-mix(in srgb, var(--color-text) 60%, var(--color-bg)); --color-text-dim: color-mix(in srgb, var(--color-text) 40%, var(--color-bg)); --color-border: var(--preset-border); --color-border-strong: color-mix(in srgb, var(--color-text) 24%, transparent); /* Semantic status colors (theme-agnostic; used by alerts, delete, etc.) */ --color-danger: #DC2626; --color-danger-contrast: #FFFFFF; --color-success: #16A34A; --color-success-contrast: #FFFFFF; --color-warning: #D97706; --color-warning-contrast: #FFFFFF; --color-info: #2563EB; --color-info-contrast: #FFFFFF; /* Fonts: admin override when set, else preset */ --font-header: var(--header-font, var(--preset-font-header)); --font-body: var(--body-font, var(--preset-font-body)); /* Shadows — tinted by the text color so they read on any surface */ --shadow-sm: 0 1px 3px color-mix(in srgb, var(--color-text) 8%, transparent); --shadow-md: 0 6px 20px color-mix(in srgb, var(--color-text) 12%, transparent); --shadow-lg: 0 18px 44px color-mix(in srgb, var(--color-text) 18%, transparent); } /* ══════════════════════════════════════════════════════════ PRESET: Editorial (cream, serif headers, terracotta) ══════════════════════════════════════════════════════════ */ [data-theme="editorial"][data-mode="dark"] { --preset-bg: #1A1713; --preset-surface: #211D18; --preset-text: #F0EBE2; --preset-accent: #D9714E; --preset-accent-2:#C09A6B; --preset-border: #352F27; } /* ══════════════════════════════════════════════════════════ PRESET: Slate (Inter, cool grays, emerald) — SaaS/modern ══════════════════════════════════════════════════════════ */ [data-theme="slate"] { --preset-bg: #F8FAFC; --preset-surface: #FFFFFF; --preset-text: #0F172A; --preset-accent: #10B981; --preset-accent-2: #6366F1; --preset-border: #E2E8F0; --preset-font-header: var(--font-sans); --preset-font-body: var(--font-sans); } [data-theme="slate"][data-mode="dark"] { --preset-bg: #0F172A; --preset-surface: #1E293B; --preset-text: #F1F5F9; --preset-accent: #10B981; --preset-accent-2:#818CF8; --preset-border: #334155; } /* ══════════════════════════════════════════════════════════ PRESET: Warm (cream/amber/brown, soft rounding) ══════════════════════════════════════════════════════════ */ [data-theme="warm"] { --preset-bg: #FDF6EC; --preset-surface: #FFFDF9; --preset-text: #3B2F2A; --preset-accent: #C2610C; --preset-accent-2: #9C6B3F; --preset-border: #ECDCC5; --preset-font-header: var(--font-serif); --preset-font-body: var(--font-sans); } [data-theme="warm"][data-mode="dark"] { --preset-bg: #241C15; --preset-surface: #2E241B; --preset-text: #F3E9DB; --preset-accent: #E0801F; --preset-accent-2: #C9975E; --preset-border: #43362A; } /* ══════════════════════════════════════════════════════════ PRESET: Jedi (JediOnTheFly brand — Plasma Magenta on Slate, Clash Display headlines + Satoshi body). The default preset. ══════════════════════════════════════════════════════════ */ [data-theme="jedi"] { --preset-bg: #FAFAFA; /* Off-White page */ --preset-surface: #FFFFFF; /* Pure White cards */ --preset-text: #111827; /* Text primary (light) */ --preset-accent: #EC4899; /* Plasma Magenta */ --preset-accent-2: #DB2777; /* Magenta dark */ --preset-border: #E5E7EB; /* Light Gray */ --preset-accent-contrast: #FFFFFF; --preset-font-header: var(--font-clash); --preset-font-body: var(--font-satoshi); } [data-theme="jedi"][data-mode="dark"] { --preset-bg: #0F172A; /* Dark Slate */ --preset-surface: #1E293B; /* Slate 800 */ --preset-text: #F1F5F9; /* Text primary (dark) */ --preset-accent: #EC4899; /* Plasma Magenta */ --preset-accent-2: #F472B6; /* Magenta light — reads on dark */ --preset-border: #334155; /* Slate 700 */ } /* Respect users who prefer reduced motion */ @media (prefers-reduced-motion: reduce) { :root { --transition-fast: none; --transition-base: none; --transition-slow: none; } }