/* ============================================================
   KenBes Design System — Tokens
   Colour · Type · Spacing · Radii · Shadows · Motion
   ============================================================ */

/* -------- Google Fonts (substitutes — see README) ---------- */
/* @import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,600;0,700;0,800;0,900;1,700;1,800;1,900&family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap'); */

/* ============================================================
   LOKALE SCHRIFTEN (DSGVO-konform, kein Google Fonts Request)
   ============================================================ */

/* --- Manrope (Fließtext & Buttons) --- */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/manrope-v20-latin_latin-ext-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/manrope-v20-latin_latin-ext-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/manrope-v20-latin_latin-ext-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/manrope-v20-latin_latin-ext-700.woff2') format('woff2');
}

/* --- Barlow Condensed (Headlines, Preise & Zahlen) --- */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/barlow-condensed-v13-latin_latin-ext-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/barlow-condensed-v13-latin_latin-ext-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/barlow-condensed-v13-latin_latin-ext-700italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/barlow-condensed-v13-latin_latin-ext-800.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/barlow-condensed-v13-latin_latin-ext-800italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/barlow-condensed-v13-latin_latin-ext-900.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/barlow-condensed-v13-latin_latin-ext-900italic.woff2') format('woff2');
}

/* --- JetBrains Mono (Code, Badges & Tacho-Zähler) --- */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-v24-latin_latin-ext-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-v24-latin_latin-ext-500.woff2') format('woff2');
}

:root {
  /* ============================== COLOUR ==============================
     The palette is intentionally tight: one accent (KenBes Yellow),
     one ink (Black), one base (White) and a 6-step neutral ramp.
     ----------------------------------------------------------------- */

  /* Brand */
  --kb-yellow:        #F5C518;   /* primary accent, CTAs, key numerals */
  --kb-yellow-hover:  #FFD83A;   /* hover state of yellow surfaces */
  --kb-yellow-press:  #E0B400;   /* active / pressed */
  --kb-yellow-soft:   #FEF6D3;   /* very rare — for highlight backgrounds */

  --kb-black:         #0A0A0A;   /* ink, dark sections, hero panel */
  --kb-black-90:      #1A1A1A;
  --kb-black-70:      #4A4A4A;

  /* Neutrals (warm-cool middle) */
  --kb-fg-1:          #0A0A0A;   /* primary text */
  --kb-fg-2:          #4A4A4A;   /* secondary text, body on white */
  --kb-fg-3:          #6E6E6E;   /* tertiary, captions, helper */
  --kb-fg-4:          #9A9A95;   /* disabled, placeholders */

  --kb-bg-1:          #FFFFFF;   /* page base */
  --kb-bg-2:          #F6F6F4;   /* surface alt, section bands */
  --kb-bg-3:          #ECECE8;   /* deeper alt, hairline contrast */

  --kb-border-1:      #E6E6E2;   /* default hairline */
  --kb-border-2:      #D3D3CD;   /* stronger hairline */
  --kb-border-ink:    #0A0A0A;   /* emphasis on dark */

  /* Semantic */
  --kb-success:       #1E7F4F;
  --kb-warning:       #C98A12;
  --kb-danger:        #C0392B;
  --kb-info:          #2A5DB0;

  /* Inverse (used on dark hero blocks) */
  --kb-on-dark-1:     #FFFFFF;
  --kb-on-dark-2:     #C9C9C4;
  --kb-on-dark-3:     #8B8B85;

  /* ============================== TYPE ============================== */
  --kb-font-display:  'Barlow Condensed', 'Oswald', 'Inter Tight', system-ui, sans-serif;
  --kb-font-body:     'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --kb-font-mono:     'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Fluid type scale (clamp-based — works 360 → 1440+ px) */
  --kb-fs-display:    clamp(56px, 7.5vw, 112px);  /* hero */
  --kb-fs-h1:         clamp(40px, 4.5vw, 72px);
  --kb-fs-h2:         clamp(32px, 3.2vw, 52px);
  --kb-fs-h3:         clamp(24px, 2.2vw, 32px);
  --kb-fs-h4:         20px;
  --kb-fs-lg:         18px;
  --kb-fs-body:       16px;
  --kb-fs-sm:         14px;
  --kb-fs-xs:         12px;

  --kb-lh-tight:      0.92;
  --kb-lh-display:    0.96;
  --kb-lh-heading:    1.08;
  --kb-lh-body:       1.55;

  --kb-tracking-tight:    -0.01em;
  --kb-tracking-normal:    0;
  --kb-tracking-caps:      0.08em;
  --kb-tracking-caps-loose: 0.16em;

  /* ============================== SPACING ============================ */
  --kb-s-0:   0;
  --kb-s-1:   4px;
  --kb-s-2:   8px;
  --kb-s-3:   12px;
  --kb-s-4:   16px;
  --kb-s-5:   24px;
  --kb-s-6:   32px;
  --kb-s-7:   48px;
  --kb-s-8:   64px;
  --kb-s-9:   96px;
  --kb-s-10: 128px;

  --kb-content-max:   1240px;
  --kb-gutter:        clamp(20px, 4vw, 64px);
  --kb-header-h:      72px;

  /* ============================== RADII ============================== */
  --kb-r-sm:  4px;
  --kb-r-md:  8px;
  --kb-r-lg:  12px;
  --kb-r-pill: 999px; /* permitted only on tags / chips */

  /* ============================== SHADOWS ============================ */
  --kb-shadow-1: 0 1px 2px rgba(10,10,10,0.04), 0 1px 1px rgba(10,10,10,0.06);
  --kb-shadow-2: 0 8px 24px rgba(10,10,10,0.08), 0 2px 6px rgba(10,10,10,0.05);
  --kb-shadow-3: 0 24px 48px rgba(10,10,10,0.12), 0 4px 12px rgba(10,10,10,0.06);
  --kb-shadow-focus: 0 0 0 3px rgba(245,197,24,0.45);

  /* ============================== MOTION ============================= */
  --kb-ease:           cubic-bezier(0.2, 0.8, 0.2, 1);
  --kb-ease-in:        cubic-bezier(0.4, 0, 1, 1);
  --kb-ease-out:       cubic-bezier(0, 0, 0.2, 1);
  --kb-dur-fast:       120ms;
  --kb-dur-base:       200ms;
  --kb-dur-slow:       320ms;
}

/* ============================================================
   Semantic element styles
   ============================================================ */

html {
  font-family: var(--kb-font-body);
  font-size: var(--kb-fs-body);
  line-height: var(--kb-lh-body);
  color: var(--kb-fg-1);
  background: var(--kb-bg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { margin: 0; }

h1, h2, h3, h4 {
  font-family: var(--kb-font-display);
  font-weight: 800;
  font-style: italic;
  line-height: var(--kb-lh-heading);
  letter-spacing: var(--kb-tracking-tight);
  text-transform: uppercase;
  color: var(--kb-fg-1);
  margin: 0;
}

.kb-display {
  font-family: var(--kb-font-display);
  font-weight: 900;
  font-style: italic;
  font-size: var(--kb-fs-display);
  line-height: var(--kb-lh-display);
  letter-spacing: -0.015em;
  text-transform: uppercase;
}

h1 { font-size: var(--kb-fs-h1); }
h2 { font-size: var(--kb-fs-h2); }
h3 { font-size: var(--kb-fs-h3); font-weight: 700; }
h4 { font-size: var(--kb-fs-h4); font-weight: 700; letter-spacing: 0; }

p  { font-size: var(--kb-fs-body); line-height: var(--kb-lh-body); color: var(--kb-fg-2); margin: 0; }
.kb-lead { font-size: var(--kb-fs-lg); color: var(--kb-fg-2); line-height: 1.5; }
.kb-small { font-size: var(--kb-fs-sm); color: var(--kb-fg-3); }
.kb-eyebrow {
  font-family: var(--kb-font-body);
  font-size: var(--kb-fs-xs);
  font-weight: 700;
  letter-spacing: var(--kb-tracking-caps);
  text-transform: uppercase;
  color: var(--kb-fg-3);
}
.kb-mono { font-family: var(--kb-font-mono); font-size: var(--kb-fs-sm); }

a { color: inherit; text-decoration: none; }
a.kb-link {
  color: var(--kb-fg-1);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
  text-decoration-color: var(--kb-yellow);
  transition: text-decoration-color var(--kb-dur-base) var(--kb-ease);
}
a.kb-link:hover { text-decoration-color: var(--kb-fg-1); }

::selection { background: var(--kb-yellow); color: var(--kb-fg-1); }

*:focus-visible {
  outline: none;
  box-shadow: var(--kb-shadow-focus);
  border-radius: var(--kb-r-sm);
}