/* ============================================================================ BestAutoService — design tokens Single source of truth, derived from bestautoservice.pen. Three layers, in dependency order: 1. PRIMITIVES --bas-p-* raw values, no meaning attached 2. SEMANTIC --bas-* purpose aliases (stable names used by components) 3. COMPONENT --bas-c-* per-component overrides Palette values are a 1:1 copy of the .pen variables (accent-primary, surface-secondary, dark-2, line, success, danger, ...). Do not invent hexes here — if the design changes, change the .pen first. ========================================================================= */ :root { /* ========================================================================== LAYER 1 — PRIMITIVES ========================================================================== */ /* --- Palette: brand + status (.pen variables) --- */ --bas-p-accent: #FF5A2B; /* accent-primary */ --bas-p-accent-2: #FFEB3B; /* accent-secondary */ --bas-p-info: #57C7FF; /* exhaust section */ --bas-p-success: #1A9E4B; /* success */ --bas-p-danger: #C0392B; /* danger */ /* --- Palette: neutrals (.pen variables) --- */ --bas-p-dark: #141414; /* dark */ --bas-p-dark-2: #1E1E1E; /* dark-2 */ --bas-p-line: #E5E5E5; /* line */ --bas-p-surface-1: #FFFFFF; /* surface-primary */ --bas-p-surface-2: #F5F5F5; /* surface-secondary */ --bas-p-surface-3: #EEEEEE; /* surface-tertiary */ --bas-p-fg-1: #111111; /* foreground-primary */ --bas-p-fg-2: #4A4A4A; /* foreground-secondary */ /* --- Palette: derived alphas & ramps --- Not .pen variables — built from the primitives above. Every consumer that needs "the same colour, less opaque" points at these. */ --bas-p-accent-ink: #C2410C; /* accent for small text on light surfaces — 5.18:1 on #FFF, 4.75:1 on #F5F5F5 — passes WCAG AA. Darkened from the brand orange (#FF5A2B, 3.11:1) for small text only. */ --bas-p-fg-muted: #8A8A8A; /* tertiary text on light */ --bas-p-fg-muted-strong: #6F6F6F; /* same role on white/#F5F5F5, 4.65:1+ */ --bas-p-line-dark: #2C2C2C; /* hairline on dark surfaces */ --bas-p-white-65: rgb(255 255 255 / 0.65); --bas-p-white-75: rgb(255 255 255 / 0.75); --bas-p-white-80: rgb(255 255 255 / 0.80); --bas-p-white-90: rgb(255 255 255 / 0.90); --bas-p-white-18: rgb(255 255 255 / 0.18); /* glass hairline */ --bas-p-white-12: rgb(255 255 255 / 0.12); /* pill hover */ --bas-p-white-22: rgb(255 255 255 / 0.22); /* marquee sheen */ --bas-p-black-50: rgb(20 20 20 / 0.50); /* glass fill */ --bas-p-info-50: rgb(87 199 255 / 0.50); /* exhaust wash */ /* --- Type: families (self-hosted, full Cyrillic — see fonts/fonts.css) --- */ --bas-p-font-heading: 'Oswald', 'Arial Narrow', sans-serif; --bas-p-font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --bas-p-font-cap: 'IBM Plex Mono', 'Courier New', monospace; /* --- Type: size scale (px values straight from the .pen text nodes) --- */ --bas-p-fs-12: 12px; /* crumbs, topbar, footer cap, gallery cap */ --bas-p-fs-13: 13px; /* eyebrow, footer links, card subtitle */ --bas-p-fs-14: 14px; /* step description, partner text */ --bas-p-fs-15: 15px; /* body copy, nav links, checklist items */ --bas-p-fs-16: 16px; /* base body, card titles */ --bas-p-fs-17: 17px; /* lead paragraph, step title, FAQ question */ --bas-p-fs-18: 18px; /* lead variant, "go" arrow icon */ --bas-p-fs-20: 20px; /* partner h3 */ --bas-p-fs-24: 24px; /* h3 */ --bas-p-fs-30: 30px; /* step number, hero stat */ --bas-p-fs-32: 32px; /* content h2, CTA title */ --bas-p-fs-38: 38px; /* section title @ tablet */ --bas-p-fs-44: 44px; /* contacts title */ --bas-p-fs-52: 52px; /* section title @ desktop */ --bas-p-fs-54: 54px; /* service page h1 */ --bas-p-fs-64: 64px; /* hero h1 (frame 17, Hero-V4 full-bleed) */ /* --- Type: line heights --- */ --bas-p-lh-display: 0.95; /* hero h1 */ --bas-p-lh-heading: 1.02; /* h1, h2 */ --bas-p-lh-tight: 1.3; /* card titles, h3 */ --bas-p-lh-body: 1.6; /* body copy */ /* --- Type: tracking --- */ --bas-p-ls-tight: 0.01em; /* headings */ --bas-p-ls-wide: 0.08em; /* eyebrow */ --bas-p-ls-wider: 0.1em; /* caps, marquee */ /* --- Space (4px base) --- */ --bas-p-space-4: 4px; --bas-p-space-8: 8px; --bas-p-space-10: 10px; --bas-p-space-12: 12px; --bas-p-space-14: 14px; --bas-p-space-16: 16px; --bas-p-space-20: 20px; --bas-p-space-24: 24px; --bas-p-space-28: 28px; --bas-p-space-32: 32px; --bas-p-space-48: 48px; /* --- Radii (all values present in the .pen) --- */ --bas-p-radius-sm: 4px; --bas-p-radius-lg: 10px; /* dropdown rows */ --bas-p-radius-xl: 16px; /* cards, related cards, images */ --bas-p-radius-2xl: 24px; /* hero glass */ --bas-p-radius-pill: 999px; /* buttons, badges */ /* --- Elevation --- */ --bas-p-shadow-md: 0 10px 28px rgb(0 0 0 / 0.35); /* glass, media note */ --bas-p-shadow-lg: 0 24px 40px rgb(0 0 0 / 0.12); /* dropdown */ /* --- Motion --- */ --bas-p-dur: 500ms; /* the design's single easing feel */ --bas-p-ease: ease; /* --- Z-index --- */ --bas-p-z-header: 100; --bas-p-z-dropdown: 200; --bas-p-z-skip: 1000; /* --- Layout --- */ --bas-p-container: 1328px; /* 1440 frame − 2×80 gutter = 1280 content */ --bas-p-gutter: 24px; --bas-p-header-h: 72px; /* ========================================================================== LAYER 2 — SEMANTIC Purpose aliases. These names are referenced by components, templates and functions.php — renaming one is a breaking change. ========================================================================== */ /* Color — accent */ --bas-accent: var(--bas-p-accent); --bas-accent-ink: var(--bas-p-accent-ink); --bas-accent-2: var(--bas-p-accent-2); --bas-info: var(--bas-p-info); --bas-success: var(--bas-p-success); --bas-danger: var(--bas-p-danger); /* Color — surfaces */ --bas-surface: var(--bas-p-surface-1); --bas-surface-2: var(--bas-p-surface-2); --bas-surface-3: var(--bas-p-surface-3); --bas-dark: var(--bas-p-dark); --bas-dark-2: var(--bas-p-dark-2); /* Color — text */ --bas-fg: var(--bas-p-fg-1); --bas-fg-2: var(--bas-p-fg-2); --bas-fg-inverse: var(--bas-p-surface-1); --bas-fg-muted: var(--bas-p-fg-muted); --bas-fg-muted-strong: var(--bas-p-fg-muted-strong); --bas-fg-inverse-soft: var(--bas-p-white-75); /* text on dark surfaces */ /* Color — lines */ --bas-line: var(--bas-p-line); --bas-line-dark: var(--bas-p-line-dark); /* Typography — families */ --bas-font-heading: var(--bas-p-font-heading); --bas-font-body: var(--bas-p-font-body); --bas-font-cap: var(--bas-p-font-cap); /* Typography — sizes --bas-fs-h1 is the hero h1; --bas-fs-h2 is the home section title. Headings inside a page body are their own steps and must not inherit the section sizes: the pen's service pages use 54px h1 and 32px h2. */ --bas-fs-h1: var(--bas-p-fs-64); --bas-fs-h1-content: var(--bas-p-fs-54); --bas-fs-h2: var(--bas-p-fs-52); --bas-fs-h2-content: var(--bas-p-fs-32); --bas-fs-h3: var(--bas-p-fs-24); --bas-fs-body: var(--bas-p-fs-16); --bas-fs-lead: var(--bas-p-fs-17); --bas-fs-small: var(--bas-p-fs-14); --bas-fs-caption: var(--bas-p-fs-13); --bas-fs-cap: var(--bas-p-fs-14); --bas-fs-crumbs: var(--bas-p-fs-12); --bas-fs-eyebrow: var(--bas-p-fs-13); /* Typography — line heights */ --bas-lh-display: var(--bas-p-lh-display); --bas-lh-heading: var(--bas-p-lh-heading); --bas-lh-body: var(--bas-p-lh-body); /* Layout */ --bas-container: var(--bas-p-container); --bas-gap: var(--bas-p-space-24); --bas-gutter: var(--bas-p-gutter); --bas-header-h: var(--bas-p-header-h); /* Radius */ --bas-radius-sm: var(--bas-p-radius-sm); --bas-radius: var(--bas-p-radius-xl); --bas-radius-pill: var(--bas-p-radius-pill); /* Motion */ --bas-dur: var(--bas-p-dur); --bas-ease: var(--bas-p-ease); --bas-transition: var(--bas-dur) var(--bas-ease); /* ========================================================================== LAYER 3 — COMPONENT Per-component overrides. Anything a component needs that the semantic layer does not already express belongs here, not as an inline value in CSS. ========================================================================== */ /* Button (.pen: Badge, Hero-V4 CTA — fully rounded, semibold) */ --bas-c-btn-padding-y: var(--bas-p-space-14); --bas-c-btn-padding-x: var(--bas-p-space-28); --bas-c-btn-radius: var(--bas-radius-pill); --bas-c-btn-fs: var(--bas-p-fs-15); /* Service card (.pen frame 02: Svc-card radius 6, padding 20, gap 10) */ --bas-c-card-radius: var(--bas-p-radius-xl); --bas-c-card-padding: var(--bas-p-space-20); --bas-c-card-gap: var(--bas-p-space-10); --bas-c-card-bg: var(--bas-surface-2); --bas-c-card-hover-bg: var(--bas-dark); /* Hero glass panel (.pen frame 02: Hero-card 16/20, radius 6) */ --bas-c-hero-glass-bg: var(--bas-p-black-50); --bas-c-hero-glass-border: var(--bas-p-white-18); --bas-c-hero-glass-radius: var(--bas-p-radius-2xl); /* Marquee / ticker (.pen frame 02: Ticker accent fill, inverse text) */ --bas-c-marquee-bg: var(--bas-accent); --bas-c-marquee-fg: var(--bas-p-surface-1); --bas-c-marquee-fs: var(--bas-p-fs-13); /* Service page strip (.pen frame 33: Checklist / Related fill_container [48,80]) */ --bas-c-strip-bg: var(--bas-surface-2); --bas-c-strip-padding-y: var(--bas-p-space-48); /* Dark CTA (.pen frame 33: CTA [48,80] dark, inverse title, accent-2 phones) */ --bas-c-cta-bg: var(--bas-dark); --bas-c-cta-fg: var(--bas-p-surface-1); --bas-c-cta-title-fs: var(--bas-p-fs-32); --bas-c-cta-phones-fg: var(--bas-accent-2); --bas-c-cta-padding-y: var(--bas-p-space-48); /* Breadcrumbs (.pen: Crumbs — mono 12px, foreground-secondary) */ --bas-c-crumbs-fs: var(--bas-fs-crumbs); --bas-c-crumbs-fg: var(--bas-p-fg-2); /* Footer (.pen frame 02: Footer [48,80], gap 24) */ --bas-c-footer-bg: var(--bas-dark); --bas-c-footer-gap: var(--bas-p-space-32); --bas-c-footer-fs: var(--bas-p-fs-13); --bas-c-footer-text: var(--bas-fg-inverse-soft); --bas-c-footer-cap-fg: var(--bas-accent-2); }