/* ===================================================================== Forsaken Lands — Design Tokens ===================================================================== Single source of truth for every design value. Loaded first; all other stylesheets reference these variables. During migration, new semantic tokens alias the legacy variable names (--highlight, --accent, --bg-body, …) so the existing theme/scheme override blocks in style.css / redesign.css / kanso.css still drive the color values per theme. After the migration completes the aliases can be flipped to direct values and the legacy names removed in a future cleanup pass. Naming: --color-{role}[-modifier] semantic role (no literal color names) --font-{role} family by role --font-size-{step} t-shirt scale xs..4xl --font-weight-{role} regular/medium/semibold/bold --line-height-{role} tight/snug/base/relaxed --letter-spacing-{role} tight/normal/wide/wider/widest --space-{N} 4px-based numeric scale --radius-{step} t-shirt scale + pill / full --shadow-{step} t-shirt scale + named --motion-{step} instant/fast/base/slow/slower --easing-{role} linear/default/out/in/in-out/spring --z-{role} semantic layer name ===================================================================== */ :root { /* ================================================================ COLOR — SURFACES ================================================================ */ --color-bg-base: var(--bg-body); --color-bg-elevated: var(--bg-panel); --color-bg-secondary: var(--bg-secondary); --color-bg-tertiary: #0a0a0a; --color-bg-input: var(--bg-input); --color-bg-nav: var(--bg-nav); --color-bg-header: var(--bg-header); --color-bg-sidebar: var(--bg-sidebar); --color-bg-code: var(--bg-code); --color-bg-hover: var(--bg-hover); --color-bg-active: var(--bg-active); --color-bg-stripe: rgba(var(--color-warm-white-rgb, 255, 250, 240), 0.02); /* Overlay backdrops (modal / popover dim layers) */ --color-overlay-light: rgba(0, 0, 0, 0.40); --color-overlay-base: rgba(0, 0, 0, 0.50); --color-overlay-heavy: rgba(0, 0, 0, 0.60); --color-overlay-deep: rgba(5, 5, 5, 0.95); /* ================================================================ COLOR — TEXT ================================================================ */ --color-text: var(--text); --color-text-bright: var(--text-bright); --color-text-dim: var(--text-dim); --color-text-fade: var(--text-fade, var(--text-dim)); --color-text-inverse: var(--color-bg-base); --color-warm-white-rgb: var(--warm-white-rgb, 255, 250, 240); /* ================================================================ COLOR — BORDERS ================================================================ */ --color-border: var(--border); --color-border-hover: var(--border-hover); --color-border-strong: var(--nav-sep, rgba(var(--color-warm-white-rgb), 0.18)); --color-border-subtle: var(--nav-hover, rgba(var(--color-warm-white-rgb), 0.04)); /* ================================================================ COLOR — ACCENT (per-scheme primary; was --highlight) ================================================================ */ --color-accent-primary: var(--highlight); --color-accent-primary-hover: var(--highlight-hover, var(--highlight)); --color-accent-primary-muted: rgba(var(--highlight-rgb, 196, 168, 114), 0.45); --color-accent-primary-rgb: var(--highlight-rgb); --color-border-focus: var(--border-focus, var(--color-accent-primary)); /* ================================================================ COLOR — STATUS / FEEDBACK The legacy "--accent" was always equal to "--success" across every theme that declared both. Audit #5. Migrating to one name. ================================================================ */ --color-success: var(--accent); --color-success-hover: var(--accent-hover, var(--accent)); --color-success-muted: var(--accent-muted, rgba(var(--accent-rgb, 122, 158, 122), 0.20)); --color-success-rgb: var(--accent-rgb); --color-error: var(--error); --color-error-bg: var(--error-bg, rgba(var(--error-rgb, 196, 114, 114), 0.10)); --color-error-rgb: var(--error-rgb); --color-warn: var(--warn, var(--highlight)); --color-warn-rgb: var(--warn-rgb, var(--highlight-rgb)); /* Info / neutral-blue role (e.g., wiki activity, landing chips) */ --color-info: #7a9eb8; --color-info-rgb: 122, 158, 184; /* ================================================================ COLOR — LINKS ================================================================ */ --color-link: var(--link, var(--highlight)); --color-link-hover: var(--link-hover, var(--highlight-hover)); /* ================================================================ COLOR — ROLE / TERMINAL (play.css palette) Brighter, more saturated than the standard success/error tones. Distinct semantic role: terminal status indicators. ================================================================ */ --color-role-good: #5faf5f; --color-role-good-rgb: 95, 175, 95; --color-role-evil: #af5f5f; --color-role-evil-rgb: 175, 95, 95; --color-role-warn: #d7af5f; --color-role-warn-rgb: 215, 175, 95; --color-role-info: #5f87af; --color-role-info-rgb: 95, 135, 175; --color-role-brown: #af875f; --color-role-brown-rgb: 175, 135, 95; /* ================================================================ COLOR — SPECIAL MARKERS ================================================================ */ --color-imm: #5fafaf; --color-imm-rgb: 95, 175, 175; --color-banned: #d75f87; --color-banned-hover: #ff5fd7; --color-banned-rgb: 215, 95, 135; /* Donations / patron tier (separate green from --color-success) */ --color-patron: rgb(110, 170, 100); --color-patron-rgb: 110, 170, 100; /* ================================================================ TYPOGRAPHY — FAMILIES ================================================================ */ --font-body: var(--font-prose); --font-ui: var(--font-sans, var(--font-prose)); --font-script: 'FuzzyHand', 'Georgia', serif; /* --font-mono and --font-display already canonical; kept as-is */ /* ================================================================ TYPOGRAPHY — SIZE SCALE Tuned to the audit clusters. Off-scale one-offs (0.66rem, 0.92rem, 1.05rem etc.) intentionally stay as literals at their callsites. ================================================================ */ --font-size-2xs: 0.55rem; --font-size-xs: 0.65rem; --font-size-sm: 0.78rem; --font-size-md: 0.85rem; --font-size-base: 1rem; --font-size-lg: 1.15rem; --font-size-xl: 1.35rem; --font-size-2xl: 1.6rem; --font-size-3xl: 2rem; --font-size-4xl: 2.5rem; /* ================================================================ TYPOGRAPHY — WEIGHT ================================================================ */ --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* ================================================================ TYPOGRAPHY — LINE HEIGHT ================================================================ */ --line-height-tight: 1.2; --line-height-snug: 1.4; --line-height-base: 1.55; --line-height-relaxed: 1.7; /* ================================================================ TYPOGRAPHY — LETTER SPACING ================================================================ */ --letter-spacing-tight: -0.02em; --letter-spacing-normal: 0; --letter-spacing-wide: 0.04em; --letter-spacing-wider: 0.08em; --letter-spacing-widest: 0.12em; /* ================================================================ SPACING SCALE (4px base, numeric index) New tokens map to existing --space-xs/sm/md/lg/xl/2xl where they overlap; the rest are new steps for finer control. ================================================================ */ --space-0: 0; --space-px: 1px; --space-1: var(--space-xs, 0.25rem); /* 4 */ --space-2: var(--space-sm, 0.5rem); /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: var(--space-md, 1rem); /* 16 */ --space-5: 1.25rem; /* 20 */ --space-6: var(--space-lg, 1.5rem); /* 24 */ --space-8: var(--space-xl, 2rem); /* 32 */ --space-10: 2.5rem; /* 40 */ --space-12: var(--space-2xl, 3rem); /* 48 */ --space-16: 4rem; /* 64 */ --space-20: 5rem; /* 80 */ /* ================================================================ BORDER RADIUS ================================================================ */ --radius-none: 0; --radius-xs: 2px; /* --radius-sm/md/lg already canonical in style.css; aliases not needed */ --radius-xl: 16px; --radius-pill: 999px; --radius-full: 50%; /* ================================================================ BOX SHADOWS ================================================================ */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.40); --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.50); --shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.60); --shadow-inset: inset 0 1px 0 rgba(var(--color-warm-white-rgb), 0.05); --shadow-glow-accent: 0 0 12px rgba(var(--color-accent-primary-rgb), 0.30); /* ================================================================ MOTION — DURATION ================================================================ */ --motion-instant: 0s; --motion-fast: 0.10s; --motion-base: 0.15s; --motion-slow: 0.30s; --motion-slower: 0.50s; /* ================================================================ MOTION — EASING ================================================================ */ --easing-linear: linear; --easing-default: ease; --easing-out: ease-out; --easing-in: ease-in; --easing-in-out: ease-in-out; --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* ================================================================ Z-INDEX LAYERS Mapped from the existing scatter (audit Z-index section). Each file's local z-index numbers can migrate to these named layers file by file. ================================================================ */ --z-base: 0; --z-content: 1; --z-decoration: 2; --z-elevated: 10; --z-overlay: 100; --z-sticky: 500; --z-header: 1000; --z-dropdown: 1100; --z-modal-backdrop: 1900; --z-modal: 2000; --z-toast: 9000; --z-tooltip: 9999; } /* End of tokens.css — variant overrides remain in style.css / redesign.css / kanso.css for now; they drive token values through the var() aliases above. */