/* ============================================================ KAAF HOLDINGS — DESIGN TOKENS This file is the single source of truth. Every spacing value, every font size, every color used anywhere in the site MUST come from a variable defined here. No raw px in the other files. If you need a value that isn't here, add it here first. ============================================================ */ /* ---- FONT FACES (embedded, no external requests) ---- */ @font-face{font-family:'Fraunces';font-style:normal;font-weight:100 900;font-display:swap;src:url(../assets/fonts/fraunces.woff2) format('woff2')} @font-face{font-family:'Fraunces';font-style:italic;font-weight:100 900;font-display:swap;src:url(../assets/fonts/fraunces-italic.woff2) format('woff2')} @font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/archivo-400.woff2) format('woff2')} @font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/archivo-500.woff2) format('woff2')} @font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url(../assets/fonts/archivo-600.woff2) format('woff2')} @font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url(../assets/fonts/archivo-700.woff2) format('woff2')} @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/grotesk.woff2) format('woff2')} :root{ /* ============================================================ 1. SPACING — 8-POINT GRID Every margin, padding, and gap uses ONE of these. Nothing else. This is what makes spacing consistent across the whole site. ============================================================ */ --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 32px; --space-6: 48px; --space-7: 64px; --space-8: 96px; --space-9: 128px; /* Section vertical rhythm — one value, used by EVERY section. This alone fixes 80% of the "inconsistent spacing" problem. */ --section-y: clamp(64px, 9vw, 128px); /* Page gutter — the left/right breathing room, one value everywhere */ --gutter: clamp(24px, 5vw, 72px); /* Resting height of the fixed header (its padding + the logo). The hero is the only section the header sits on top of, so the hero's top padding is --section-y PLUS this — without it the mandate badge tucks under the header on short screens. Keep in sync if the header padding or logo height changes. Nothing else should use this. */ --header-h: 96px; /* Max content width — one value, defines the column everything lives in */ --content-max: 1240px; /* Max width of a single card in a fluid card grid. A grid row that isn't full would otherwise stretch one card across the whole column — this keeps a lone card the same size as it would be in a full row. */ --card-max: 400px; /* ============================================================ 2. TYPE SCALE — 7 SIZES, FIXED RATIO (1.25 major third) A real designer uses ~7 sizes total. These are they. Every piece of text picks ONE. No custom sizes. min = mobile, max = desktop. The vw middle is tuned so laptop and monitor stay close (the two-screen bug fix). ============================================================ */ --text-xs: clamp(11px, 0.7vw, 12px); /* micro-labels, eyebrows */ --text-sm: clamp(13px, 0.9vw, 14px); /* captions, fine print */ --text-base: clamp(15px, 1.0vw, 16px); /* body copy */ --text-lg: clamp(18px, 1.3vw, 20px); /* lead paragraphs */ --text-xl: clamp(22px, 1.8vw, 26px); /* card titles, sub-headings */ --text-2xl: clamp(28px, 3.0vw, 40px); /* section headings */ --text-3xl: clamp(38px, 5.0vw, 64px); /* hero / page title */ /* ---- TWO EXCEPTIONS TO THE SCALE ---- Both are deliberate and both are documented. Neither is page type, so neither belongs on the 7-size scale. Do not use them for anything else. The wordmark's sub-label ("HOLDINGS" under "KAAF"). It belongs to the logo lockup, not the text system — at --text-xs the tracking makes it wider than the "KAAF" it sits under and the lockup breaks. */ --text-lockup: 8px; /* The elevation drawing's labels. This value is in the SVG's own user units (viewBox 0 0 360 400), not CSS px — it scales with the drawing, so the page type scale genuinely does not apply to it. */ --text-draw: 8.5px; /* ---- LINE HEIGHTS ---- */ --leading-tight: 1.08; /* the hero display line — big, wants to be tight */ --leading-head: 1.14; /* section headings (h2/h3) — a hair more open than the hero so a two-line head stays easy to read */ --leading-snug: 1.35; /* sub-headings */ --leading-body: 1.7; /* paragraphs */ /* ---- FONT FAMILIES ---- */ --font-display: 'Fraunces', Georgia, serif; --font-body: 'Archivo', system-ui, sans-serif; --font-mono: 'Space Grotesk', ui-monospace, monospace; /* ---- WEIGHTS ---- */ --weight-normal: 400; --weight-medium: 500; --weight-semi: 600; --weight-bold: 700; /* ---- LETTER SPACING ---- */ --tracking-tight: -0.015em; /* large display type */ --tracking-normal: 0; --tracking-label: 0.2em; /* uppercase mono labels */ /* ============================================================ 3. COLOR — brand palette, pulled from the real logo ============================================================ */ --void: #0B0F0E; /* page background, near-black */ --ink: #101615; /* raised surfaces / cards */ --pine: #103D38; /* brand green (from the logo) */ --pine-deep: #0A2724; /* deep green panels */ --gold: #AD9C77; /* champagne — primary accent (from the logo) */ --gold-lift: #C9BC9C; /* lighter gold for hovers */ --gold-dim: rgba(173,156,119,0.42); --ivory: #F2EEE6; /* primary text on dark */ --paper: #EDEDE7; /* light-section background */ /* Text opacities on dark — tuned for WCAG AA contrast */ --text-strong: #F2EEE6; --text-muted: rgba(242,238,230,0.80); --text-faint: rgba(242,238,230,0.66); /* The inverse: muted text on a light surface (the availability dock is the only one). A tint of --void rather than a new grey — keeps the palette at champagne + pine + near-black. 4.6:1 on --ivory. */ --void-muted: rgba(11,15,14,0.62); /* Hairlines */ --line: rgba(173,156,119,0.20); --line-soft: rgba(242,238,230,0.09); /* The single non-brand colour on the site: a muted terracotta used ONLY as a status signal — an invalid form field, and a failed / expired dealer verification. It is not a decorative colour and must never be used as one; champagne would read as "approved" on the very screen that has to say the opposite, which is why the palette needs this one exception. */ --alert: #C25B4A; --alert-lift: #D98374; /* the same red lifted to 4.5:1 on --void for body text */ --alert-dim: rgba(194,91,74,0.38); /* its hairline / border tint */ --alert-wash: rgba(194,91,74,0.08); /* its panel fill */ /* ============================================================ 4. MOTION & RADIUS ============================================================ */ --ease: cubic-bezier(0.22, 0.68, 0, 1); --radius: 0px; /* this brand uses hard corners — keep it consistent */ --z-header: 400; --z-rail: 300; --z-dock: 350; --z-drawer: 500; --z-modal: 600; /* the certificate lightbox — above the drawer, above everything */ }