/* ============================================================ MAŠINA — nf design tokens (canonical) File: generatemasina/assets/css/tokens.css Namespace: --nf- (single dash, networkfailure) Source of truth for the design system. theme.json declares editor presets that resolve to these tokens via var(). Enqueue early (see functions.php note) and load into the editor with add_editor_style(). Reconciled from the designer's get_variable_defs v2.0 (2026-06-27 — source of truth): 22 colors, 21 text styles. Fluid type regenerated by nf-design-system/scripts/fluid_type.py (anchors 375 → 1440px, root 16px). Dark mode: nf switch sets light-mode / dark-mode CLASS on and resolves OS → class pre-paint, so no @media (prefers-color-scheme) fallback is required. ============================================================ */ /* ============================================================ :ROOT — light theme + non-flipping tokens ============================================================ */ :root { /* ---------------------------------------------------------- COLORS — semantic (light). This layer flips in dark mode. ---------------------------------------------------------- */ /* Surface */ --nf-surface-page: #fefdfa; /* page background */ --nf-surface-warm: #f0ebe1; /* warm sections, beige blocks */ --nf-surface-pure-white: #ffffff; /* cards, clean white surfaces (was v1.1 surface-card) */ --nf-surface-input: #f8fafc; /* form input fields */ --nf-surface-placeholder: #d9d9d9; /* image placeholder pre-load */ /* Text */ --nf-color-text-primary: #0f172b; /* section titles, footer headings */ --nf-color-text-heading: #2d2a2a; /* card titles */ --nf-color-text-secondary: #45556c; /* excerpts, general body */ --nf-color-text-caption: #62748e; /* captions, fine print */ --nf-color-text-muted: #868686; /* de-emphasized — fixed across modes; a11y flag, see D8 */ --nf-color-text-inverse: #90a1b9; /* text on dark surfaces */ /* Border */ --nf-border-default: #e2e8f0; --nf-border-soft: #cad5e2; --nf-border-medium: #c2c2c2; --nf-border-dark: #1d293d; /* Brand — primary + blue-accent stay fixed across modes */ --nf-color-brand-primary: #f94538; --nf-color-brand-blue-soft: #4491b7; --nf-color-brand-blue-accent: #366ef3; --nf-color-brand-blue-deep: #2426b4; /* Accent — error / alert / notice states */ --nf-accent-red-soft: #fef2f2; /* notice background */ --nf-accent-red-border: #ffe2e2; /* notice border */ --nf-accent-red-strong: #c10007; /* error text */ /* ---------------------------------------------------------- TYPOGRAPHY — families & weights Families self-hosted by GP Local Font Library; fallback chain lives here (the source of truth), not in GP. ---------------------------------------------------------- */ --nf-font-display: "Zilla Slab", Georgia, serif; --nf-font-ui: "Rethink Sans", system-ui, -apple-system, sans-serif; --nf-fw-regular: 400; --nf-fw-medium: 500; --nf-fw-semibold: 600; --nf-fw-bold: 700; /* ---------------------------------------------------------- TYPOGRAPHY — fluid size / line-height / tracking Generated by fluid_type.py from masina_sizes.csv. 21 styles. lh = unitless ratio; track = em. Regenerate after any size change; don't hand-edit. ---------------------------------------------------------- */ --nf-fs-display: clamp(2.5rem, 1.7958rem + 3.0047vw, 4.5rem); --nf-lh-display: 1.05; --nf-track-display: -0.025em; --nf-fs-h1-article: clamp(1.75rem, 1.5519rem + 0.8451vw, 2.3125rem); --nf-lh-h1-article: 1.1892; --nf-track-h1-article: -0.0135em; --nf-fs-h1-live: clamp(2.125rem, 1.7289rem + 1.6901vw, 3.25rem); --nf-lh-h1-live: 1.1; --nf-track-h1-live: -0.025em; --nf-fs-h2: clamp(1.625rem, 1.493rem + 0.5634vw, 2rem); --nf-lh-h2: 1.2; --nf-track-h2: 0em; --nf-fs-h3: clamp(1.3125rem, 1.2465rem + 0.2817vw, 1.5rem); --nf-lh-h3: 1.3333; --nf-track-h3: 0em; --nf-fs-h4: clamp(1rem, 0.978rem + 0.0939vw, 1.0625rem); --nf-lh-h4: 1.45; --nf-track-h4: 0em; --nf-fs-article-h2: clamp(1.0625rem, 1.0405rem + 0.0939vw, 1.125rem); --nf-lh-article-h2: 1.4444; --nf-track-article-h2: 0em; --nf-fs-stav-title: clamp(1.5625rem, 1.4525rem + 0.4695vw, 1.875rem); --nf-lh-stav-title: 1.2; --nf-track-stav-title: 0em; --nf-fs-body-large: clamp(1.125rem, 1.081rem + 0.1878vw, 1.25rem); --nf-lh-body-large: 1.6; --nf-track-body-large: 0em; --nf-fs-body-base: 1rem; --nf-lh-body-base: 1.5625; --nf-track-body-base: -0.01em; --nf-fs-footer-link: clamp(1rem, 0.978rem + 0.0939vw, 1.0625rem); --nf-lh-footer-link: 1.3235; --nf-track-footer-link: 0em; --nf-fs-footer-social: clamp(1rem, 0.978rem + 0.0939vw, 1.0625rem); --nf-lh-footer-social: 1.5; --nf-track-footer-social: 0em; --nf-fs-caption: 0.875rem; --nf-lh-caption: 1.4286; --nf-track-caption: 0em; --nf-fs-quote: clamp(1.125rem, 1.081rem + 0.1878vw, 1.25rem); --nf-lh-quote: 1.2; --nf-track-quote: 0em; --nf-fs-section-name: clamp(1.125rem, 1.081rem + 0.1878vw, 1.25rem); --nf-lh-section-name: 1.4; --nf-track-section-name: 0em; --nf-fs-dropdown-link: clamp(1.125rem, 1.081rem + 0.1878vw, 1.25rem); --nf-lh-dropdown-link: 1.4; --nf-track-dropdown-link: 0em; --nf-fs-button: 1rem; --nf-lh-button: 1.0063; --nf-track-button: 0.0156em; --nf-fs-nav: clamp(1.0625rem, 1.0405rem + 0.0939vw, 1.125rem); --nf-lh-nav: 1.3333; --nf-track-nav: 0em; --nf-fs-author: 1rem; --nf-lh-author: 1.27; --nf-track-author: 0em; --nf-fs-label-base: 0.75rem; --nf-lh-label-base: 1.3333; --nf-track-label-base: 0.1em; --nf-fs-label-category: 0.6875rem; --nf-lh-label-category: normal; /* was the invalid "auto" in the extraction */ --nf-track-label-category: 0.03em; /* ---------------------------------------------------------- SPACING — rem (px-named for predictability) ---------------------------------------------------------- */ --nf-space-4: 0.25rem; --nf-space-8: 0.5rem; --nf-space-12: 0.75rem; --nf-space-16: 1rem; --nf-space-20: 1.25rem; --nf-space-24: 1.5rem; --nf-space-32: 2rem; --nf-space-36: 2.25rem; --nf-space-40: 2.5rem; --nf-space-48: 3rem; --nf-space-64: 4rem; --nf-space-80: 5rem; --nf-space-112: 7rem; /* kept from v1.1; Figma export stops at 80 */ /* ---------------------------------------------------------- BORDER WIDTH — px (hairlines shouldn't sub-pixel scale) Named -bw- to avoid colliding with the --nf-border-* colors. ---------------------------------------------------------- */ --nf-bw-thin: 1px; --nf-bw-medium: 2px; --nf-bw-thick: 4px; /* ---------------------------------------------------------- LAYOUT / GRID ---------------------------------------------------------- */ --nf-content-max: 1280px; /* GP container width (set in D2) */ --nf-page-max: 1440px; /* full-bleed sections out to here */ --nf-gutter: 2rem; /* 32px desktop */ --nf-gutter-mob: 1rem; /* 16px */ /* ---------------------------------------------------------- BORDER RADIUS ---------------------------------------------------------- */ --nf-radius-chip: 20px; --nf-radius-pill: 100px; --nf-radius-circle: 9999px; /* ---------------------------------------------------------- SHADOWS ---------------------------------------------------------- */ --nf-shadow-subtle: 0 1px 1.5px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.1); --nf-shadow-elevated: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); } /* --- Global surfaces bound to tokens --- */ html body { background-color: var(--nf-surface-warm); color: var(--nf-color-text-primary); } /* === Components === */ /* =========================================================================== Theme toggle (dark-mode switch) — generatemasina --------------------------------------------------------------------------- Colours reference the semantic token layer, so the button themes itself via html.dark-mode with no per-mode colour overrides. The .dark-mode rules that remain control icon visibility/transform only (not colour). Placement: child-theme component stylesheet (load order is irrelevant for the var() definitions — custom properties resolve at compute time). =========================================================================== */ .theme-toggle { position: relative; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 1px solid var(--nf-color-text-primary); border-radius: 50%; background: var(--nf-surface-page); color: var(--nf-color-text-primary); cursor: pointer; overflow: hidden; transition: background-color 0.4s, color 0.4s, border-color 0.4s, box-shadow 0.4s; } .theme-toggle:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); transform: scale(1.05); } .theme-toggle:active { transform: scale(0.95); } .theme-toggle:focus-visible { outline: 2px solid var(--nf-color-text-primary); outline-offset: 2px; } /* Icon containers */ .theme-icon { position: absolute; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; transition: opacity 0.25s ease, transform 0.25s ease; } .theme-icon svg { width: 28px; height: 28px; } /* Action-oriented swap: moon visible in light mode, sun visible in dark mode. Visibility/transform only — keyed off .dark-mode, not colour. (SVGs use currentColor, so they inherit the button's text-primary token.) */ .theme-icon-moon { opacity: 1; transform: rotate(0deg) scale(1); } .theme-icon-sun { opacity: 0; transform: rotate(-30deg) scale(0.8); } .dark-mode .theme-icon-sun { opacity: 1; transform: rotate(0deg) scale(1); } .dark-mode .theme-icon-moon { opacity: 0; transform: rotate(30deg) scale(0.8); } /* ============================================================ DARK THEME — html.dark-mode (nf class switch) Flips semantic surface / text / border / brand tokens. Only tokens that differ from :root are redeclared. Namespace translated --color-* → --nf-*; surface-card → surface-pure-white. ============================================================ */ html.dark-mode { /* Surface */ --nf-surface-page: #1a1a1a; --nf-surface-warm: #2f2717; --nf-surface-pure-white: #1a1a1a; /* designer surface-card */ --nf-surface-placeholder: #727272; --nf-surface-input: #262626; /* INTERIM — no designer dark value */ /* Text */ --nf-color-text-primary: #d5d2d2; --nf-color-text-heading: #d5d2d2; --nf-color-text-secondary: #727272; --nf-color-text-inverse: #b8b8b8; --nf-color-text-caption: #8a8a8a; /* INTERIM — no designer dark value */ /* text-muted #868686 unchanged — fixed across modes */ /* Border */ --nf-border-default: #595959; --nf-border-medium: #665e5e; --nf-border-dark: #333333; --nf-border-soft: #4a4a4a; /* INTERIM — no designer dark value */ /* Brand — primary + blue-accent fixed; soft + deep flip per designer */ --nf-color-brand-blue-soft: #3eb8e8; --nf-color-brand-blue-deep: #1a1a1a; /* Accent reds — NO designer dark values. Left at light until confirmed; notices render light until then. Proposed (confirm w/ designer): --nf-accent-red-soft: #2a1515; --nf-accent-red-border: #4a2020; --nf-accent-red-strong: #f87171; */ } /* --- INTERIM dark-mode text binding (replace with unscoped globals next session) --- */ html.dark-mode body, html.dark-mode p, html.dark-mode li, html.dark-mode .entry-content { color: var(--nf-color-text-primary); } html.dark-mode h1, html.dark-mode h2, html.dark-mode h3, html.dark-mode h4, html.dark-mode h5, html.dark-mode h6, html.dark-mode .entry-title, html.dark-mode .entry-title a { color: var(--nf-color-text-heading); } html.dark-mode a { color: var(--nf-color-brand-blue-soft); }