/* =========================================================
   HKE Lausitz — Design Tokens (Relaunch)
   Last updated: 2026-05-21
   ========================================================= */

/* Schriften werden lokal über fonts.css geladen (DSGVO, kein Google-CDN). */

:root {
  /* ---------- Color: Brand ---------- */
  --hke-petrol-900: #122E38;   /* deepest, headings on light */
  --hke-petrol-800: #173E4C;
  --hke-petrol-700: #1F4E5F;   /* PRIMARY — brand petrol */
  --hke-petrol-600: #2A6776;
  --hke-petrol-500: #3F8595;
  --hke-petrol-300: #8BB6BF;
  --hke-petrol-200: #B9D2D7;
  --hke-petrol-100: #DEEAEC;
  --hke-petrol-050: #EFF5F6;

  --hke-copper-700: #A95F33;
  --hke-copper-600: #C97B4A;   /* SECONDARY — copper / terracotta */
  --hke-copper-500: #D89370;
  --hke-copper-300: #E8BFA4;
  --hke-copper-100: #F4E1D2;
  --hke-copper-050: #FBF3EC;

  /* ---------- Color: Surface ---------- */
  --hke-sand-050: #FBF8F3;     /* lightest surface */
  --hke-sand-100: #F6F1EA;     /* DEFAULT page background */
  --hke-sand-200: #ECE4D6;
  --hke-sand-300: #DCD2C0;

  --hke-paper:    #FFFFFF;     /* card / elevated surface */

  /* ---------- Color: Ink (text / lines) ---------- */
  --hke-ink-900:  #1A1A1A;     /* primary text */
  --hke-ink-700:  #3B3B3B;
  --hke-ink-500:  #6B6B6B;     /* secondary text */
  --hke-ink-400:  #8E8E8E;     /* tertiary / captions */
  --hke-ink-300:  #B5B5B5;
  --hke-ink-200:  #D6D4D0;     /* hairline on sand */
  --hke-ink-100:  #E8E5DE;     /* divider on sand */

  /* ---------- Color: Semantic ---------- */
  --hke-success:  #2F7A55;
  --hke-warning:  #C28C2B;
  --hke-error:    #B33A2B;
  --hke-info:     var(--hke-petrol-700);

  /* ---------- Aliases ---------- */
  --fg:           var(--hke-ink-900);
  --fg-muted:     var(--hke-ink-500);
  --fg-subtle:    var(--hke-ink-400);
  --fg-inverse:   var(--hke-sand-100);
  --bg:           var(--hke-sand-100);
  --bg-elevated:  var(--hke-paper);
  --bg-inverse:   var(--hke-petrol-700);
  --border:       var(--hke-ink-200);
  --border-strong:var(--hke-ink-300);
  --accent:       var(--hke-petrol-700);
  --accent-warm:  var(--hke-copper-600);

  /* ---------- Type: Family ---------- */
  /* Headlines: substituted with Inter Tight (closest open-source match to "General Sans" / "Söhne"). FLAG — swap when you have a licensed display family. */
  --font-display: "Inter Tight", "General Sans", "Söhne", "Inter", system-ui, sans-serif;
  --font-body:    "Inter", "Source Sans 3", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---------- Type: Scale ---------- */
  --fs-display:  72px;   /* hero only */
  --fs-h1:       48px;
  --fs-h2:       36px;
  --fs-h3:       24px;
  --fs-h4:       20px;
  --fs-body-lg:  18px;
  --fs-body:     16px;
  --fs-body-sm:  14px;
  --fs-caption:  13px;
  --fs-micro:    12px;

  --lh-tight:    1.08;
  --lh-snug:     1.22;
  --lh-normal:   1.55;
  --lh-loose:    1.7;

  --tracking-tight: -0.018em;
  --tracking-snug:  -0.008em;
  --tracking-flat:  0;
  --tracking-wide:  0.06em;   /* eyebrows / labels */

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

  /* ---------- Radius ---------- */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;        /* DEFAULT — buttons, inputs, cards */
  --r-lg: 12px;       /* large cards */
  --r-xl: 20px;       /* feature panels */
  --r-pill: 999px;    /* used very sparingly (badge / tag) */

  /* ---------- Elevation ---------- */
  --shadow-1: 0 1px 0 rgba(26,26,26,.04), 0 1px 2px rgba(26,26,26,.04);
  --shadow-2: 0 1px 2px rgba(26,26,26,.05), 0 4px 12px rgba(26,26,26,.06);
  --shadow-3: 0 2px 4px rgba(26,26,26,.04), 0 12px 28px rgba(26,26,26,.08);
  --shadow-inset: inset 0 0 0 1px var(--hke-ink-100);

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(.22, .61, .36, 1);
  --ease-out:      cubic-bezier(.16, 1, .3, 1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   400ms;

  /* ---------- Layout ---------- */
  --container:    1200px;
  --grid-cols:    12;
  --grid-gutter:  24px;
  --container-pad: 32px;
}

/* =========================================================
   Semantic Element Defaults
   ========================================================= */

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

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--hke-petrol-900);
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--hke-petrol-900);
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  margin: 0;
}
p { margin: 0 0 var(--s-4) 0; max-width: 64ch; text-wrap: pretty; }
small, .caption {
  font-size: var(--fs-caption);
  color: var(--fg-muted);
}
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--hke-copper-700);
}
code, kbd, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
a {
  color: var(--hke-petrol-700);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--hke-petrol-900); }

hr {
  border: 0;
  border-top: 1px solid var(--hke-ink-100);
  margin: var(--s-6) 0;
}