/* ============================================================
KIGIPS GmbH — Color & Type Foundations
Swiss plastering / drywall / facade trade. Brand color: logo blue.
============================================================ */
/* Fonts loaded via Google Fonts CDN — see README (substitution flagged).
Import in HTML :
*/
:root {
/* ---- Brand / Primary (logo blue) ---- */
--kg-blue: #1C6BB5; /* primary — sampled from logo */
--kg-blue-600: #175C9E; /* hover */
--kg-blue-700: #124B82; /* pressed / deep */
--kg-blue-800: #0E3A66; /* darkest, footers */
--kg-blue-tint: #EAF2FA; /* light fill / section bg */
--kg-blue-tint-2: #D7E7F5; /* slightly deeper tint */
/* ---- Neutrals (cool, plaster-gray leaning) ---- */
--kg-white: #FFFFFF;
--kg-paper: #F6F8FA; /* off-white section bg */
--kg-mist: #EDF1F5; /* card / input fill */
--kg-line: #DCE3EA; /* hairline borders */
--kg-line-strong: #C3CDD7;
--kg-slate-500: #607387; /* secondary text */
--kg-slate-700: #36475A; /* body text */
--kg-ink: #16222E; /* headings / near-black */
/* ---- Semantic ---- */
--kg-bg: var(--kg-white);
--kg-fg1: var(--kg-ink); /* primary text */
--kg-fg2: var(--kg-slate-700);/* body text */
--kg-fg3: var(--kg-slate-500);/* muted text */
--kg-accent: var(--kg-blue);
--kg-accent-fg: var(--kg-white);
--kg-success: #2E8B57;
--kg-error: #C0392B;
/* ---- Type families ---- */
--kg-font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
--kg-font-body: "Mulish", "Helvetica Neue", Arial, sans-serif;
/* ---- Type scale (px / line-height) ---- */
--kg-text-eyebrow: 0.8125rem; /* 13px — uppercase label above titles */
--kg-text-sm: 0.9375rem; /* 15px */
--kg-text-base: 1.0625rem; /* 17px body */
--kg-text-lg: 1.25rem; /* 20px lead */
--kg-text-h3: 1.5rem; /* 24px */
--kg-text-h2: 2.125rem; /* 34px */
--kg-text-h1: 3rem; /* 48px */
--kg-text-display: 4rem; /* 64px hero */
/* ---- Radii ---- */
--kg-radius-sm: 4px;
--kg-radius: 8px;
--kg-radius-lg: 14px;
--kg-radius-pill: 999px;
/* ---- Spacing scale ---- */
--kg-sp-1: 4px; --kg-sp-2: 8px; --kg-sp-3: 12px; --kg-sp-4: 16px;
--kg-sp-5: 24px; --kg-sp-6: 32px; --kg-sp-7: 48px; --kg-sp-8: 64px;
--kg-sp-9: 96px; --kg-sp-10: 128px;
/* ---- Shadows / elevation ---- */
--kg-shadow-sm: 0 1px 2px rgba(16,34,46,0.06), 0 1px 1px rgba(16,34,46,0.04);
--kg-shadow: 0 4px 16px rgba(16,34,46,0.08);
--kg-shadow-lg: 0 18px 48px rgba(16,34,46,0.14);
--kg-shadow-blue:0 12px 30px rgba(28,107,181,0.28);
/* ---- Motion ---- */
--kg-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
--kg-dur: 220ms;
}
/* ============================================================
Base element styles
============================================================ */
.kg {
color: var(--kg-fg1);
font-family: var(--kg-font-body);
font-size: var(--kg-text-base);
line-height: 1.65;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.kg-eyebrow {
font-family: var(--kg-font-body);
font-size: var(--kg-text-eyebrow);
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--kg-accent);
}
.kg-h1, h1.kg {
font-family: var(--kg-font-display);
font-size: var(--kg-text-h1);
font-weight: 800;
line-height: 1.05;
letter-spacing: -0.01em;
color: var(--kg-fg1);
text-wrap: balance;
}
.kg-display {
font-family: var(--kg-font-display);
font-size: var(--kg-text-display);
font-weight: 800;
line-height: 1.0;
letter-spacing: -0.02em;
}
.kg-h2 {
font-family: var(--kg-font-display);
font-size: var(--kg-text-h2);
font-weight: 700;
line-height: 1.12;
letter-spacing: -0.005em;
color: var(--kg-fg1);
text-wrap: balance;
}
.kg-h3 {
font-family: var(--kg-font-display);
font-size: var(--kg-text-h3);
font-weight: 700;
line-height: 1.2;
color: var(--kg-fg1);
}
.kg-lead {
font-size: var(--kg-text-lg);
line-height: 1.55;
color: var(--kg-fg2);
font-weight: 400;
}
.kg-p {
font-size: var(--kg-text-base);
line-height: 1.7;
color: var(--kg-fg2);
text-wrap: pretty;
}
.kg-small {
font-size: var(--kg-text-sm);
color: var(--kg-fg3);
}