/** * Legacy design-token compatibility layer * ---------------------------------------- * The boltpress parent theme (migrated from wp-blaze) emits its design tokens * as namespaced custom properties: `--boltpress-{group}-{key}` * (e.g. --boltpress-colors-primary, --boltpress-typography-font-size-base, * --boltpress-spacing-4, --boltpress-border-radius-md). * * The militra-com child CSS was written against the legacy wp-blaze scheme * (--color-primary, --font-size-base, --spacing-4, --border-radius-md, ...). * After the parent update those legacy names became undefined, so every * unfallbacked var() collapsed to its initial value and the site rendered * unstyled. * * This file re-establishes the legacy names by aliasing them onto the new * boltpress tokens, so live edits in BoltPress -> Design System still flow * through to the child. The hardcoded value after each comma is a final * fallback (harvested from the child CSS's own inline fallbacks) used only if * the design system is disabled / design-tokens.css fails to load. * * Load this BEFORE the rest of the child CSS (enqueued first in functions.php). * Custom-property substitution is lazy, so source order does not actually * affect resolution, but keeping it first documents intent. */ :root { /* ---- Colors -------------------------------------------------------- * EVERY alias carries a hardcoded final fallback, harvested from this site's * real compiled tokens. It fires only if design-tokens.css fails to load or * the design system is switched off — in which case the site degrades to the * correct Militra palette instead of to unstyled. Without the fallback, an * undefined --boltpress-* makes the whole alias invalid at computed-value * time, and ~110 read sites collapse to inherit/initial. */ --color-primary: var(--boltpress-colors-primary, #ff7544); --color-secondary: var(--boltpress-colors-secondary, #ff8c63); --color-accent: var(--boltpress-colors-accent, #252a36); --color-background: var(--boltpress-colors-background, #ffffff); --color-background-alt: var(--boltpress-colors-background-alt, #f9f3ee); --color-background-dark: var(--boltpress-colors-background-dark, #2d2f3a); --color-text: var(--boltpress-colors-text, #777e90); --color-text-muted: var(--boltpress-colors-text-muted, #797979); --color-border: var(--boltpress-colors-border, #000000); --color-error: var(--boltpress-colors-error, #d63638); --color-success: var(--boltpress-colors-success, #00a32a); --color-warning: var(--boltpress-colors-warning, #dba617); --color-overlay: var(--boltpress-colors-overlay, rgba(35, 33, 81, 0.30)); --color-headings-general: var(--boltpress-colors-headings-general, #252a36); --color-links-initial: var(--boltpress-colors-links-initial, #797979); --color-links-hover: var(--boltpress-colors-links-hover, #252a36); --color-headings-h1: var(--boltpress-colors-headings-h1, #252a36); --color-headings-h2: var(--boltpress-colors-headings-h2, #252a36); --color-headings-h3: var(--boltpress-colors-headings-h3, #252a36); --color-headings-h4: var(--boltpress-colors-headings-h4, #252a36); --color-headings-h5: var(--boltpress-colors-headings-h5, #252a36); --color-headings-h6: var(--boltpress-colors-headings-h6, #252a36); /* "primary text" was never a boltpress token. Its 3 read sites (category-filter.css) * carry NO inline fallback, so today they simply inherit the body colour — which is * --color-text. Map it there, so the bridge reproduces today's rendering. */ --color-text-primary: var(--boltpress-colors-text, #777e90); /* ---- Typography ---------------------------------------------------- * `, sans-serif` is appended OUTSIDE var() so every `var(--font-family-*)` * usage gets a generic fallback even though the boltpress token value is a * bare "DM Sans" with no fallback of its own. Prevents serif fallback when * the DM Sans webfont is unavailable. * * FALLBACK VALUES ARE THIS SITE'S REAL TOKENS, not generic rem defaults. A * wrong fallback is worse than none: it silently ships a different type scale * in exactly the degraded state it exists to cover. (These were 1rem/2rem/etc., * i.e. 16px/32px, against real tokens of 16px/24px.) */ /* NOTE: no --font-family-primary alias. It has zero read sites in the child, and * boltpress 1.1.x's DEFAULT token tree ships typography.font-family.primary = * "system-ui, -apple-system, sans-serif". So the alias would resolve to system-ui, * the "DM Sans" fallback could never fire, and any future * `font-family: var(--font-family-primary)` would silently render in the wrong * font while looking correct in the design-system-off state. Left undefined, exactly * as boltpress 1.0.0 leaves it. */ --font-family-body: var(--boltpress-typography-font-family-body, "DM Sans"), sans-serif; --font-family-heading: var(--boltpress-typography-font-family-heading, "DM Sans"), sans-serif; --font-size-xs: var(--boltpress-typography-font-size-xs, 12px); --font-size-sm: var(--boltpress-typography-font-size-sm, 14px); --font-size-base: var(--boltpress-typography-font-size-base, 16px); --font-size-lg: var(--boltpress-typography-font-size-lg, 18px); --font-size-xl: var(--boltpress-typography-font-size-xl, 20px); --font-size-2xl: var(--boltpress-typography-font-size-2xl, 24px); --font-size-3xl: var(--boltpress-typography-font-size-3xl, 30px); --font-size-4xl: var(--boltpress-typography-font-size-4xl, 36px); --font-weight-light: var(--boltpress-typography-font-weight-light, 300); --font-weight-normal: var(--boltpress-typography-font-weight-normal, 400); --font-weight-medium: var(--boltpress-typography-font-weight-medium, 500); --font-weight-semibold: var(--boltpress-typography-font-weight-semibold, 600); --font-weight-bold: var(--boltpress-typography-font-weight-bold, 700); /* boltpress 1.1.x ships line-height defaults (1.25 / 1.5 / 1.75), so the fallbacks * match them and pre-/post-migration render identically. --line-height-relaxed was * 1.6 here, which silently overrode base.css's own 1.75 request for prose; the one * consumer that genuinely wants 1.6 (the footer description) now pins it literally. */ --line-height-tight: var(--boltpress-typography-line-height-tight, 1.25); --line-height-normal: var(--boltpress-typography-line-height-normal, 1.5); --line-height-relaxed: var(--boltpress-typography-line-height-relaxed, 1.75); /* ---- Spacing ------------------------------------------------------ */ --spacing-1: var(--boltpress-spacing-1, 4px); --spacing-2: var(--boltpress-spacing-2, 8px); --spacing-3: var(--boltpress-spacing-3, 10px); --spacing-4: var(--boltpress-spacing-4, 12px); --spacing-5: var(--boltpress-spacing-5, 14px); --spacing-6: var(--boltpress-spacing-6, 18px); --spacing-7: 1.75rem; /* orphan: no boltpress equivalent */ --spacing-8: var(--boltpress-spacing-8, 24px); --spacing-10: var(--boltpress-spacing-10, 40px); --spacing-12: var(--boltpress-spacing-12, 48px); --spacing-15: var(--boltpress-spacing-15, 60px); --spacing-16: var(--boltpress-spacing-16, 64px); --spacing-18: var(--boltpress-spacing-18, 72px); --spacing-20: var(--boltpress-spacing-20, 80px); --spacing-24: var(--boltpress-spacing-24, 96px); --spacing-30: var(--boltpress-spacing-30, 120px); /* ---- Border radius ------------------------------------------------ */ --border-radius-sm: var(--boltpress-border-radius-sm, 4px); --border-radius-md: var(--boltpress-border-radius-md, 15px); --border-radius-lg: var(--boltpress-border-radius-lg, 30px); --border-radius-full: 9999px; /* orphan, but every read site fallbacks to 9999px -> inert */ /* NOTE: no --border-radius-2. It is an orphan whose TWO read sites (the product video * iframe + .video-wrapper in single-product.css) carry NO inline fallback, so today — * with the token undefined under boltpress 1.0.0 — those declarations are invalid at * computed-value time and the corners render SQUARE. Defining it as 2px here would * silently round them the moment the bridge turns on: a rendering delta across the * parent swap, which this bridge must not introduce. An orphan is only admissible when * every read site already fallbacks to the same value (as --border-radius-full does). */ /* ---- Neutral / gray / utility palette ---------------------------- * These were never part of the boltpress token set. Every usage in the child * CSS already carries an inline fallback, so defining them here is purely * defensive — and only VALID while every value matches those inline fallbacks * exactly. * * --color-neutral-100 and --color-neutral-500 are DELIBERATELY NOT DEFINED: * their read sites disagree with each other. --color-neutral-500 is asked for * as #777e90 by three subtitle/lede rules and as #797979 by two nav rules; * --color-neutral-100 as #f3f4f6 by three rules and #f4f5f7 by three others. * They are two genuinely different tokens overloaded onto one name. Defining * either would silently repaint half those elements the moment this bridge * turns on. Leaving them undefined keeps every read site on its own inline * fallback, so rendering is identical under both parents. */ --color-white: #ffffff; --color-light: #e6e8ec; --color-light-muted: #f8f9fb; --color-muted: #98a3b6; --color-dark: #2d2f3a; --color-neutral-50: #f9fafb; --color-neutral-200: #e5e7eb; --color-neutral-300: #d1d5db; --color-neutral-400: #9ca3af; --color-neutral-600: #6b7280; --color-neutral-700: #374151; --color-neutral-900: #111827; --color-gray-50: #f9fafb; --color-gray-100: #f3f4f6; --color-gray-200: #e5e7eb; --color-gray-600: #4b5563; --color-gray-700: #374151; --color-gray-900: #111827; --color-info: #2196F3; --color-info-dark: #1565C0; --color-info-light: #E3F2FD; }