/* File: assets/css/tokens.css */ /* Design tokens — single source of truth. Do not redefine :root elsewhere. * * Direction: MONOCHROME + SIGNAL (SAIT13-CALLELLO-PALETTE-20260903). * Surfaces and type are achromatic; exactly one saturated colour — the signal — * and it is reserved for interactive things: buttons, links, focus, active state. * Nothing decorative and no plain text is allowed to use it. That rule is what * makes contrast failures structurally impossible rather than merely fixed once. * * The grey scale and the signal red are NOT invented here: they are the fleet * standard primitives from iz-std/front-design-system/tokens.css, reused so this * root shares a lineage with the rest of the fleet. Radius, elevation and type * differ from that standard on purpose — see the RADIUS and ELEVATION notes. */ :root{ /* ─── Primitives — fleet standard scale (iz-std/front-design-system) ─────── */ --p-white: #ffffff; --p-black: #0f0f10; --p-gray-50: #fafafa; --p-gray-100: #f4f4f5; --p-gray-200: #e4e4e7; --p-gray-300: #d4d4d8; --p-gray-400: #a1a1aa; --p-gray-500: #71717a; --p-gray-600: #52525b; --p-gray-700: #3f3f46; --p-gray-800: #27272a; --p-gray-900: #18181b; --p-red-500: #b0122a; /* signal */ --p-red-600: #8f0f22; /* signal hover */ --p-red-700: #6f0c1a; /* signal active */ --p-red-200: #d4d4d8; /* signal is unreadable on ink (2.71) — on dark blocks the neutral takes its place. Named as a red slot so the intent stays visible at the call site. */ --p-success-600: #1f7a3a; --p-warning-600: #b7791f; /* ─── Legacy --ga-* names, remapped onto the monochrome scale ──────────── * Kept defined because dropping a name silently resolves it to `initial` * wherever it is still referenced. The donor hues are gone; the names are not. */ --ga-blue: var(--p-black); --ga-blue-600: var(--p-gray-800); --ga-blue-700: var(--p-gray-900); --ga-night: var(--p-black); --ga-night-2: var(--p-gray-800); --ga-red: var(--p-red-500); --ga-red-600: var(--p-red-600); --ga-red-700: var(--p-red-700); --ga-violet: var(--p-gray-600); --ga-violet-2: var(--p-gray-700); --ga-silver: var(--p-gray-300); --ga-silver-2: var(--p-gray-200); --ga-silver-3: var(--p-gray-100); /* ─── Typography ───────────────────────────────────────────────────────── * Both families are self-hosted in assets/fonts/ and declared in * assets/css/fonts.css. Antonio is the condensed display face; the direction * asked for Archivo Condensed, which exists nowhere in the fleet, and Antonio * was already this theme's own second choice and is present on the host. */ --dag-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --dag-font-display: "Antonio", "Inter", system-ui, sans-serif; --dag-font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --dag-lh: 1.6; /* ─── Layout ─────────────────────────────────────────────────────────────── */ --dag-container: 1200px; --dag-gutter: 18px; --dag-gutter-lg: 26px; --dag-section: 72px; --dag-header-h: 72px; /* ─── Core palette ───────────────────────────────────────────────────────── */ --dag-bg: var(--p-white); --dag-surface: var(--p-white); --dag-surface-2: var(--p-gray-100); --dag-surface-3: var(--p-gray-200); --dag-text: var(--p-black); --dag-text-2: var(--p-gray-800); --dag-muted: var(--p-gray-600); --dag-muted-2: var(--p-gray-500); /* was #8795AB at 3.04 — below AA for text */ --dag-border: var(--p-gray-300); /* decorative divider */ --dag-border-strong: var(--p-gray-500); /* control boundary — 4.83, clears the 3:1 of WCAG 1.4.11 that #CBD5E1 did not */ /* ─── Brand tokens (semantic) ──────────────────────────────────────────── * primary = the signal. It lands on buttons, links and focus rings only. * secondary = ink. This token carries TWO roles at once — it is the colour of * the brand name on the white header AND the background of the footer and of * .section--brand. Ink is the only value that is correct in both (19.16 either * way); a light grey would have made the header brand name invisible. */ --dag-primary: var(--p-red-500); --dag-primary-hover: var(--p-red-600); --dag-primary-active: var(--p-red-700); --dag-primary-contrast: var(--p-white); --dag-secondary: var(--p-black); --dag-secondary-hover: var(--p-gray-800); --dag-secondary-contrast: var(--p-white); --dag-accent: var(--p-red-500); --dag-accent-hover: var(--p-red-600); --dag-accent-active: var(--p-red-700); --dag-accent-contrast: var(--p-white); --dag-accent-on-dark: var(--p-red-200); /* accent sitting on --dag-sec-dark */ --dag-hint: var(--p-gray-600); --dag-hint-hover: var(--p-gray-700); --dag-hint-contrast: var(--p-white); --dag-link: var(--p-red-500); --dag-link-hover: var(--p-red-600); /* ─── Status ─────────────────────────────────────────────────────────────── */ --dag-success: var(--p-success-600); --dag-warning: var(--p-warning-600); --dag-danger: var(--p-red-500); --dag-info: var(--p-gray-700); /* ─── Radius ───────────────────────────────────────────────────────────── * Deliberately sharp. The fleet standard uses 12/16/20px; this direction is * editorial and squares everything off. Values are near-zero, not zero, so * that overflow clipping and focus rings still round by a hair. */ --dag-radius-xs: 0; --dag-radius-sm: 0; --dag-radius-md: 2px; --dag-radius-lg: 2px; --dag-radius-xl: 2px; --dag-radius-pill: 2px; --dag-radius: var(--dag-radius-md); /* ─── Elevation ────────────────────────────────────────────────────────── * There are no shadows in this direction: structure is carried by 1px rules. * The shadow tokens are kept and defined as inset hairlines rather than * removed, because `box-shadow: var(--dag-shadow-sm)` appears in files this * ticket does not open, and an undefined token there would drop the rule. */ --dag-shadow-xs: inset 0 0 0 1px var(--p-gray-200); --dag-shadow-sm: inset 0 0 0 1px var(--p-gray-200); --dag-shadow-md: inset 0 0 0 1px var(--p-gray-300); --dag-shadow-lg: inset 0 0 0 1px var(--p-gray-400); /* ─── Spacing ────────────────────────────────────────────────────────────── */ --dag-gap-xs: 6px; --dag-gap-sm: 12px; --dag-gap: 16px; --dag-gap-lg: 24px; --dag-gap-xl: 32px; --dag-gap-2xl: 48px; /* ─── Interaction ────────────────────────────────────────────────────────── */ --dag-ring-color: rgba(176,18,42,.32); --dag-ring: 0 0 0 3px var(--dag-ring-color); --dag-transition: 160ms cubic-bezier(.2,.8,.2,1); /* ─── Motion ─────────────────────────────────────────────────────────────── */ --anim-fast: 150ms; --anim-med: 220ms; --anim-slow: 420ms; --ease-out: cubic-bezier(.2,.8,.2,1); --ease-spring: cubic-bezier(.2,1,.2,1); /* ─── Misc ───────────────────────────────────────────────────────────────── */ --dag-max-prose: 72ch; /* ─── Layout: split header ───────────────────────────────────────────────── */ --dag-topbar-h: 36px; --dag-topbar-bg: var(--p-black); --dag-topbar-fg: var(--p-white); --dag-topbar-muted: rgba(255,255,255,.70); /* ─── Section backgrounds (alternation) ──────────────────────────────────── */ --dag-sec-white: var(--p-white); --dag-sec-soft: var(--p-gray-100); --dag-sec-dark: var(--p-black); --dag-sec-dark-fg: var(--p-white); /* ═══ nt-* bridge ════════════════════════════════════════════════════════ * assets/css/nt-features.css shipped its own independent palette (navy * #1D2951, red #B22234, cream #F8F5EF) that no --dag-* token could reach, so a * repaint here would have left the testimonials block on the old scheme. The * names are re-pointed at this system. The literal fallbacks inside that file * (var(--nt-navy, #1D2951)) are now unreachable, and are removed there. */ --nt-navy: var(--p-black); --nt-navy-600: var(--p-gray-800); --nt-red: var(--p-red-500); --nt-red-600: var(--p-red-600); --nt-cream: var(--p-gray-50); --nt-silver: var(--p-gray-300); --nt-silver-2: var(--p-gray-200); --nt-silver-3: var(--p-gray-100); --nt-ink: var(--p-black); --nt-ink-2: var(--p-gray-800); --nt-muted: var(--p-gray-600); /* ═══ Back-compat aliases (keep existing CSS stable) ═══ */ --bg: var(--dag-bg); --surface: var(--dag-surface); --surface-2: var(--dag-surface-2); --surface-raised: var(--dag-surface); --text: var(--dag-text); --muted: var(--dag-muted); --line: var(--dag-border); --border: var(--dag-border); --border-strong: var(--dag-border-strong); --primary: var(--dag-primary); --primary-600: var(--dag-primary-hover); --primary-700: var(--dag-primary-active); --primary-contrast: var(--dag-primary-contrast); --secondary: var(--dag-secondary); --accent: var(--dag-accent); --accent-2: var(--dag-secondary); --brand: var(--dag-secondary); --brand-2: var(--dag-primary); --success: var(--dag-success); --warning: var(--dag-warning); --danger: var(--dag-danger); --error: var(--dag-danger); --info: var(--dag-info); --radius: var(--dag-radius); --radius-sm: var(--dag-radius-sm); --radius-md: var(--dag-radius-md); --radius-lg: var(--dag-radius-lg); --radius-card: var(--dag-radius-md); --radius-chip: var(--dag-radius-pill); --radius-control: var(--dag-radius-sm); --shadow: var(--dag-shadow-md); --shadow-soft: var(--dag-shadow-sm); --shadow-card: var(--dag-shadow-sm); --shadow-card-hover: var(--dag-shadow-md); --container: var(--dag-container); --gutter: var(--dag-gutter); --pad: var(--dag-gap); --ring: var(--dag-ring-color); /* Pagination (inherits brand) */ --pagi-accent-rgb: 176, 18, 42; --pagi-h: 40px; --pagi-gap: 8px; --pagi-radius: 2px; --pagi-accent: var(--dag-primary); --pagi-bg: var(--dag-surface); --pagi-bg-hover: var(--p-gray-100); --pagi-text: var(--dag-text); --pagi-muted: var(--dag-muted); --pagi-border: var(--dag-border); --pagi-shadow: var(--dag-shadow-sm); --pagi-glow: none; --pagi-ring: 0 0 0 3px var(--dag-ring-color); /* Inventory legacy (--cyp-*) mapped to brand */ --cyp-green: var(--dag-primary); --cyp-green-2: var(--p-gray-100); --cyp-text: var(--dag-text); --cyp-muted: var(--dag-muted); --cyp-bg: var(--dag-bg); --cyp-soft: var(--dag-surface-2); --cyp-border: var(--dag-border); --cyp-shadow: var(--dag-shadow-sm); --cyp-radius: 2px; --cyp-radius-sm: 2px; --cyp-container: var(--dag-container); --cyp-t: 220ms; } /* ─── Dark contexts — NOT solved by an ancestor-scoped token remap ─────────── * An earlier pass here redefined --dag-accent (and --dag-primary for ghost * buttons) inside every selector that paints itself with ink. It was reverted: * a token set on an ancestor cascades to the WHOLE subtree, and several of these * dark blocks contain white cards. On /terms-conditions/, /refund-policy/ and * /shipping/ that turned red text on a white card into #d4d4d8 on white — 1.48, * worse than the 2.71 it was meant to fix. * * Signal-on-ink is therefore fixed at the rules that actually place it there. * They are marked with this ticket id in layout.css, home.css and buttons.css. * --dag-accent-on-dark above is the value those rules use. */ @media (max-width: 900px){ :root{ --dag-section: 48px; --dag-gutter-lg: 18px; --dag-header-h: 72px; } } @media (max-width: 600px){ :root{ --dag-section: 36px; --dag-gutter: 14px; --pagi-h: 36px; --pagi-gap: 6px; --pagi-radius: 2px; } }