/** * W4L Design Tokens — Phase 13.6.2 * * 4-LAYER ARCHITECTURE * Layer 1 Reference (primitives) – internal, never reference from components * Layer 2 System (semantic roles) – text/bg/border/icon/action — what components use * Layer 3 Component (sugar) – btn/card/nav/footer/hero/email — pre-composed * Layer 4 Theme & section overrides – .dark + [data-section="*"] * * RULES * • Components reference Layer 2 or Layer 3 — NEVER Layer 1. * • To change the brand color: edit Layer 1 `--ref-brand-*` stops. Layer 2/3 follows. * • To enable dark mode: toggle `` (header.php already does this). * • To recolor a single section: add a CSS block under `[data-section="X"]`. * * PROPORTION TARGET (60-30-10, calibrated for "professional SaaS, not e-commerce") * • ~70 % neutral surfaces (white, gray-50) * • ~25 % structural gray (text, borders, icons) * • ~5 % brand red (logo placement + 1-2 primary CTAs + 1 nav-active indicator) * * LOGO COLOR SAMPLES (measured from webapps4less-logo.png via PHP GD) * • Red: #b50000 (dominant; 34 pixels at exact value) * • Gray: #808080 (dominant; 144 pixels at exact value) * * CACHE BUSTING * Enqueued via filemtime() in functions.php — any edit to this file * reaches the browser without a manual version bump. * * CMS SCOPE ISOLATION * The CMS shortcode (.tfs-cms-*) keeps its own cyan palette — see the * override block at the bottom. Phase 13.3 deferred CMS migration. */ /* ────────────────────────────────────────────────────────────── * LAYER 1 — REFERENCE PRIMITIVES * Raw hex values. Internal to the token system. Components * should never `var()` these directly. * ────────────────────────────────────────────────────────────── */ :root { /* Brand red — Tailwind red scale, exact logo match at -700 */ --ref-brand-50: #fef2f2; --ref-brand-100: #fee2e2; --ref-brand-200: #fecaca; --ref-brand-300: #fca5a5; --ref-brand-400: #f87171; --ref-brand-500: #ef4444; --ref-brand-600: #dc2626; --ref-brand-700: #b91c1c; /* SYSTEM BRAND — calibrated for CTAs */ --ref-brand-800: #991b1b; --ref-brand-900: #7f1d1d; /* Logo-exact crimson — for identity moments only (logo placement, * hero brand text, wordmark). Slightly more saturated than -700. */ --ref-brand-wordmark: #b50000; /* Gray — Tailwind neutral, mathematically harmonious. Use for all * structural grays (text, borders, icons, surfaces). */ --ref-gray-50: #f9fafb; --ref-gray-100: #f3f4f6; --ref-gray-200: #e5e7eb; --ref-gray-300: #d1d5db; --ref-gray-400: #9ca3af; --ref-gray-500: #6b7280; --ref-gray-600: #4b5563; --ref-gray-700: #374151; --ref-gray-800: #1f2937; --ref-gray-900: #111827; --ref-gray-950: #0e0e0f; /* near-black for body text */ /* Logo-matched gray — for footer wordmark + social icons (so they * visually match the gray of the logo wordmark above). */ --ref-logo-gray: #808080; --ref-logo-gray-light: #a0a0a0; --ref-logo-gray-dark: #5e5e5e; /* Status palettes (independent of brand) */ --ref-success-50: #d4edda; --ref-success-500: #28a745; --ref-success-700: #155724; --ref-warning-50: #fff3cd; --ref-warning-500: #f59e0b; --ref-warning-700: #856404; --ref-danger-50: #f8d7da; --ref-danger-500: #dc3545; --ref-danger-700: #721c24; --ref-info-50: #cce5ff; --ref-info-500: #3b82f6; --ref-info-700: #1e40af; --ref-white: #ffffff; --ref-black: #000000; } /* ────────────────────────────────────────────────────────────── * LAYER 2 — SEMANTIC SYSTEM TOKENS * Components reference these. Changes to the visual identity * (light vs dark, brand swap, section accent) are made by * re-binding Layer 2 — never by editing components. * ────────────────────────────────────────────────────────────── */ :root { /* ─── Text ───────────────────────────────────────────────── * strong h1, primary stat numbers, button labels * default body paragraphs, list items, form labels * secondary h3, section titles, captions * muted timestamps, breadcrumbs, helper, byline * subtle placeholders, "no data" text * disabled disabled inputs / buttons (same value as subtle) * inverse text on dark background (footer text) * link inline body link (deep crimson) * link-hover brighter on hover * brand "this text is intentionally branded" (logo, hero word) * on-brand text inside a brand-bg button (white) * status success/warning/danger/info pairs */ --color-text-strong: var(--ref-gray-950); --color-text-default: var(--ref-gray-800); --color-text-secondary: var(--ref-gray-700); --color-text-muted: var(--ref-gray-500); --color-text-subtle: var(--ref-gray-400); --color-text-disabled: var(--ref-gray-400); --color-text-inverse: var(--ref-gray-50); --color-text-link: var(--ref-gray-800); /* matches footer copyright bg */ --color-text-link-hover: var(--ref-brand-700); /* red on hover */ --color-text-brand: var(--ref-brand-wordmark); --color-text-on-brand: var(--ref-white); --color-text-success: var(--ref-success-700); --color-text-warning: var(--ref-warning-700); --color-text-danger: var(--ref-danger-700); --color-text-info: var(--ref-info-700); /* ─── Background ────────────────────────────────────────── * page page chrome (html bg) * surface card, modal, panel background * surface-muted page strip, alt rows * surface-hover row/card hover (NEVER brand-tinted) * surface-active row pressed * surface-selected nav-active, picked row (brand-tinted) * inverse dark footer band * brand-subtle pricing banner, "info" callout (light red tint) * brand red CTA bg (rare — only on primary action) * overlay modal scrim * status-subtle status alert backgrounds */ --color-bg-page: var(--ref-white); --color-bg-surface: var(--ref-white); --color-bg-surface-muted: var(--ref-gray-50); --color-bg-surface-hover: var(--ref-gray-100); --color-bg-surface-active: var(--ref-gray-200); --color-bg-surface-selected: var(--ref-brand-50); --color-bg-inverse: var(--ref-gray-800); --color-bg-brand-subtle: var(--ref-brand-50); --color-bg-brand: var(--ref-brand-700); --color-bg-overlay: rgba(15, 23, 42, 0.6); --color-bg-success-subtle: var(--ref-success-50); --color-bg-warning-subtle: var(--ref-warning-50); --color-bg-danger-subtle: var(--ref-danger-50); --color-bg-info-subtle: var(--ref-info-50); /* ─── Border ────────────────────────────────────────────── * default hairlines, card outlines * muted very subtle separators * strong dropdown borders, emphasized * brand selected card (rare) * focus 3px focus ring around inputs / buttons * inverse borders on dark bg * status field error / success borders */ --color-border-default: var(--ref-gray-200); --color-border-muted: var(--ref-gray-100); --color-border-strong: var(--ref-gray-300); --color-border-brand: var(--ref-brand-700); --color-border-focus: var(--ref-gray-400); --color-border-inverse: var(--ref-gray-700); --color-border-success: var(--ref-success-700); --color-border-warning: var(--ref-warning-700); --color-border-danger: var(--ref-danger-700); /* ─── Icon ──────────────────────────────────────────────── * default most decorative + nav icons * muted less important icons * strong emphasized icons * brand icon explicitly tied to brand (rare) * on-brand icon inside a brand-bg button * status-* status icons */ --color-icon-default: var(--ref-gray-500); --color-icon-muted: var(--ref-gray-400); --color-icon-strong: var(--ref-gray-700); --color-icon-brand: var(--ref-brand-700); --color-icon-on-brand: var(--ref-white); --color-icon-success: var(--ref-success-700); --color-icon-warning: var(--ref-warning-700); --color-icon-danger: var(--ref-danger-700); /* ─── Action (buttons) ──────────────────────────────────── * Hierarchy: * PRIMARY filled red — THE main action (≤2 per page) * SECONDARY white + gray border — most "actions" (unlimited) * TERTIARY text link — inline navigation * DANGER same red as primary, semantically tagged * GHOST transparent + gray hover bg — icon-only buttons * DISABLED light gray */ --color-action-primary: var(--ref-brand-700); --color-action-primary-hover: var(--ref-brand-800); --color-action-primary-active: var(--ref-brand-900); --color-action-primary-text: var(--ref-white); --color-action-primary-disabled: var(--ref-brand-200); --color-action-secondary: var(--ref-white); --color-action-secondary-hover: var(--ref-gray-50); --color-action-secondary-active: var(--ref-gray-100); --color-action-secondary-text: var(--ref-gray-700); --color-action-secondary-text-hover: var(--ref-gray-950); --color-action-secondary-border: var(--ref-gray-300); --color-action-secondary-border-hover: var(--ref-gray-400); /* Filled secondary (v3 sparse-red) — dark-gray filled button that * matches the footer bottom band. Use as the "not-primary but * assertive" action across dashboard + product pages. */ --color-action-filled-secondary: var(--ref-gray-800); --color-action-filled-secondary-hover: var(--ref-gray-900); --color-action-filled-secondary-active: var(--ref-gray-950); --color-action-filled-secondary-text: var(--ref-white); --color-action-tertiary-text: var(--ref-brand-900); --color-action-tertiary-text-hover: var(--ref-brand-700); --color-action-tertiary-bg-hover: var(--ref-gray-100); --color-action-danger: var(--ref-brand-700); --color-action-danger-hover: var(--ref-brand-800); --color-action-danger-active: var(--ref-brand-900); --color-action-danger-text: var(--ref-white); --color-action-ghost-text: var(--ref-gray-500); --color-action-ghost-hover: var(--ref-gray-100); --color-action-disabled: var(--ref-gray-100); --color-action-disabled-text: var(--ref-gray-400); } /* ────────────────────────────────────────────────────────────── * LAYER 3 — COMPONENT TOKENS * Pre-composed aliases for the most common UI patterns. Reduces * verbosity in component CSS. Override per-component to customize * a single area without touching Layer 2. * ────────────────────────────────────────────────────────────── */ :root { /* Buttons */ --btn-primary-bg: var(--color-action-primary); --btn-primary-bg-hover: var(--color-action-primary-hover); --btn-primary-bg-active: var(--color-action-primary-active); --btn-primary-text: var(--color-action-primary-text); --btn-primary-border: var(--color-action-primary); --btn-secondary-bg: var(--color-action-secondary); --btn-secondary-bg-hover: var(--color-action-secondary-hover); --btn-secondary-text: var(--color-action-secondary-text); --btn-secondary-text-hover: var(--color-action-secondary-text-hover); --btn-secondary-border: var(--color-action-secondary-border); --btn-secondary-border-hover: var(--color-action-secondary-border-hover); /* v3 filled-secondary — dark gray "footer-band" button */ --btn-filled-secondary-bg: var(--color-action-filled-secondary); --btn-filled-secondary-bg-hover: var(--color-action-filled-secondary-hover); --btn-filled-secondary-bg-active: var(--color-action-filled-secondary-active); --btn-filled-secondary-text: var(--color-action-filled-secondary-text); --btn-filled-secondary-border: var(--color-action-filled-secondary); --btn-tertiary-text: var(--color-action-tertiary-text); --btn-tertiary-text-hover: var(--color-action-tertiary-text-hover); --btn-danger-bg: var(--color-action-danger); --btn-danger-bg-hover: var(--color-action-danger-hover); --btn-danger-text: var(--color-action-danger-text); --btn-disabled-bg: var(--color-action-disabled); --btn-disabled-text: var(--color-action-disabled-text); /* Cards */ --card-bg: var(--color-bg-surface); --card-border: var(--color-border-default); --card-border-hover: var(--color-border-strong); --card-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); --card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.08); /* Nav (header) */ --nav-link-color: var(--color-text-secondary); --nav-link-color-hover: var(--color-text-strong); --nav-link-bg-hover: var(--color-bg-surface-hover); --nav-link-color-active: var(--color-text-strong); --nav-link-indicator: var(--ref-brand-700); /* 3px bottom border on current page */ /* Breadcrumb (intentionally NO red) */ --breadcrumb-text: var(--color-text-muted); --breadcrumb-link: var(--color-text-muted); --breadcrumb-link-hover: var(--color-text-secondary); --breadcrumb-sep: var(--ref-gray-300); --breadcrumb-current: var(--color-text-secondary); /* Footer (dark band) */ --footer-bg: var(--color-bg-inverse); --footer-text: var(--ref-gray-400); --footer-text-strong: var(--ref-gray-50); --footer-link: var(--ref-gray-400); --footer-link-hover: var(--ref-gray-50); --footer-icon: var(--ref-logo-gray); /* match wordmark */ --footer-icon-hover: var(--ref-logo-gray-light); --footer-border: var(--ref-gray-700); --footer-wordmark: var(--ref-logo-gray); /* v3 — footer widget/top band (lighter than the bottom band) */ --footer-widget-bg: var(--ref-gray-700); --footer-widget-text: var(--ref-gray-100); /* v3 — newsletter section grayish surface */ --newsletter-bg: var(--ref-gray-100); --newsletter-text: var(--ref-gray-800); /* Hero / banner — soft gray gradient, light end of the scale */ --hero-bg-from: var(--ref-gray-50); --hero-bg-to: var(--ref-white); --hero-text: var(--color-text-strong); --hero-text-muted: var(--color-text-muted); /* Status badges */ --badge-success-bg: var(--color-bg-success-subtle); --badge-success-text: var(--color-text-success); --badge-warning-bg: var(--color-bg-warning-subtle); --badge-warning-text: var(--color-text-warning); --badge-danger-bg: var(--color-bg-danger-subtle); --badge-danger-text: var(--color-text-danger); --badge-info-bg: var(--color-bg-info-subtle); --badge-info-text: var(--color-text-info); /* Form fields */ --field-bg: var(--color-bg-surface); --field-border: var(--color-border-strong); --field-border-focus: var(--color-border-focus); --field-text: var(--color-text-default); --field-placeholder: var(--color-text-subtle); /* Email (mirror by PHP helper tfs_email_color() — CSS vars don't * render in email clients, but defining them here documents the * intended values + lets the live email-preview shortcode work) */ --email-bg: #f8f9fb; --email-surface: var(--ref-white); --email-text: var(--color-text-default); --email-text-muted: var(--color-text-muted); --email-link: var(--color-text-link); --email-cta-bg: var(--color-action-primary); --email-cta-text: var(--color-action-primary-text); --email-border: var(--color-border-default); /* Radius (carried from Phase 13.4) */ --w4l-radius-sm: 6px; --w4l-radius: 8px; --w4l-radius-md: 12px; --w4l-radius-lg: 16px; --w4l-radius-xl: 24px; --w4l-radius-pill: 999px; } /* ────────────────────────────────────────────────────────────── * LEGACY ALIASES — for files migrated in Phase 13.1-13.5 * These keep already-token-driven CSS working while the rest of * Phase 13.6 migrates file-by-file. Removed in Phase 13.7. * ────────────────────────────────────────────────────────────── */ :root { /* Brand */ --w4l-brand: var(--ref-brand-700); --w4l-brand-hover: var(--ref-brand-800); --w4l-brand-50: var(--ref-brand-50); --w4l-brand-100: var(--ref-brand-100); --w4l-brand-200: var(--ref-brand-200); --w4l-brand-600: var(--ref-brand-600); --w4l-brand-700: var(--ref-brand-700); --w4l-brand-800: var(--ref-brand-800); --w4l-brand-900: var(--ref-brand-900); /* Gray */ --w4l-gray-50: var(--ref-gray-50); --w4l-gray-100: var(--ref-gray-100); --w4l-gray-200: var(--ref-gray-200); --w4l-gray-300: var(--ref-gray-300); --w4l-gray-400: var(--ref-gray-400); --w4l-gray-500: var(--ref-gray-500); --w4l-gray-700: var(--ref-gray-700); /* Text + semantic */ --w4l-text: var(--color-text-strong); --w4l-text-muted: var(--color-text-muted); --w4l-text-secondary:var(--color-text-secondary); --w4l-success: var(--color-text-success); --w4l-success-bg: var(--color-bg-success-subtle); --w4l-warning: var(--color-text-warning); --w4l-warning-bg: var(--color-bg-warning-subtle); --w4l-danger: var(--color-text-danger); --w4l-danger-bg: var(--color-bg-danger-subtle); --w4l-danger-strong: var(--ref-brand-600); /* Accents */ --w4l-accent-gold: #fac515; /* contact-page icons, ratings */ --w4l-button-dark: var(--ref-gray-800); --w4l-button-dark-hover: var(--ref-gray-950); /* Surface elevation aliases */ --w4l-surface: var(--color-bg-surface); --w4l-surface-muted: var(--color-bg-surface-muted); --w4l-surface-hover: var(--color-bg-surface-hover); --w4l-surface-selected: var(--color-bg-surface-selected); /* Hero gradient aliases */ --w4l-hero-bg-from: var(--hero-bg-from); --w4l-hero-bg-to: var(--hero-bg-to); /* Link + nav + breadcrumb (Phase 13.6 introduced) */ --w4l-link-color: var(--color-text-link); --w4l-link-hover-color: var(--color-text-link-hover); --w4l-nav-color: var(--nav-link-color); --w4l-nav-active-color: var(--nav-link-color-active); --w4l-breadcrumb-color: var(--breadcrumb-text); --w4l-breadcrumb-sep: var(--breadcrumb-sep); /* Sibling accents (defined but unused — kept for option) */ --w4l-accent-sky: #0ea5e9; --w4l-accent-cyan: #06b6d4; --w4l-accent-teal: #14b8a6; --w4l-accent-indigo: #6366f1; --w4l-accent-sky-50: #f0f9ff; --w4l-accent-cyan-50: #ecfeff; --w4l-accent-teal-50: #f0fdfa; --w4l-accent-indigo-50: #eef2ff; } /* ────────────────────────────────────────────────────────────── * LAYER 4a — DARK THEME (stubbed, not activated) * Activate by adding `class="dark"` to . The header.php * dark-mode toggle already does this. Only Layer 2 re-binds; * Layer 1 primitives stay the same hex values. * ────────────────────────────────────────────────────────────── */ .dark { /* Text */ --color-text-strong: var(--ref-gray-50); --color-text-default: var(--ref-gray-200); --color-text-secondary: var(--ref-gray-300); --color-text-muted: var(--ref-gray-400); --color-text-subtle: var(--ref-gray-500); --color-text-disabled: var(--ref-gray-500); --color-text-inverse: var(--ref-gray-950); --color-text-link: var(--ref-brand-300); --color-text-link-hover:var(--ref-brand-200); /* Background */ --color-bg-page: #0b0e15; --color-bg-surface: #13171f; --color-bg-surface-muted: var(--ref-gray-900); --color-bg-surface-hover: var(--ref-gray-800); --color-bg-surface-active: var(--ref-gray-700); --color-bg-surface-selected: rgba(185, 28, 28, 0.15); --color-bg-inverse: var(--ref-gray-50); --color-bg-brand-subtle: rgba(185, 28, 28, 0.10); --color-bg-overlay: rgba(0, 0, 0, 0.7); /* Border */ --color-border-default: var(--ref-gray-700); --color-border-muted: var(--ref-gray-800); --color-border-strong: var(--ref-gray-600); --color-border-inverse: var(--ref-gray-300); /* Icon */ --color-icon-default: var(--ref-gray-400); --color-icon-muted: var(--ref-gray-500); --color-icon-strong: var(--ref-gray-300); /* Action — secondary button changes most, primary stays similar */ --color-action-secondary: var(--ref-gray-800); --color-action-secondary-hover: var(--ref-gray-700); --color-action-secondary-active: var(--ref-gray-600); --color-action-secondary-text: var(--ref-gray-200); --color-action-secondary-text-hover: var(--ref-white); --color-action-secondary-border: var(--ref-gray-700); --color-action-secondary-border-hover: var(--ref-gray-600); /* Text — brand, on-brand, status (lift status text for legibility * on dark surfaces — light bg goes 700; dark bg goes 500/400). */ --color-text-brand: var(--ref-brand-400); --color-text-on-brand: var(--ref-white); --color-text-success: var(--ref-success-500); --color-text-warning: var(--ref-warning-500); --color-text-danger: var(--ref-brand-400); --color-text-info: var(--ref-info-500); /* Icon — brand + status follow text lift */ --color-icon-brand: var(--ref-brand-400); --color-icon-on-brand: var(--ref-white); --color-icon-success: var(--ref-success-500); --color-icon-warning: var(--ref-warning-500); --color-icon-danger: var(--ref-brand-400); /* Action — primary stays vibrant on dark; hover/active goes lighter * since on dark bg, going darker would lose contrast. */ --color-action-primary: var(--ref-brand-600); --color-action-primary-hover: var(--ref-brand-500); --color-action-primary-active: var(--ref-brand-400); --color-action-primary-text: var(--ref-white); --color-action-primary-disabled: rgba(220, 38, 38, 0.4); /* Action — danger same as primary in dark */ --color-action-danger: var(--ref-brand-600); --color-action-danger-hover: var(--ref-brand-500); --color-action-danger-active: var(--ref-brand-400); --color-action-danger-text: var(--ref-white); /* Action — tertiary (text link), ghost, disabled */ --color-action-tertiary-text: var(--ref-brand-300); --color-action-tertiary-text-hover: var(--ref-brand-200); --color-action-tertiary-bg-hover: var(--ref-gray-800); --color-action-ghost-text: var(--ref-gray-400); --color-action-ghost-hover: var(--ref-gray-800); --color-action-disabled: var(--ref-gray-800); --color-action-disabled-text: var(--ref-gray-600); /* Border focus + status follow icon lift */ --color-border-focus: var(--ref-brand-400); --color-border-success: var(--ref-success-500); --color-border-warning: var(--ref-warning-500); --color-border-danger: var(--ref-brand-400); /* Status bg subtle — dark variants use rgba on the 500-stop */ --color-bg-success-subtle: rgba(16, 185, 129, 0.15); --color-bg-warning-subtle: rgba(245, 158, 11, 0.15); --color-bg-danger-subtle: rgba(185, 28, 28, 0.18); --color-bg-info-subtle: rgba(59, 130, 246, 0.15); /* Component overrides for dark */ --footer-bg: var(--ref-gray-950); --footer-text: var(--ref-gray-500); --footer-text-strong: var(--ref-gray-200); --footer-link: var(--ref-gray-400); --footer-link-hover: var(--ref-gray-100); --footer-icon: var(--ref-logo-gray-light); --footer-icon-hover: var(--ref-white); --footer-border: var(--ref-gray-800); --footer-wordmark: var(--ref-logo-gray-light); --hero-bg-from: #13171f; --hero-bg-to: #0b0e15; --hero-text: var(--ref-gray-50); --hero-text-muted: var(--ref-gray-400); --card-bg: var(--ref-gray-900); --card-border: var(--ref-gray-800); --card-border-hover: var(--ref-gray-700); --card-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); --card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.5); --nav-link-bg-hover: var(--ref-gray-800); /* Email tokens in dark — typically not used (most clients ignore * @media dark) but kept consistent. */ --email-bg: #0b0e15; --email-surface: #13171f; --email-text: var(--ref-gray-200); --email-text-muted: var(--ref-gray-400); --email-border: var(--ref-gray-800); } /* ────────────────────────────────────────────────────────────── * LAYER 4b — SECTION OVERRIDES (stubbed, not styled) * Future per-section accents. Add a wrapper like * … * and override any Layer 2 / Layer 3 token in the block. Empty * blocks are intentional — they document the mechanism without * implying a section identity now. * ────────────────────────────────────────────────────────────── */ [data-section="dashboard"] { /* identity stays default */ } [data-section="sites"] { /* future accent */ } [data-section="billing"] { /* future accent */ } [data-section="support"] { /* future accent */ } [data-section="account"] { /* future accent */ } /* ────────────────────────────────────────────────────────────── * WORKED EXAMPLE (commented out — uncomment to enable a section * accent without touching component CSS): * * [data-section="billing"] { * --color-action-primary: #0d9488; // teal-600 * --color-action-primary-hover: #0f766e; // teal-700 * --color-text-link: #115e59; // teal-800 * --nav-link-indicator: #0d9488; * } * * To wire `data-section` onto , add a filter in functions.php: * * add_filter( 'body_class', function( $c ) { * if ( is_page( 'billing' ) ) $c[] = 'section-billing'; * else if ( is_page( 'my-sites' ) ) $c[] = 'section-sites'; * // … * return $c; * } ); * * Then the `` overrides match. (Note * that we used class-based section here to play nicely with body_class; * either `.section-billing` or `[data-section="billing"]` works.) * ────────────────────────────────────────────────────────────── */ /* ────────────────────────────────────────────────────────────── * FRAMEWORK INTEROP — Bootstrap + Uniqore * These frameworks hardcode their own primary colors instead of * reading from --bs-primary. We override the framework's tokens * at :root, plus the button variants by selector. * * v3 note — `--bs-primary` stays RED. Only `.btn-secondary` and * `.btn-outline-secondary` use the dark-gray "footer band" color, * NOT `.bg-primary` / `.text-primary` decorations. * ────────────────────────────────────────────────────────────── */ :root { /* Bootstrap primary tokens */ --bs-primary: var(--color-action-primary); --bs-primary-rgb: 185, 28, 28; --bs-link-color: var(--color-text-link); --bs-link-hover-color:var(--color-text-link-hover); /* Bootstrap primary-50 (used by pricing banner via .bg-primary-50) */ --bs-primary-50: var(--ref-brand-50); --bs-primary-50-rgb: 254, 242, 242; --color-primary-50: var(--ref-brand-50); /* Uniqore parallel palette */ --color-primary-100: var(--ref-brand-100); --color-primary-200: var(--ref-brand-200); --color-primary-500: var(--ref-brand-700); --color-primary-600: var(--ref-brand-700); --color-primary-700: var(--ref-brand-800); } /* Bootstrap .btn-primary hardcodes --bs-btn-bg in main.min.css, so * the :root override doesn't reach it. Override the selectors. */ .btn-primary { --bs-btn-bg: var(--color-action-primary); --bs-btn-border-color: var(--color-action-primary); --bs-btn-hover-bg: var(--color-action-primary-hover); --bs-btn-hover-border-color: var(--color-action-primary-hover); --bs-btn-active-bg: var(--color-action-primary-active); --bs-btn-active-border-color: var(--color-action-primary-active); --bs-btn-color: var(--color-action-primary-text); --bs-btn-hover-color: var(--color-action-primary-text); } .btn-outline-primary { --bs-btn-color: var(--color-action-primary); --bs-btn-border-color: var(--color-action-primary); --bs-btn-hover-bg: var(--color-action-primary); --bs-btn-hover-border-color: var(--color-action-primary); --bs-btn-active-bg: var(--color-action-primary-active); --bs-btn-active-border-color: var(--color-action-primary-active); } .btn-primary-50, .btn-primary-25, .btn-primary-10 { --bs-btn-bg: var(--color-bg-brand-subtle); --bs-btn-border-color: var(--color-bg-brand-subtle); --bs-btn-hover-bg: var(--ref-brand-100); --bs-btn-hover-border-color: var(--ref-brand-100); --bs-btn-color: var(--color-text-link); } /* v3 filled-secondary — dark-gray "footer-band" button (the color the * user liked in the footer bottom band). Use for "not-primary but * assertive" actions. */ .btn-secondary, .btn-filled-secondary { --bs-btn-bg: var(--btn-filled-secondary-bg); --bs-btn-border-color: var(--btn-filled-secondary-border); --bs-btn-hover-bg: var(--btn-filled-secondary-bg-hover); --bs-btn-hover-border-color: var(--btn-filled-secondary-bg-hover); --bs-btn-active-bg: var(--btn-filled-secondary-bg-active); --bs-btn-active-border-color: var(--btn-filled-secondary-bg-active); --bs-btn-color: var(--btn-filled-secondary-text); --bs-btn-hover-color: var(--btn-filled-secondary-text); } /* v3 outlined-secondary — light outline with dark-gray text, subtle * gray-50 fill on hover. Sits alongside .btn-secondary as its * "less-assertive" cousin. */ .btn-outline-secondary { --bs-btn-color: var(--btn-secondary-text); --bs-btn-border-color: var(--btn-secondary-border); --bs-btn-hover-bg: var(--btn-secondary-bg-hover); --bs-btn-hover-color: var(--btn-secondary-text-hover); --bs-btn-hover-border-color: var(--btn-secondary-border-hover); --bs-btn-active-bg: var(--color-action-secondary-active); --bs-btn-active-border-color: var(--btn-secondary-border-hover); } .uc-link { color: var(--color-text-link); } .uc-link:hover { color: var(--color-text-link-hover); } /* ────────────────────────────────────────────────────────────── * CMS SCOPE ISOLATION — Phase 13.3-final * The CMS UI keeps its own cyan visual language. Inside any CMS * root, re-bind --w4l-brand to the original cyan so shared * components (media picker, focus rings) render cyan, not red. * ────────────────────────────────────────────────────────────── */ .tfs-cms-wrapper, .tfs-cms-container, .tfs-cms-error-container { --w4l-brand: #3498db; --w4l-brand-hover: #2980b9; --w4l-brand-50: rgba(52, 152, 219, 0.08); --w4l-brand-100: rgba(52, 152, 219, 0.15); /* Also rebind Layer 2 link tokens so links inside CMS use cyan */ --color-text-link: #2980b9; --color-text-link-hover: #3498db; }