/* ========================================================================== CAD-Vision Engineering GmbH — design tokens Source: Figma "cad-vision.at" (file WDWNN79TvlTUA2wNZaQmvE), measured 2026-10-30 from the properties panel of the approved Design File page (Homepage, Service Page, About us, Kontakt page — 1440px frames), the Style Guide page and the Components page. DESIGN.md beside this file holds the analysis, the contrast table and the open decisions. Every value is either measured in Figma (M) or derived from a measured value by the rule written next to it (D). Nothing is decorative guesswork. Load order (theme inc/enqueue.php): main.css → fonts.css → this file → site.css → forms.css. This file loads AFTER main.css and redefines every colour role main.css declares, so the header, buttons, forms and the starter's modules pick up the palette without touching their rules. The rule: components read ROLES (section 2 and 3), never the primitives in section 1. A colour is defined here and nowhere else. ========================================================================== */ :root { /* ---------------------------------------------------------------------- 1 · Primitives — the Figma colour styles, under their Figma names. Only section 2 and 3 read these. ---------------------------------------------------------------------- */ --cv-primary: #01ADEF; /* M "Primary color": nav Kontakt fill, eyebrows, line icons, slider dots, outline buttons */ --cv-primary-deep: #155F82; /* M Style Guide "Color 01 — Main accented color". Same hue as --cv-primary (OKLCH h 234.9), so it is the client's own shade of the cyan, not a second accent */ --cv-secondary: #2F4B58; /* M "Secondary": the contact block */ --cv-gray: #2E2E2E; /* M "Gray": headings, nav, card titles, key lines */ --cv-body: #656565; /* M "Body": running text */ --cv-title: #B1B4B3; /* M "Title": footer column heads, placeholders; card edge at 25% */ --cv-light-gray: #F6F6F6; /* M "Light gray": page ground, header, alternating bands */ --cv-white: #FFFFFF; /* M "White": hero, cards, form card, alternating bands */ --cv-dark: #1E1E1E; /* M "Background dark": CTA band and footer */ --cv-black: #000000; /* M "Image Overlay": 64% scrim on photo heroes, 20% image edge */ /* ---------------------------------------------------------------------- 2 · Colour roles — the contract main.css, forms.css and woocommerce.css read. Contrast ratios are measured (WCAG 2.x); see DESIGN.md § Contrast. ---------------------------------------------------------------------- */ --canvas: var(--cv-light-gray); /* M every page frame is filled "Light gray" */ --surface: var(--cv-white); /* M the lifted layer: service cards, form card, white bands */ --plate: var(--cv-white); /* no shop; kept so the role exists */ --ink: var(--cv-gray); /* 12.57:1 on canvas, 13.58:1 on surface */ --on-ink: var(--cv-white); /* 13.58:1 */ --text-2: var(--cv-body); /* 5.39:1 on canvas, 5.83:1 on surface — running text AND meta */ --line: color-mix(in srgb, var(--cv-title) 25%, transparent); /* M card edge "#B1B4B3 25%": decorative only */ --accent: var(--cv-primary); /* the one filled action per screen (nav "Kontakt") */ --on-accent: var(--cv-gray); /* D 5.32:1. The design puts WHITE on the cyan, which is 2.55:1 and fails at every size — decided 2026-10-30: dark label (DESIGN.md log) */ --accent-hover: var(--cv-primary-deep); /* D the starter uses this as hover TEXT and EDGE on canvas (6.50:1) and as the filled button's hover fill */ --accent-edge: var(--cv-primary-deep); /* D the cyan fill is 2.55:1 against white; the edge carries the 3:1 boundary instead (main.css: "a light accent sets a darker one") */ --error: #B42318; /* not in Figma — starter value kept, 6.08:1 on canvas. Provisional */ /* Project roles the starter does not have. site.css reads them. */ --accent-ink: var(--cv-primary-deep); /* D the accent as TEXT or EDGE on canvas/surface: eyebrows, links, outline buttons, active states. The bright cyan is 2.36–2.55:1 there */ --on-accent-hover: var(--cv-white); /* D 7.02:1 on the hover fill; site.css restates the label colour on .btn--filled:hover because the starter keeps --on-accent there */ --line-strong: #8E8E8E; /* D lightest neutral grey at 3:1 on canvas (3.03) and surface (3.28): field underlines and any rule that carries meaning. The design's underline (#B1B4B3 at 25%) is 1.18:1 */ --placeholder: var(--cv-body); /* D "Title" #B1B4B3 is 2.09:1; placeholders are hints, labels are visible */ /* Secondary ground — the contact block */ --secondary: var(--cv-secondary); --on-secondary: var(--cv-white); /* 9.26:1 */ --on-secondary-2: #AEB8BD; /* D the design's "Light gray at 64%" composited onto Secondary and made solid (no opacity states): 4.58:1. Office / E-Mail / Telefon labels */ /* Dark ground — the CTA band and the footer */ --dark: var(--cv-dark); --on-dark: var(--cv-white); /* 16.67:1 */ --on-dark-2: var(--cv-title); /* 7.98:1 — column heads, meta, copyright (design used Body: 2.86:1) */ --on-dark-accent: var(--cv-primary); /* 6.53:1 — the cyan works as text here, and only on this ground */ --line-on-dark: #6B6B6B; /* D 3.13:1 — social icon boxes; the design's grey is 2.86:1 */ /* Photo ground — subpage heroes (photo + black scrim) */ --scrim: rgb(0 0 0 / .64); /* M Frame fill "#000000 64%" over the photo */ --on-photo: var(--cv-white); /* 6.69:1 even over a white pixel under the scrim */ --image-edge: rgb(0 0 0 / .2); /* M image border 0.5px "Image Overlay #000000 20%" */ /* Focus — visible on every ground (ring vs ground ≥ 3:1) */ --focus: var(--ink); /* 12.57:1 on canvas */ --focus-on-dark: var(--cv-white); /* 16.67:1 on dark, 9.26:1 on secondary */ /* Legacy names main.css still reads (links, FAQ, .mw-btn, body). Mapped, not redefined, so there is one source. Links are text on canvas, so the starter's "accent" maps to the ink shade of the cyan, not the fill. */ --color-background: var(--canvas); --color-text: var(--ink); --color-accent: var(--accent-ink); --color-primary: var(--accent); --content-max-width: var(--max); /* ---------------------------------------------------------------------- 3 · Typography — one family. Figma text styles: Heading/H1–H7, Paragraph/Paragraph, Paragraph S, Paragraph ES, Links/L link, Links/S link. Only 1440px frames exist, so the fluid floors are D (provisional). Letter-spacing is stored in em so it scales with the size it was set at. ---------------------------------------------------------------------- */ --font-sans: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --fw-light: 300; --fw-regular: 400; --fw-medium: 500; /* H1 · Figtree Medium 48 / 100% / 0 — hero headline, CTA band */ --fs-h1: clamp(2.25rem, 1.98rem + 1.135vw, 3rem); /* 36 → 48 at 1440 */ --lh-h1: 1; --fw-h1: var(--fw-medium); /* H2 · Figtree Medium 40 / 100% / 0 */ --fs-h2: clamp(2rem, 1.82rem + .76vw, 2.5rem); /* 32 → 40 */ --lh-h2: 1; --fw-h2: var(--fw-medium); /* H3 · Figtree Medium 32 / 100% / 0 — section titles, subpage hero titles */ --fs-h3: clamp(1.625rem, 1.49rem + .57vw, 2rem); /* 26 → 32 */ --lh-h3: 1; --fw-h3: var(--fw-medium); /* H4 · Figtree Light 24 / 100% / 0 — the one light style */ --fs-h4: clamp(1.375rem, 1.33rem + .19vw, 1.5rem); /* 22 → 24 */ --lh-h4: 1; --fw-h4: var(--fw-light); /* H5 · Figtree Medium 20 / 28 / 0 — card titles, form title */ --fs-h5: 1.25rem; --lh-h5: 1.4; --fw-h5: var(--fw-medium); /* H6 · Figtree Medium 14 / 100% / 1.12px — nav items and every button label */ --fs-h6: .875rem; --lh-h6: 1; --fw-h6: var(--fw-medium); --ls-h6: .08em; /* H7 · Figtree Medium 16 / 100% / 1.12px — footer column heads */ --fs-h7: 1rem; --lh-h7: 1; --fw-h7: var(--fw-medium); --ls-h7: .07em; /* Paragraph · Figtree Regular 16 / 24 / 0.28px — running text */ --fs-p: 1rem; --lh-p: 1.5; --ls-p: .0175em; /* Paragraph S · Figtree Regular 14 / 20 / 0.28px — eyebrows, addresses */ --fs-p-s: .875rem; --lh-p-s: 1.4286; --ls-p-s: .02em; /* Paragraph ES · Figtree Medium 12 / 100% / 0.24px — fine print */ --fs-p-es: .75rem; --lh-p-es: 1; --fw-p-es: var(--fw-medium); --ls-p-es: .02em; /* Links/L link · Figtree Regular 18 / 100% / 0.24px — underlined by a rule */ --fs-link-l: 1.125rem; --ls-link-l: .0133em; /* Links/S link · Figtree Medium 14 / 100% / 0.7px — contact labels */ --fs-link-s: .875rem; --fw-link-s: var(--fw-medium); --ls-link-s: .05em; /* ---------------------------------------------------------------------- 4 · Layout and space ---------------------------------------------------------------------- */ --max-content: 1200px; /* M 1440 frame − 2 × 120 */ --gutter: clamp(20px, 8.3334vw, 120px); /* M 120 at 1440; D floor */ --max: calc(var(--max-content) + 2 * var(--gutter)); /* .wrap is border-box: content stays 1200 */ --section: clamp(64px, 8.3334vw, 120px); /* M 120: service bands, content blocks */ --section-sm: clamp(48px, 5.556vw, 80px); /* M 80: CTA band, footer */ --space-2xs: 10px; /* M button icon gap */ --space-xs: 16px; /* M service card grid gap (4 × 288 + 3 × 16 = 1200) */ --space-s: 24px; /* M card padding and inner gap; text column gap */ --space-m: 32px; /* M form field gap */ --space-l: 40px; /* M form card side padding */ --space-xl: 48px; /* M form card top/bottom padding */ --space-2xl: 60px; /* M section heading → content */ --space-3xl: 100px; /* M footer column gap */ --header-h: 72px; /* M Menu: hug 72, sticky */ /* ---------------------------------------------------------------------- 5 · Shape, depth, motion ---------------------------------------------------------------------- */ --radius-card: 12px; /* M service cards, contact block, form card, images, map */ --radius-btn: 4px; /* M Button component */ --radius-none: 0; /* M nav "Kontakt": a full-height block in the header */ --border: 1px; /* M card edge, button edge */ --border-image: .5px; /* M image edge */ --btn-pad-y: 15px; /* M Button component 15 / 30 */ --btn-pad-x: 30px; --nav-cta-pad-y: 16px; /* M Menu button 16 / 40, fills the header height */ --nav-cta-pad-x: 40px; --card-pad: var(--space-s); --form-card-pad: var(--space-xl) var(--space-l); --shadow-header: 0 4px 44px rgb(160 160 160 / .12); /* M Menu drop shadow #A0A0A0 12%, y 4, blur 44. The only shadow */ --t: .15s ease-out; /* M Button "while hovering → smart animate, ease out, 150ms" */ } @media (prefers-reduced-motion: reduce) { :root { --t: 0s; } }