/* * tokens.css — Toro Legal Marketing * * Status: LOCKED * Locked: 2026-05-01 (initial) * Re-locked: 2026-05-01 — patched --font-sans family name to match * Adobe Typekit's `proxima-nova` (lowercase + hyphen). * Re-locked: 2026-05-18 — added --shadow-button-hover for primary * button hover lift. * Re-locked: 2026-05-19 — mobile-standards pass: aligned --color-cream * to Figma mobile (#F6F6F1), added --space-2xs / --space-xs * sub-tokens, --shadow-lg for floating surfaces, and * --color-bg-darker promoted from 3 module hardcodes. * Re-locked: 2026-05-20 — added --color-pink-stop, promoted from the * #FF007C literal on the packages featured-card outline + * ring. Shares the value with --gradient-accent's start * stop; use this token for any solid-colour pink accent. * Re-locked: 2026-05-20 — added the --color-navy-* opacity scale * (muted / subtle / faint / divider / tint). Collapses 11 * ad-hoc rgba(9,22,59,X) literals from the blog build into * 5 role-named steps. * Re-locked: 2026-05-20 — added --radius-xl (24px) for the blog * related card. Extends the sm/md/lg radius ladder. * Re-locked: 2026-05-20 — added --text-h4 (32) + --text-h4-mobile * (28) for card titles; previously borrowed h2-mobile. * Re-locked: 2026-06-04 — spacing/type audit: added --text-xs (13px) * for form helper/validation + chip captions, and * --leading-none (1) for single-glyph numeric displays. * Both promote orphaned literals that had no token home. * * Built incrementally from 13 Figma frames covering the full * homepage at desktop and mobile widths. See tokens-preview.html * (build-context/) for a visual reference and the full history of * naming decisions, drift, and resolved conflicts. * * This file is the single source of truth for the build. Do NOT * edit during module construction. If a Figma value doesn't map * to a token here, the build skill flags it rather than inventing * one. To extend the token set, unlock and re-run tlm-token-builder. * * Known deferred work (unlock when needed): * - Form input tokens (border, focus ring, error state) — no * contact form in the design yet. * - Danger / error state colour scale — only warning captured. * - Tablet breakpoint refinement — using industry defaults. */ :root { /* ============================================ * COLOUR * ============================================ */ /* Brand */ --color-navy: #09163B; --color-pink-stop: #FF007C; /* accent pink — featured-card outline/ring; matches --gradient-accent start stop */ /* Navy at reduced opacity — semantic scale, named by role, not number. Collapses 11 ad-hoc rgba(9,22,59,X) literals from the blog build into 5 steps. Use these for text/icons/rules ON LIGHT surfaces. */ --color-navy-muted: rgba(9, 22, 59, 0.80); /* body prose, pull-quotes, slightly-down text */ --color-navy-subtle: rgba(9, 22, 59, 0.60); /* meta text — captions, breadcrumbs, read-time */ --color-navy-faint: rgba(9, 22, 59, 0.35); /* placeholder icons / abstract art */ --color-navy-divider: rgba(9, 22, 59, 0.15); /* hairline rules */ --color-navy-tint: rgba(9, 22, 59, 0.08); /* placeholder fill blocks / faint tint surfaces */ --color-navy-wash: rgba(9, 22, 59, 0.04); /* lightest section-background wash */ /* Neutrals */ --color-white: #FFFFFF; --color-cream: #F6F6F1; /* aligned to Figma mobile section bg (was #F9F8F4) */ --color-grey-100: #E7E7DD; /* warm-tinted neutral (Figma var "Dark Gray") — active-tab pill bg */ --color-grey-200: #EAECF0; /* card borders, dividers (Figma var Gray/200) */ --color-grey-300: #D0D5DD; /* form lines, checkbox borders (Figma var Gray/300) */ --color-bg-darker: #191315; /* deepest surface — approach, footer, mega menu */ /* Semantic aliases */ --color-bg-dark: var(--color-navy); --color-bg-soft: var(--color-cream); --color-text-on-dark: var(--color-white); --color-text-on-light: var(--color-navy); --color-text-on-dark-muted: rgba(255, 255, 255, 0.9); --color-border-on-dark: var(--color-white); --color-border-card: rgba(9, 22, 59, 0.24); /* States */ --color-success-50: #ECFDF3; --color-success-500: #12B76A; --color-success-700: #027A48; --color-warning-50: #FFFAEB; --color-warning-700: #B54708; --color-info-50: #EFF8FF; /* Figma var Blue/50, normalised to "info" */ --color-info-700: #175CD3; /* Figma var Blue/700, normalised to "info" */ /* ============================================ * GRADIENT * ============================================ */ --gradient-accent: linear-gradient(-90deg, #FF007C, #FF9239); /* heading word accent */ /* ============================================ * SPACING * ============================================ * * 4px-base scale. Every value is a multiple of 4. * * Button vertical paddings (10px, 18px) are NOT in this * scale — they're button-component values, applied inline * at the component level. */ --space-2xs: 4px; /* sub-token: tight icon/text gaps (navbar link → chevron) */ --space-xs: 8px; /* sub-token: footer column gaps, small inline gaps */ --space-sm: 16px; /* label → body gap inside a stack */ --space-md: 24px; /* paragraph stack, sub-block gap */ --space-lg: 32px; /* nav gap, content gap */ --space-xl: 48px; /* primary button horizontal padding */ --space-2xl: 60px; /* body section padding-bottom (asymmetric layouts) */ --space-3xl: 72px; /* body section column gap */ --space-4xl: 80px; /* section horizontal padding; hero vertical pad */ --space-5xl: 120px; /* body section padding-top */ /* Semantic aliases */ --space-section: var(--space-4xl); /* full-width section horizontal padding (desktop) */ --space-section-x-mobile: 24px; /* full-width section horizontal padding (mobile) */ --space-section-y-mobile: 40px; /* full-width section vertical padding (mobile) — tighter stacked rhythm; desktop overrides per-module to 120 */ /* ============================================ * TYPOGRAPHY * ============================================ */ /* Font families */ --font-serif: 'Halant', Georgia, serif; --font-sans: 'proxima-nova', system-ui, sans-serif; /* Font sizes */ --text-xs: 0.8125rem; /* 13px — form helper/validation text, eyebrow/chip captions (added 2026-06-04, spacing-type audit) */ --text-sm: 0.875rem; /* 14px — secondary button label, eyebrow labels */ --text-base: 1rem; /* 16px — nav links */ --text-lg: 1.125rem; /* 18px — primary button label, body copy (Proxima Nova), pull-quotes (Halant) */ --text-xl: 1.25rem; /* 20px — hero body copy */ --text-2xl: 1.5rem; /* 24px — small headings (testimonial name caption) */ --text-h4: 2rem; /* 32px — card titles (packages tier card, h4 level) */ --text-h3: 2.5rem; /* 40px — service-row headings (h3, per Figma var 'H3') */ --text-quote: 2.75rem; /* 44px — Halant blockquote */ --text-h2: 3.5rem; /* 56px — body section headings (h2) */ --text-display: 4.5rem; /* 72px — hero heading */ --text-h1: var(--text-display); /* semantic alias for HTML h1 */ /* Mobile sizes (per Figma 'Mobile/*' variables) */ --text-h1-mobile: 2.75rem; /* 44px — mobile hero heading */ --text-h2-mobile: 2rem; /* 32px — mobile body section headings */ --text-h3-mobile: 1.75rem; /* 28px — mobile service-row / sub-section headings */ --text-h4-mobile: 1.75rem; /* 28px — mobile card titles (h4 level); same px as h3-mobile */ --text-h5-mobile: 1.25rem; /* 20px — mobile name captions / small headings (Mobile/H5) — same size as --text-xl */ /* Line heights */ --leading-none: 1; /* single-glyph displays — step numbers, price prefixes, stat figures, breadcrumb separators (added 2026-06-04, spacing-type audit) */ --leading-tight: 1.25; /* h2 (56px) and h3 (40px) */ --leading-snug: 1.3; /* h1 (72px display) */ --leading-normal: 1.5; /* nav links, button labels */ --leading-relaxed: 1.6; /* body copy */ /* Letter spacing (em-based so it scales with font size) */ --tracking-display: -0.03em; /* hero heading (-2.16px on 72px) */ --tracking-tight: -0.01em; /* hero body (-0.2px on 20px) */ --tracking-button: 0.1em; /* uppercase button labels (1.4px/14px = 1.8px/18px) */ /* Font weights */ --weight-regular: 400; --weight-semibold: 600; --weight-bold: 700; /* ============================================ * RADIUS * ============================================ */ --radius-sm: 8px; /* inputs */ --radius-md: 10px; /* cards */ --radius-lg: 16px; /* large surfaces (e.g. section graphic container) */ --radius-xl: 24px; /* extra-large cards — blog related card */ --radius-pill: 999px; /* covers both buttons (40px and 50px in design — both pills) */ /* ============================================ * SHADOW * ============================================ */ --shadow-sm: 0 1px 2px 0 rgba(16, 24, 40, 0.05); /* inputs, nav bar (per Figma 'Shadow/xs' variable) */ --shadow-card: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.10); /* card surfaces (per Figma 'Card shadow' variable) */ --shadow-lg: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03); /* floating surfaces — mega menu, testimonial card (per Figma 'Shadow/lg') */ --shadow-button-hover: 0 6px 16px 0 rgba(0, 0, 0, 0.18); /* primary button hover lift */ /* ============================================ * LAYOUT * ============================================ */ --container-max: 1440px; --container-padding: 80px; /* Breakpoints */ --breakpoint-tablet: 768px; --breakpoint-desktop: 1024px; --breakpoint-wide: 1440px; }