/* ========================================================================= * lwlcom Design Tokens — Single Source of Truth * ------------------------------------------------------------------------- * Two-tier system: * * 1. PRIMITIVE TOKENS (--brand-*) — raw brand colors, fonts, sizes. * Update here when the brand changes (rebrand, new font supplier, etc). * Components MUST NOT reference these directly. * * 2. SEMANTIC TOKENS (--color-*, --font-family-*) — describe INTENT * ("page background", "primary action", "heading font"). Components * reference ONLY these. Re-skinning = remap semantic -> primitive. * * VISUAL MODEL — "Dark canvas + floating light panels": * - The CANVAS is dark-blue (#16205D). Body, header, footer, gaps between * sections, and feature stripes (USP, Quote, TeaserGrid, Akkordion-h, * hero) all live on the canvas with white text + cyan accents. * - Long-form text content (BlockText, BlockTextBild, BlogText, blog post * bodies, forms, tables) sits on FLOATING LIGHT PANELS — soft tinted blue * surfaces that float above the canvas. Inside panels, text is dark-blue. * - Accents (primary blue, cyan, green) appear ONLY on inline elements * (buttons, links, icons, badges) — never as full-bleed section bg. * - Page rhythm law: at most 1 feature stripe in a row without a light * panel between them. * * Loaded FIRST via TypoScript (page.typoscript) so its values cascade * into screen.css and layout.css. The legacy --color-* names defined in * screen.css are kept as ALIASES here so existing `var(--color-*)` usages * pick up the new palette automatically. * * Adding a new token: * - New brand color -> add to PRIMITIVES, then map a SEMANTIC alias. * - New role/intent -> add to SEMANTICS only, point at existing primitive. * - Never add a raw hex outside this file. * * USAGE RULES: * - --color-primary (#0472FF) only passes WCAG AA Large (3:1) on white. * Restrict to text >=18px or >=14px bold. For body-size links on light * surfaces, prefer --color-blacklogo (14.4:1) or --color-link-hover. * - --color-accent (cyan) is CANVAS-ONLY. Do NOT use on light surfaces * (1.72:1 fails all WCAG levels). * - Payment-icon SVGs keep their hardcoded brand colors and must always be * placed inside white card containers. * ========================================================================= */ :root { /* --------------------------------------------------------------------- * PRIMITIVES — brand palette (raw values, do not use directly) * Source: design/color-palete/Color Palette.png (canonical) * --------------------------------------------------------------------- */ --brand-white: #FAFAFA; /* Pantone — paper / white tint */ --brand-cyan: #30D1FF; /* Pantone 2985 C */ --brand-blue: #0472FF; /* Pantone 285 C — primary */ --brand-dark-blue: #16205D; /* Pantone 281 C — dominant B2B */ --brand-green: #07EDAC; /* Pantone 3385 C — success */ /* Neutrals — utility greys derived from the brand. Kept minimal: only the shades currently in use. Add more only when needed. */ --brand-grey-100: #F4F6F9; --brand-grey-300: #A1A5A7; --brand-grey-700: #646363; /* --------------------------------------------------------------------- * SEMANTIC — surfaces (dark canvas + floating light panels) * --------------------------------------------------------------------- */ --color-bg-page: var(--brand-dark-blue); /* the canvas — body, gaps */ --color-bg-canvas-alt: #1B2A6F; /* tonal stripe within canvas */ --color-bg-strong: var(--brand-dark-blue); /* explicit dark feature stripe */ --color-bg-surface: var(--brand-white); /* floating light panel */ --color-bg-surface-alt: #DDE8F3; /* inner zones / table zebra */ --color-bg-card: #FFFFFF; /* lifted card on any surface */ --color-bg-section-alt: #DDE8F3; /* legacy alias — same as surface-alt */ /* SEMANTIC — text (paired by surface) */ --color-text-default: var(--brand-white); /* default text on canvas */ --color-text-on-canvas: var(--brand-white); /* text on dark canvas */ --color-text-on-surface: var(--brand-dark-blue); /* text inside light panels */ --color-text-on-dark: var(--brand-white); /* legacy: text on dark bg */ --color-text-muted-on-canvas: var(--brand-grey-300); --color-text-muted-on-surface: var(--brand-grey-700); --color-text-muted: var(--brand-grey-700); /* legacy alias */ /* SEMANTIC — borders */ --color-border-on-surface: var(--brand-grey-300); --color-border-on-canvas: rgba(255, 255, 255, 0.12); --color-border-subtle: var(--brand-grey-300); /* legacy alias */ /* SEMANTIC — interactive (verified contrast from Color Palette (4).png) */ --color-primary: var(--brand-blue); --color-primary-hover: var(--brand-dark-blue); --color-primary-text: var(--brand-white); /* text on primary bg */ --color-interactive-primary: var(--brand-blue); /* CTA / button accent */ --color-accent: var(--brand-cyan); --color-accent-text: var(--brand-dark-blue); /* text on cyan bg */ --color-success: var(--brand-green); --color-success-text: var(--brand-dark-blue); /* text on green bg */ --color-error: #C83C3C; /* form validation error */ /* SEMANTIC — focus & links */ --color-link: var(--brand-blue); --color-link-hover: var(--brand-dark-blue); --color-focus-ring: var(--brand-cyan); /* SEMANTIC — gradients (from Color Palette (3).png) */ --gradient-hero: linear-gradient(135deg, var(--brand-dark-blue), var(--brand-blue)); --gradient-accent: linear-gradient(135deg, var(--brand-blue), var(--brand-cyan)); --gradient-success: linear-gradient(135deg, var(--brand-blue), var(--brand-green)); --gradient-soft: linear-gradient(135deg, var(--brand-green), var(--brand-white)); /* --------------------------------------------------------------------- * LEGACY ALIASES — kept so the existing 199 `var(--color-*)` usages in * screen.css/layout.css pick up the new palette without rewrites. * Do NOT add new usages of these names — use the semantic tokens above. * --------------------------------------------------------------------- */ --color-blacklogo: var(--brand-dark-blue); /* dark blue, kept as text-on-surface color */ --color-blue: var(--brand-blue); /* electric primary — buttons, links */ --color-bluelight: #DDE8F3; /* soft tinted blue — floating-panel surface */ --color-blue2: var(--brand-blue); /* gradient stop — restored depth (was collapsed to dark-blue) */ --color-white: var(--brand-white); /* DEPRECATED — value resolves to brand-blue, NOT orange. Kept as alias so legacy `var(--color-orange)` rules pick up the new palette. New code should use --color-interactive-primary instead. */ --color-orange: var(--color-interactive-primary); --color-grey: var(--brand-grey-300); --color-greydark: var(--brand-grey-700); --color-bluedusty: var(--brand-dark-blue); /* Logo tokens — already #16205D / #0472FF in the previous rebrand (commit d64026c). Now sourced from primitives. */ --color-logo-lwl: var(--brand-dark-blue); --color-logo-com: var(--brand-blue); } /* ========================================================================= * Brand variant — LWLHOME (consumer / light-dominant) * DORMANT in this site. Activated by adding `data-brand="lwlhome"` to * (no trigger is wired in this PR — see Plan Task 0 Step 2). Kept here so * any future LWLHOME landing page or shared component re-skins instantly. * ========================================================================= */ body[data-brand="lwlhome"] { --color-bg-page: var(--brand-white); --color-bg-section-alt: var(--brand-white); --color-bg-strong: var(--brand-blue); /* lighter "strong" sections */ --color-text-default: var(--brand-dark-blue); --color-primary: var(--brand-blue); --color-primary-hover: var(--brand-cyan); --color-accent: var(--brand-green); } /* ========================================================================= * Typography — @font-face declarations + semantic font tokens * ========================================================================= */ @font-face { font-family: "Be Vietnam Pro"; font-weight: 500; font-style: normal; font-display: swap; src: url("../Fonts/be-vietnam-pro/be-vietnam-pro-500.woff2") format("woff2"); } @font-face { font-family: "Innovator Grotesk"; font-weight: 400; font-style: normal; font-display: swap; src: url("../Fonts/innovator-grotesk/innovator-grotesk-400.woff2") format("woff2"); } @font-face { font-family: "Innovator Grotesk"; font-weight: 500; font-style: normal; font-display: swap; src: url("../Fonts/innovator-grotesk/innovator-grotesk-500.woff2") format("woff2"); } @font-face { font-family: "Space Grotesk"; font-weight: 500; font-style: normal; font-display: swap; src: url("../Fonts/space-grotesk/space-grotesk-500.woff2") format("woff2"); } :root { /* Semantic font tokens — components reference these only. Brand stack per design/Typography.png: heading -> Be Vietnam Pro Medium body -> Innovator Grotesk (Regular 400 + Medium 500 currently licensed; Semi Bold 600 + Bold 700 pending top-up order from Yep!type — until then bold weights are synthesized by the browser) tagline -> Space Grotesk Medium Legacy Rubik families ("regular", "rubik500") remain in the stack as a safety net for the moment the woff2 file is unreachable. */ --font-family-heading: "Be Vietnam Pro", "rubik500", system-ui, sans-serif; --font-family-body: "Innovator Grotesk", "regular", system-ui, sans-serif; --font-family-tagline: "Space Grotesk", "rubik500", system-ui, sans-serif; /* Weights (semantic) */ --font-weight-heading: 500; --font-weight-body: 400; --font-weight-bold: 700; } .tagline { font-family: var(--font-family-tagline); font-weight: 500; }