/* * BoligKlar koncept-tokens — ét delt static token-lag for den live stak. * * Kanonisk kilde: bk-source/client/src/components/concept/tokens.ts (`c`) + * primitives.css. Løftet ud som linkbar CSS, så vanilla static-sider (resultat- * shells, A/B-varianter osv.) kan style i ren CSS uden bk-bundlen. * * NAMESPACE --bkc-* (bk-concept) bevidst valgt: home-front.css definerer allerede * --bk-ink (#1a1a1a) og --bk-green (#22bd4b) med ANDRE værdier end konceptet * (#141412 / #5E6B4F). Et delt --bk-*-lag ville kollidere; --bkc-* er kollisionsfrit * og kan sameksistere med enhver eksisterende side. * * Fonts: Athiti (200/300/400) + Space Mono (400/700) loades via Google Fonts i den * enkelte sides (samme link som forsiden bruger). Dette lag antager kun at de * er tilgængelige. */ :root { /* ── Palette (1:1 fra concept/tokens.ts `c`, låst koncept) ───────────────── */ --bkc-cream: #FBFAF7; /* sidebaggrund */ --bkc-ink: #141412; /* primær tekst */ --bkc-dark-green: #212A1D; /* mørke sektioner / hero */ --bkc-sage: #8C9A7B; /* dæmpet accent */ --bkc-terracotta: #9C5B36; /* opmærksomhed / negativ / advarsel */ --bkc-gold: #C7A46F; /* varm accent */ --bkc-tan: #EAD3AC; /* blød flade */ --bkc-green: #5E6B4F; /* brand-grøn — positiv / succes / aktiv */ --bkc-grey: #57564F; /* sekundær tekst */ --bkc-border: #E3E1DB; /* streger / rammer */ --bkc-light-section: #F2F0EA; /* lys sektionsflade / kort-fyld */ /* ── Afledte flader (blødt hvidt kort på cream-baggrund) ─────────────────── */ --bkc-card: #FFFFFF; --bkc-ink-soft: var(--bkc-grey); /* sekundær brødtekst */ --bkc-ink-mute: #8A8880; /* dæmpet/hint (koncept-neutralt) */ --bkc-line-soft: #EFEDE6; /* svag streg (lysere end border) */ --bkc-green-dark: #4A553F; /* grøn hover / dybere positiv */ --bkc-green-soft: #E8ECE1; /* grøn fyld/badge-baggrund */ --bkc-terracotta-dark: #7E4829; /* terracotta hover / dyb advarsel */ --bkc-terracotta-soft: #F0E4DA; /* terracotta fyld/badge-baggrund */ /* ── Typografi ───────────────────────────────────────────────────────────── */ --bkc-font-sans: Athiti, system-ui, -apple-system, Segoe UI, sans-serif; --bkc-font-mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* Konceptet har INGEN serif — display/overskrifter er Athiti (let vægt). */ --bkc-font-display: var(--bkc-font-sans); /* Space Mono-versal-label (eyebrow/caption) — jf. tokens.ts monoLabel(). */ --bkc-label-tracking: 0.14em; /* ── Radius (konvention fra site-shell.css) ──────────────────────────────── */ --bkc-r-card: 16px; --bkc-r-btn: 12px; --bkc-r-pill: 99px; /* ── Indholdsbredde (matcher tokens.ts container + Forside.tsx) ───────────── */ --bkc-container: min(1180px, 90vw); } /* * Side-wrapper — samme kontrakt som React-primitivernes .bk-concept: * sætter koncept-basisfont og neutraliserer arvet serif-tvang. Læg på resultat- * sidernes rod (fx ) for at få Athiti overalt. */ .bk-concept { font-family: var(--bkc-font-sans); color: var(--bkc-ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .bk-concept h1, .bk-concept h2, .bk-concept h3, .bk-concept h4 { font-family: var(--bkc-font-display); color: inherit; font-weight: 300; /* Athiti light — koncept-display */ } /* Space Mono versal-label (eyebrow) — genbrugelig helper. */ .bkc-label { font-family: var(--bkc-font-mono); font-weight: 400; letter-spacing: var(--bkc-label-tracking); text-transform: uppercase; }