/* ============================================================
   Kopp Beratung — Colors & Typography (design tokens)
   Source: Kopp Beratung Design System v0.1
   Brand: regional · persönlich · authentisch · professionell
   "Aus der Region, für die Region."
   ============================================================ */

/* Self-hosted Instrument Sans (variable fonts, OFL — see fonts/OFL.txt) */
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/InstrumentSans-Variable.ttf") format("truetype-variations"),
       url("../fonts/InstrumentSans-Variable.ttf") format("truetype");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/InstrumentSans-Italic-Variable.ttf") format("truetype-variations"),
       url("../fonts/InstrumentSans-Italic-Variable.ttf") format("truetype");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- Brand colors ---------- */
  --kb-blue:        #38B6FF;   /* Primärblau  — logo, accents, icons, links */
  --kb-orange:      #FF914D;   /* Primärorange — CTA, highlights, underlines */
  --kb-navy:        #050B1F;   /* Basisfarbe   — headlines, body, footer */
  --kb-grey-50:     #F0F1F3;   /* Hellgrau     — section bg, cards, panels */
  --kb-grey-500:    #7B8190;   /* Mittelgrau   — secondary text */
  --kb-white:       #FFFFFF;

  /* Tonal extensions */
  --kb-blue-50:     #E6F5FE;
  --kb-blue-100:    #C7EAFE;
  --kb-blue-600:    #1E9BE5;
  --kb-blue-700:    #1782C2;
  --kb-orange-50:   #FFF1E6;
  --kb-orange-100:  #FFDFC4;
  --kb-orange-600:  #F0762B;
  --kb-orange-700:  #C75D17;
  --kb-navy-700:    #0E1632;
  --kb-navy-500:    #1A2240;
  --kb-grey-100:    #E4E6EB;
  --kb-grey-200:    #D2D5DC;
  --kb-grey-300:    #B5B9C3;
  --kb-grey-700:    #4F5564;

  /* ---------- Semantic colors ---------- */
  --color-bg:           var(--kb-white);
  --color-bg-soft:      var(--kb-grey-50);
  --color-bg-inverse:   var(--kb-navy);
  --color-surface:      var(--kb-white);
  --color-surface-soft: var(--kb-grey-50);

  --color-fg:           var(--kb-navy);
  --color-fg-muted:     var(--kb-grey-500);
  --color-fg-soft:      var(--kb-grey-700);
  --color-fg-inverse:   var(--kb-white);

  --color-accent:       var(--kb-orange);
  --color-accent-hover: var(--kb-orange-600);
  --color-link:         var(--kb-blue-600);
  --color-link-hover:   var(--kb-blue-700);

  --color-border:       var(--kb-grey-100);
  --color-border-strong:var(--kb-grey-200);
  --color-divider:      var(--kb-grey-100);

  /* CTA tokens */
  --btn-primary-bg:     var(--kb-orange);
  --btn-primary-fg:     var(--kb-white);
  --btn-primary-bg-hover:var(--kb-orange-600);
  --btn-secondary-bg:   var(--kb-navy);
  --btn-secondary-fg:   var(--kb-white);
  --btn-secondary-bg-hover: var(--kb-navy-500);
  --btn-ghost-fg:       var(--kb-navy);
  --btn-ghost-border:   var(--kb-grey-200);

  /* ---------- Typography ---------- */
  --font-sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", monospace;

  --fs-display: clamp(48px, 6vw, 80px);
  --fs-h1:      clamp(36px, 4.2vw, 56px);
  --fs-h2:      clamp(28px, 3vw, 40px);
  --fs-h3:      clamp(22px, 2.2vw, 28px);
  --fs-h4:      20px;
  --fs-lead:    20px;
  --fs-body:    17px;
  --fs-small:   15px;
  --fs-micro:   13px;
  --fs-eyebrow: 13px;

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --ls-display: -0.025em;
  --ls-heading: -0.015em;
  --ls-body:    -0.005em;
  --ls-eyebrow: 0.12em;

  /* ---------- Spacing (4px base) ---------- */
  --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:  56px; --sp-10: 72px; --sp-11: 96px; --sp-12: 128px;

  /* ---------- Radii ---------- */
  --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px;
  --r-xl: 20px; --r-2xl: 28px; --r-pill: 999px;

  /* ---------- Elevation / shadows ---------- */
  --shadow-xs: 0 1px 2px rgba(5, 11, 31, 0.04);
  --shadow-sm: 0 1px 3px rgba(5, 11, 31, 0.05), 0 1px 2px rgba(5, 11, 31, 0.04);
  --shadow-md: 0 4px 14px rgba(5, 11, 31, 0.06), 0 2px 4px rgba(5, 11, 31, 0.04);
  --shadow-lg: 0 14px 40px rgba(5, 11, 31, 0.08), 0 4px 10px rgba(5, 11, 31, 0.04);
  --shadow-xl: 0 30px 80px rgba(5, 11, 31, 0.12);
  --shadow-focus: 0 0 0 3px rgba(56, 182, 255, 0.35);

  /* ---------- Motion ---------- */
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   120ms; --dur-base:   200ms; --dur-slow:   320ms;

  /* ---------- Layout ---------- */
  --container:        1200px;
  --container-narrow: 880px;
  --container-wide:   1360px;
}

/* ============================================================
   Element defaults
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { font-family: var(--font-sans); color: var(--color-fg); background: var(--color-bg); scroll-behavior: smooth; }
body { margin: 0; font-size: var(--fs-body); line-height: var(--lh-relaxed);
       -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
       letter-spacing: var(--ls-body); background: var(--kb-white); }

h1, h2, h3, h4, h5, h6 { color: var(--color-fg); margin: 0 0 var(--sp-4);
       font-family: var(--font-display); letter-spacing: var(--ls-heading);
       text-wrap: balance; }
h1 { font-size: var(--fs-h1); font-weight: 700; line-height: var(--lh-tight);
     letter-spacing: var(--ls-display); }
h2 { font-size: var(--fs-h2); font-weight: 600; line-height: var(--lh-snug); }
h3 { font-size: var(--fs-h3); font-weight: 600; line-height: var(--lh-snug); }
h4 { font-size: var(--fs-h4); font-weight: 600; line-height: var(--lh-snug); }

p  { margin: 0 0 var(--sp-4); text-wrap: pretty; }
.lead { font-size: var(--fs-lead); line-height: var(--lh-relaxed); color: var(--color-fg-soft); }
small { font-size: var(--fs-small); }

a { color: var(--color-link); text-decoration: none;
    text-decoration-thickness: 2px; text-underline-offset: 3px;
    transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--color-link-hover); }

::selection { background: var(--kb-orange); color: var(--kb-white); }

.eyebrow {
  display: inline-block;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent);
}

.accent-underline {
  background-image: linear-gradient(transparent 60%, var(--kb-orange-100) 60%);
  padding: 0 0.05em;
}
.accent-underline--bold {
  background-image: linear-gradient(transparent 70%, var(--kb-orange) 70%);
  color: var(--kb-navy);
  padding: 0 0.1em;
}