/* ============================================================ Forgelit design tokens · single source of truth ------------------------------------------------------------ Formalizes the palette already shipping in forgelit-site/assets/css/style.css and fills the gaps (full ramps, semantic colors, type scale, spacing). Dark is the default theme (Forgelit is dark-first). A [data-theme="light"] block is provided for any light surface (light mode, a badge on white, print). USAGE: import this file first, then reference the semantic role tokens (--color-*) in components. Do not hardcode hex. Contrast ratios in comments are approximate: verify each text/background pair in WebAIM before shipping copy. No em dashes in this file, per brand style. ============================================================ */ :root { /* ---- Primitives: neutral ramp (cool, near-black to white) ---- */ --neutral-950: #09090b; /* page background */ --neutral-900: #0e0f13; /* raised background */ --neutral-850: #131318; /* card */ --neutral-800: #18181f; /* card hover */ --neutral-700: #1e1e28; /* border */ --neutral-600: #2a2a38; /* bright border */ --neutral-500: #6b7084; /* muted text (large / UI only on dark) */ --neutral-300: #b0b4c0; /* dim text */ --neutral-100: #f0f0f3; /* primary text */ --neutral-0: #ffffff; /* ---- Primitives: brand (indigo / periwinkle) ---- */ --indigo-300: #a9beff; /* hover / brighter on dark */ --indigo-400: #7c9cf8; /* THE Forgelit brand color */ --indigo-600: #3b5bd9; /* darker step for light surfaces (verify 4.5:1 on white) */ --indigo-800: #23306b; /* deep tint for glows / fills */ /* ---- Primitives: accent (purple) ---- */ --purple-400: #b07cf8; /* secondary accent */ --purple-600: #8b5cf6; /* darker purple for light surfaces */ /* ---- Primitives: semantic hues (tuned for the dark canvas; verify) ---- */ --green-400: #3ecf8e; --amber-400: #f5c451; --red-400: #f2555a; /* ============================================================ Semantic role tokens · USE THESE in components Default = dark theme ============================================================ */ --color-bg: var(--neutral-950); --color-bg-raised: var(--neutral-900); --color-surface: var(--neutral-850); --color-surface-hover: var(--neutral-800); --color-border: var(--neutral-700); --color-border-bright: var(--neutral-600); --color-text: var(--neutral-100); /* ~18:1 on bg (AAA) */ --color-text-dim: var(--neutral-300); /* ~9:1 on bg (AAA) */ --color-text-muted: var(--neutral-500); /* ~3.8:1 on bg: large text / UI only */ --color-brand: var(--indigo-400); /* links, icons, text on dark: ~7.4:1 (AAA) */ --color-brand-fill: var(--indigo-400); /* button/icon fills on dark */ --color-brand-hover: var(--indigo-300); --color-brand-strong: var(--indigo-600); /* for text/marks on LIGHT surfaces (verify) */ --color-accent: var(--purple-400); /* decorative: tags, quotes, second spark */ --color-success: var(--green-400); --color-warning: var(--amber-400); --color-error: var(--red-400); --color-info: var(--indigo-400); --color-glow: rgba(124, 156, 248, 0.08); /* the signature indigo glow */ /* ---- Spacing: 4px base grid ---- */ --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; /* ---- Type scale: 1.25 modular ratio, base 16px ---- */ --text-xs: 0.8rem; /* 12.8px labels, legal */ --text-sm: 0.875rem; /* 14px meta, captions */ --text-base: 1rem; /* 16px body */ --text-md: 1.25rem; /* 20px lead / large body */ --text-lg: 1.563rem; /* 25px H3 */ --text-xl: 1.953rem; /* 31px H2 */ --text-2xl: 2.441rem; /* 39px H1 */ --text-3xl: 3.052rem; /* 49px hero / OG titles */ /* ---- Line height and measure ---- */ --leading-tight: 1.15; /* headings, wordmark */ --leading-normal: 1.5; /* UI */ --leading-relaxed: 1.6; /* long-form body */ --measure-prose: 62ch; /* max line length for readable prose */ /* ---- Weights (Inter) ---- */ --weight-regular: 400; --weight-medium: 500; --weight-bold: 700; --weight-black: 800; /* headings and wordmark */ /* ---- Radius (matches shipped 10 / 14) ---- */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-full: 9999px; /* ---- Shadow / elevation (subtle on dark) ---- */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.45); /* ---- Type families (self-hosted; see forgelit-site/assets/fonts/fonts.css) ---- */ --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: "Space Grotesk", var(--font-sans); /* wordmark, H1/H2 */ --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; /* Display weight. Space Grotesk is geometric and reads heavy, so 700 here carries the same presence as Inter 800 did. */ --weight-display: 700; --tracking-display: -0.02em; /* ============================================================ Compatibility aliases: the variable names the current forgelit-site/assets/css/style.css already uses. Keeping these means tokens.css can drop in without breaking the shipped stylesheet. Migrate call sites to --color-* over time. ============================================================ */ --bg: var(--color-bg); --bg-raised: var(--color-bg-raised); --fg: var(--color-text); --fg-dim: var(--color-text-dim); --muted: var(--color-text-muted); --card: var(--color-surface); --card-hover: var(--color-surface-hover); --accent: var(--color-brand); --accent-2: var(--color-accent); --border: var(--color-border); --border-bright: var(--color-border-bright); --glow: var(--color-glow); --radius: var(--radius-md); } /* ============================================================ Light theme override. Only the semantic role tokens change; every component that reads --color-* inherits automatically. Brand shifts to the darker indigo step so it passes contrast on white. Verify all pairings in WebAIM before shipping. ============================================================ */ :root[data-theme="light"] { --color-bg: var(--neutral-0); --color-bg-raised: #f7f7fb; --color-surface: #ffffff; --color-surface-hover: #f1f2f7; --color-border: #e4e5ec; --color-border-bright: #d6d8e2; --color-text: #14141a; --color-text-dim: #4a4d5a; --color-text-muted: #6b7084; --color-brand: var(--indigo-600); /* darker for text on white */ --color-brand-fill: var(--indigo-400); --color-brand-hover: var(--indigo-800); --color-brand-strong: var(--indigo-800); --color-accent: var(--purple-600); --color-glow: rgba(59, 91, 217, 0.06); --shadow-sm: 0 1px 3px rgba(20, 20, 26, 0.08), 0 1px 2px rgba(20, 20, 26, 0.06); --shadow-md: 0 6px 20px rgba(20, 20, 26, 0.10), 0 2px 6px rgba(20, 20, 26, 0.06); }