/* ========================================================================== PRAGMASYN — DESIGN TOKENS (single source of truth) Direction C "Contraluz": dark/light acts woven together; every component reads contextual tokens from its ground (.ground-dark / .ground-light), never raw primitives. No hardcoded values outside this file. Ever. ========================================================================== */ /* --- Self-hosted variable fonts (latin subset covers es-MX) --------------- */ @font-face { font-family: "Newsreader"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/fonts/newsreader-latin-var.woff2") format("woff2-variations"); } @font-face { font-family: "Newsreader"; font-style: italic; font-weight: 200 800; font-display: swap; src: url("/fonts/newsreader-latin-var-italic.woff2") format("woff2-variations"); } @font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-stretch: 75% 100%; font-display: swap; src: url("/fonts/instrument-sans-latin-var.woff2") format("woff2-variations"); } :root { /* --- Color primitives — indigo-tinted ramp, no neutral grays ----------- */ /* Every "gray" carries the ink hue (~230). #000, #FFF and slate-* banned. */ --ink-950: #060B22; /* wells, deepest ground */ --ink-900: #0A1030; /* --ink: dominant structural color */ --ink-800: #111844; /* raised surfaces on dark */ --ink-700: #262E55; /* hairlines on dark (1.42:1 vs ink) */ --ink-600: #3D4577; /* strong secondary on light (8.47:1) */ --ink-500: #565F9A; /* secondary text on light (5.61:1) */ --ink-450: #5A6499; /* muted UI on dark (3.29:1) */ --ink-400: #868DB5; /* muted UI on light (3.02:1) */ --ink-350: #8A93C4; /* secondary text on dark (6.24:1) */ --ink-300: #AEB4D2; /* disabled fg on light (contrast-exempt) */ --ink-250: #454F85; /* disabled fg on dark (contrast-exempt) */ --ink-200: #D9DCEC; /* hairlines on light (1.27:1 vs surface) */ --ink-100: #ECEEF7; /* sunken surfaces on light */ --ink-050: #F6F7FB; /* --surface: cooled off-white, never pure #FFF */ --accent: #1E5CF5; /* ONLY interactive color on light (5.02:1) */ --accent-strong: #184AC6;/* hover/active on light (6.92:1) */ --signal: #0FE3E8; /* cyan punctuation + interactive on dark (11.66:1) */ --signal-strong: #3FEAEE;/* hover/active on dark */ --reserve: #C31FDD; /* magenta: ONE use in the whole site, or none. Passes 4.04:1 on ink -> large text / UI only */ /* --- Typography -------------------------------------------------------- Pair: Newsreader (variable serif, opsz+wght) = the voice of judgment; Instrument Sans (variable grotesk, wght+wdth 75-100) = the hand of execution. Scale ratio 1.333 (perfect fourth) for aggressive display contrast; 14px "small" is the half-step (base / sqrt(1.333)). */ --font-display: "Newsreader", "Georgia", serif; --font-text: "Instrument Sans", "Segoe UI", system-ui, sans-serif; --text-caption: 0.75rem; /* 12px */ --text-small: 0.875rem; /* 14px half-step */ --text-body: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem); /* 16 -> 17px */ --text-h4: 1.3333rem; /* 21.3px */ --text-h3: 1.7778rem; /* 28.4px */ --text-h2: clamp(1.9rem, 1.55rem + 1.2vw, 2.3704rem); /* -> 37.9px */ --text-h1: clamp(2.2rem, 1.7rem + 2vw, 3.1605rem); /* -> 50.6px */ --text-display-2: clamp(2.37rem, 1.6rem + 3.4vw, 4.214rem);/* -> 67.4px */ --text-display: clamp(2.96rem, 1.45rem + 6.7vw, 7.4916rem);/* -> 119.9px */ /* Optical adjustments are per-size decisions, not one global value. */ --leading-display: 1.02; --leading-display-2: 1.05; --leading-h1: 1.12; --leading-h2: 1.2; --leading-h3: 1.3; --leading-h4: 1.4; --leading-body: 1.6; --leading-small: 1.5; --leading-caption: 1.4; --tracking-display: -0.022em; --tracking-display-2: -0.018em; --tracking-h1: -0.014em; --tracking-h2: -0.01em; --tracking-h3: -0.006em; --tracking-h4: 0em; --tracking-body: 0em; --tracking-small: 0.002em; --tracking-caption: 0.01em; --tracking-caps: 0.08em; /* uppercase labels need air */ --weight-display: 460; /* Newsreader sweet spot: authority w/o bold shout */ --weight-display-quiet: 340; --weight-text: 430; /* Instrument Sans, hair above 400 for --surface */ --weight-medium: 530; --weight-strong: 640; --width-text: 100%; --width-condensed: 80%; /* wdth axis: labels, numerals, dense annotations */ /* --- Spacing — 4/8 base ------------------------------------------------ */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-7: 3rem; /* 48 */ --space-8: 4rem; /* 64 */ --space-9: 6rem; /* 96 */ --space-10: 8rem; /* 128 */ --space-11: 12rem; /* 192 */ /* --- Grid -------------------------------------------------------------- 12 columns. Content capped so 2560px screens get composition, not stretched text. Breaking the grid is allowed ON PURPOSE: elements that weave across a seam use .bleeds (documented in DESIGN-SYSTEM.md). */ --grid-columns: 12; --gutter: clamp(1rem, 2.5vw, 2rem); --margin: clamp(1.25rem, 6vw, 7.5rem); --content-max: 85rem; /* 1360px */ --measure: 38rem; /* max line length for body text (~66ch) */ /* --- Geometry — derived from the mark's C3 construction ----------------- 30 deg = the only non-orthogonal angle in the site (120/3 family). Hairlines are the "hueco": gaps that reveal, not borders that box. */ --angle-weave: 30deg; --tan-weave: 0.57735; --hairline: 1px; --hairline-strong: 2px; --radius-s: 2px; /* editorial sharpness; big radii read template */ --radius-m: 4px; /* --- Motion -------------------------------------------------------------- Motion communicates hierarchy or state; it never decorates. ONE personality gesture site-wide (the weave reveal, --ease-weave). */ --dur-1: 120ms; /* micro: hover, focus */ --dur-2: 200ms; /* state changes */ --dur-3: 320ms; /* content reveals */ --dur-4: 560ms; /* reserved for the single weave gesture */ --ease-swift: cubic-bezier(0.32, 0, 0.18, 1); /* functional default */ --ease-exit: cubic-bezier(0.5, 0.1, 0.9, 0.4); /* leaving elements */ --ease-weave: cubic-bezier(0.19, 1, 0.22, 1); /* signature only */ /* --- Focus (designed, never outline:none) ------------------------------ */ --focus-width: 2px; --focus-offset: 3px; --z-base: 0; --z-weave: 10; /* elements crossing a seam */ --z-nav: 100; --z-overlay: 1000; } /* --- Ground contexts ------------------------------------------------------ Components consume ONLY these contextual tokens. Switching ground never touches a component: the act defines the physics, the component obeys. */ .ground-dark { --bg: var(--ink-900); --bg-raised: var(--ink-800); --bg-sunken: var(--ink-950); --fg: var(--ink-050); --fg-secondary: var(--ink-350); --fg-muted-ui: var(--ink-450); --fg-disabled: var(--ink-250); --hairline-color: var(--ink-700); --interactive: var(--signal); --interactive-strong: var(--signal-strong); --on-interactive: var(--ink-900); --focus-ring: var(--signal); --selection-bg: var(--signal); --selection-fg: var(--ink-900); background-color: var(--bg); color: var(--fg); } .ground-light { --bg: var(--ink-050); --bg-raised: var(--ink-050); --bg-sunken: var(--ink-100); --fg: var(--ink-900); --fg-secondary: var(--ink-500); --fg-muted-ui: var(--ink-400); --fg-disabled: var(--ink-300); --hairline-color: var(--ink-200); --interactive: var(--accent); --interactive-strong: var(--accent-strong); --on-interactive: var(--ink-050); --focus-ring: var(--accent); --selection-bg: var(--accent); --selection-fg: var(--ink-050); background-color: var(--bg); color: var(--fg); } /* --- System-level rules that belong to the tokens, not to components ---- */ .ground-dark ::selection { background: var(--selection-bg); color: var(--selection-fg); } .ground-light ::selection { background: var(--selection-bg); color: var(--selection-fg); } :focus-visible { outline: var(--focus-width) solid var(--focus-ring, var(--accent)); outline-offset: var(--focus-offset); border-radius: var(--radius-s); } @media (prefers-reduced-motion: reduce) { :root { --dur-1: 0.01ms; --dur-2: 0.01ms; --dur-3: 0.01ms; --dur-4: 0.01ms; } }