/* tokens.css — design tokens for the DK finance sites network. Light-only. Brand slots are overridden by [data-brand] on . Contrast: every ink-on-fill pair used for TEXT is >= 4.5:1 (see COMPONENTS.md). */ /* Metric-matched fallback: local Arial scaled so its line box matches Montserrat's exactly. Without it the display=swap handover reflows the hero and the lead form below it (measured: CLS 0.042-0.045). Ratios measured in Chrome against the live Montserrat webfont: width x1.1107, fontBoundingBox ascent .97em / descent .25em. */ @font-face { font-family: "Montserrat Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans"); size-adjust: 111.07%; ascent-override: 87.33%; descent-override: 22.51%; line-gap-override: 0%; font-weight: 400 700; font-style: normal; } :root { color-scheme: light; /* ---- type ---------------------------------------------------------- */ --font-sans: "Montserrat", "Montserrat Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-num: var(--font-sans); /* modular scale 1.25 */ --fs-100: .75rem; /* 12 */ --fs-200: .8125rem; /* 13 — repex, disclosure, fine print */ --fs-300: .875rem; /* 14 — labels, meta */ --fs-400: 1rem; /* 16 — body */ --fs-500: 1.125rem; /* 18 — lead */ --fs-600: clamp(1.125rem, 1rem + .5vw, 1.25rem); /* h4 */ --fs-700: clamp(1.25rem, 1.1rem + .7vw, 1.5rem); /* h3 */ --fs-800: clamp(1.5rem, 1.25rem + 1.2vw, 1.9rem); /* h2 */ --fs-900: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem); /* h1 */ --lh-tight: 1.18; --lh-head: 1.25; --lh-body: 1.65; --fw-normal: 400; --fw-semi: 600; --fw-bold: 700; --tracking-caps: .06em; /* ---- space (4px scale) --------------------------------------------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 48px; --sp-10: 64px; --sp-11: 80px; /* ---- layout -------------------------------------------------------- */ --wrap: 1140px; --wrap-narrow: 760px; --prose: 68ch; --header-h: 64px; --gutter: 20px; /* ---- radii --------------------------------------------------------- */ --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-pill: 999px; /* ---- shadow (3 steps) ---------------------------------------------- */ --sh-1: 0 1px 2px rgba(16, 26, 48, .06), 0 1px 3px rgba(16, 26, 48, .08); --sh-2: 0 4px 10px rgba(16, 26, 48, .07), 0 2px 4px rgba(16, 26, 48, .05); --sh-3: 0 12px 32px rgba(16, 26, 48, .13), 0 3px 8px rgba(16, 26, 48, .07); /* ---- ink / surface / line ------------------------------------------ */ --c-ink: #16233a; /* body text — 13.2:1 on #fff */ --c-ink-2: #35435c; /* secondary text — 8.3:1 */ --c-ink-3: #5b6883; /* muted / fine print — 4.9:1 */ --c-ink-inv: #ffffff; --c-surface: #ffffff; --c-surface-2: #f4f6fa; /* repex / table stripe / muted blocks */ --c-surface-3: #e9edf5; /* chips, wells */ --c-line: #dbe1ec; --c-line-2: #c3ccdd; /* ---- semantic ------------------------------------------------------ */ --c-ok: #0a7a3d; --c-warn: #8a5300; --c-warn-bg: #fff4e0; --c-warn-line: #d9922b; --c-err: #b3261e; --c-err-bg: #fdecea; --c-focus: #1b6ef3; /* ---- brand slots (defaults = kreditoversigten) ---------------------- */ --c-brand: #2b3b65; --c-brand-2: #495983; --c-brand-ink: #ffffff; --c-brand-tint: #b5deee; --c-brand-tint-soft: #eaf6fb; --c-accent: #6fdbe8; --c-accent-ink: #0e2c3a; --c-cta: #0c8478; --c-cta-hover: #09665c; --c-cta-ink: #ffffff; /* hero */ --hero-from: #0d3a46; --hero-to: #1b2a4d; --hero-img: none; /* set inline per page: --hero-img:url(/assets/img/hero.jpg) */ --nav-ink: #d7e2f2; --nav-ink-hover: #ffffff; --dur: .15s; } /* kreditoversigten.com — navy wordmark, cyan check, teal CTA */ [data-brand="kreditoversigten"] { --c-brand: #2b3b65; --c-brand-2: #495983; --c-brand-ink: #ffffff; --c-brand-tint: #b5deee; --c-brand-tint-soft: #eaf6fb; --c-accent: #6fdbe8; /* decorative fill; text on it uses --c-accent-ink */ --c-accent-ink: #0e2c3a; /* 11.4:1 on #6fdbe8 */ --c-cta: #0c8478; /* white on this = 4.58:1 (the plan's #0f9d8f is 3.4:1 → decorative only) */ --c-cta-hover: #09665c; --c-cta-ink: #ffffff; --c-cta-glow: #0f9d8f; /* gradient stop / hover glow only, never behind text */ --hero-from: #0d3a46; --hero-to: #1b2a4d; } /* laanmigpenge.dk — white knockout logo on navy, orange CTA */ [data-brand="amyfinans"], [data-brand="laanmigpenge"] { --c-brand: #2b3b65; --c-brand-2: #1f2f59; --c-brand-ink: #ffffff; --c-brand-tint: #b5deee; --c-brand-tint-soft: #eaf6fb; --c-accent: #dd6420; /* white on this = 3.55:1 → never text-bearing at body size */ --c-accent-ink: #2a1103; /* 5.3:1 on #dd6420 */ --c-cta: #c2530f; /* darkened from #dd6420: white = 4.63:1 AA */ --c-cta-hover: #a1440c; /* 6.0:1 */ --c-cta-ink: #ffffff; --c-cta-glow: #dd6420; --c-ok: #00701f; /* green mark; #00a30e reserved for icon fills */ --hero-from: #12324a; --hero-to: #1f2f59; }