/* ============================================================
DESIGN TOKENS — the single source of cohesion.
Change a value here and it ripples through every section.
SEEDED FROM: 3-Design/1--Mockups/1--Style_Tile/tile.html (the gaveled
Gate-1a tile) + 3-Design/DESIGN.md machine-readable token block.
The tile's :root custom properties ARE this file's swap surface —
byte-faithful: base #222222 exact · Signal Red #C2231B · 0px radius ·
the Big Shoulders / IBM Plex Sans / IBM Plex Mono stack.
This file has TWO regions:
1) EDIT PER CLIENT — the entire re-skin surface (palette hexes +
font vars + corner radius). Touch ONLY this.
2) STRUCTURAL — type scale, spacing, layout, motion.
These encode proportion/rhythm/feel, NOT brand. FROZEN.
============================================================ */
:root {
/* ╔══════════════════════════════════════════════════════════╗
║ ===== EDIT PER CLIENT ===== ║
║ The swap surface. This block + the Google Fonts ║
║ in index.html + the images in assets/ = the whole skin. ║
╚══════════════════════════════════════════════════════════╝ */
/* — CANONICAL BRAND TOKENS (DESIGN.md / tile machine-readable block,
VERBATIM) — the named palette every cell references directly. */
--base: #222222; /* Shop-Floor Charcoal — THEIR shipped field, exact (pixel receipt) */
--accent: #C2231B; /* Signal Red — ONE red, no near-twins */
--breath: #E9E6E1; /* Primer Gray — light-section field */
--support: #B7BCC1; /* Polished Steel — hairlines, captions */
--ink-deep: #141414; /* seam-end black, neutral like the base family, never a field */
/* — PALETTE SLOTS (the starter's rhythm-engine vocabulary, re-pointed to
the brand above so base.css .section[data-bg=…] re-skins). */
/* Brand base: the dominant dark canvas (deepest → seams). Neutral gray —
theirs is deliberately NOT warm-tinted (DESIGN.md: owner-shipped pixels). */
--ink-900: #222222; /* Shop-Floor Charcoal — primary dark canvas */
--ink-850: #1d1d1d; /* subtle internal shift within a dark run */
--ink-800: #2c2c2c; /* raised dark surfaces / cards (tile border family) */
--ink-700: #3a3a3a; /* dark seams / borders on dark (tile hairline #3a3a3a) */
--slate-600: #444444; /* tile input border */
--slate-500: #6f6f6f; /* tile placeholder text */
--slate-400: #B7BCC1; /* Polished Steel — muted text on dark */
--slate-300: #d0d0ce; /* tile body-on-dark */
/* Light "breath" surfaces: Primer Gray field. */
--marble-50: #E9E6E1; /* Primer Gray — primary light breath surface */
--marble-100: #d8d4cd;
--cream: #E9E6E1; /* secondary light surface (same primer field) */
--stone-200: #c9c4bc; /* light borders (tile breath-panel rule) */
--stone-500: #6b665f; /* muted text on light (tile breath eyebrow) */
--stone-700: #26221e; /* body text on light (tile breath dark) */
/* ACCENT — the regrip / action colour. The 1-variable brand swap.
base · stamped-plate shadow (deep) · tint · translucent wash. */
--terracotta: #C2231B; /* Signal Red — ONE red, no near-twins */
--terracotta-deep: #7d140e; /* stamped-plate press shadow (tile box-shadow) */
--terracotta-soft: #d35a53; /* tints */
--terracotta-tint: rgba(194, 35, 27, 0.12);
/* — FONTS — Big Shoulders (display, condensed industrial gothic) +
IBM Plex Sans (body) + IBM Plex Mono (eyebrows / spec labels).
Mirror the Google Fonts in index.html's . */
--font-display: 'Big Shoulders', 'Big Shoulders Display', 'Archivo Narrow', sans-serif;
--font-display-alt-1: 'Big Shoulders Display', 'Archivo Narrow', sans-serif;
--font-display-alt-2: 'Big Shoulders', 'Archivo Narrow', sans-serif;
--font-body: 'IBM Plex Sans', sans-serif;
--font-mono: 'IBM Plex Mono', monospace;
/* — TYPE RAMP — exactly 3 sizes: hero / section / mini (DESIGN.md). */
--step-hero: clamp(3rem, 7.5vw, 5.75rem);
--step-section: clamp(1.85rem, 4vw, 2.9rem);
--step-mini: clamp(1.05rem, 1.4vw, 1.2rem);
/* — CORNER RADIUS — 0px: machined edge everywhere; buttons/chips read as
stamped steel plates (DESIGN.md, a decision with a because-clause). */
--radius: 0px;
/* ╔══════════════════════════════════════════════════════════╗
║ ===== END PER CLIENT — everything below is STRUCTURAL === ║
╚══════════════════════════════════════════════════════════╝ */
/* ╔══════════════════════════════════════════════════════════╗
║ ===== STRUCTURAL — DO NOT EDIT ===== ║
║ Type scale, spacing, layout, motion. Proportion/rhythm/ ║
║ feel — brand-agnostic. Copy verbatim across every site. ║
╚══════════════════════════════════════════════════════════╝ */
/* — Semantic text aliases — STRUCTURAL aliases that POINT AT the
per-client palette above. The aliases are frozen; their targets
re-skin automatically when you edit the palette. Don't rename. */
--font-sans: var(--font-body);
--text-on-dark: var(--marble-50); /* Primer Gray body on charcoal ≫ 4.5:1 */
--text-on-dark-muted: var(--slate-400);
--text-on-light: var(--stone-700);
--text-on-light-muted: var(--stone-500);
/* — Fluid type scale — clamp(min, fluid, max). The typographic rhythm. */
--step--1: clamp(0.78rem, 0.74rem + 0.18vw, 0.875rem);
--step-0: clamp(0.98rem, 0.94rem + 0.22vw, 1.08rem); /* body */
--step-1: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
--step-2: clamp(1.45rem, 1.2rem + 1.1vw, 2.05rem);
--step-3: clamp(1.95rem, 1.5rem + 2.1vw, 3.1rem);
--step-4: clamp(2.5rem, 1.85rem + 3.1vw, 4.4rem);
--step-5: clamp(3.1rem, 2rem + 5.4vw, 6.25rem); /* hero display */
--tracking-label: 0.2em; /* uppercase eyebrows / labels */
--leading-display: 0.98;
--leading-body: 1.62;
/* — Spacing (fluid rhythm) — */
--space-2xs: clamp(0.35rem, 0.3rem + 0.2vw, 0.5rem);
--space-xs: clamp(0.5rem, 0.42rem + 0.3vw, 0.75rem);
--space-s: clamp(0.85rem, 0.7rem + 0.5vw, 1.15rem);
--space-m: clamp(1.25rem, 1rem + 1vw, 1.85rem);
--space-l: clamp(2rem, 1.5rem + 2vw, 3.25rem);
--space-xl: clamp(3rem, 2rem + 4vw, 5.5rem);
--section-pad-y: clamp(4.5rem, 3rem + 7vw, 9rem); /* section vertical breathing */
--gutter: clamp(1.25rem, 0.6rem + 3.2vw, 4rem); /* page side padding */
--measure: 64ch; /* readable line length */
--maxw: 1280px;
--maxw-wide: 1560px;
/* — Motion — brand-agnostic timing/easing. */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-inout: cubic-bezier(0.76, 0, 0.24, 1);
--dur-fast: 0.35s;
--dur: 0.6s;
--dur-slow: 1s;
/* — Misc structural — */
--hairline: rgba(255, 255, 255, 0.12);
--hairline-strong: rgba(255, 255, 255, 0.22);
--hairline-dark: rgba(0, 0, 0, 0.12);
--nav-h: 4.75rem;
}