/* =============================================================
   KLARHEIT — Colors & Type
   Sourced from: KLARHEIT - Web Style Guide.pdf + halloklarheit.de
   ============================================================= */

/* ---------- FONTS ---------------------------------------- */

@font-face {
  font-family: "DIN Next LT Pro";
  src: url("../fonts/DINNextLTPro-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DIN Next LT Pro";
  src: url("../fonts/DINNextLTPro-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DIN Next LT Pro";
  src: url("../fonts/DINNextLTPro-Italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
/* DIN Next LT Pro Light — official cut, used for H1/H2 display sizes */
@font-face {
  font-family: "DIN Next LT Pro";
  src: url("../fonts/DINNextLTPro-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- COLOR — BASE ------------------------------- */
  /* From style guide */
  --k-black:      #000000;
  --k-ink:        #454545;  /* secondary body text / muted heading */
  --k-paper:      #F7F8F9;  /* off-white page background */
  --k-white:      #FFFFFF;

  /* ---------- COLOR — BRAND ACCENTS --------------------- */
  --k-mint:       #A5FFD2;  /* primary signal color (CTAs, highlights) */
  --k-mint-deep:  #5BDB9F;  /* hover / hand-pressed mint */

  /* Editorial palette — used for IG / organic content quote cards.
     Each row is a "pair": one background color + one text color.
     The set is iterative; add more pairs over time. */
  --k-butter:     #FAFA98;  /* soft warm yellow */
  --k-mint-bg:   #A5F6D2;  /* full-bleed mint (= brand mint) */
  --k-lavender:   #BC9FFD;  /* soft lavender */
  /* Inks that go on top */
  --k-royal:      #004AAD;  /* deep royal blue — paired with mint OR butter */
  --k-electric:   #2A2AE6;  /* electric blue — alternative ink on butter */

  /* Supporting warm naturals — used in photography & soft tints */
  --k-blush:      #F4C9CC;  /* notebook pink */
  --k-stone:      #E9E6E0;  /* photographic stone */
  --k-sand:       #D7CFC2;

  /* ---------- COLOR — SEMANTIC -------------------------- */
  --fg-1:         var(--k-black);   /* primary text */
  --fg-2:         var(--k-ink);     /* secondary text */
  --fg-3:         #7A7A7A;          /* muted */
  --fg-on-dark:   var(--k-white);

  --bg-1:         var(--k-paper);   /* default page */
  --bg-2:         var(--k-white);   /* card / surface */
  --bg-inverse:   var(--k-black);

  --accent:       var(--k-mint);
  --accent-fg:    var(--k-black);   /* mint is light → text stays black */
  --accent-hover: var(--k-mint-deep);

  --border:       #E5E5E5;
  --border-strong:#111111;

  /* ---------- TYPE FAMILIES ----------------------------- */
  --font-sans: "DIN Next LT Pro", "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---------- TYPE SCALE -------------------------------- */
  /* From style guide page 1. We follow the spec exactly. */
  --h1-size: 120px;  --h1-lh: 119px;  --h1-weight: 300;
  --h2-size: 70px;   --h2-lh: 70px;   --h2-weight: 300;
  --h3-size: 58px;   --h3-lh: 60px;   --h3-weight: 500;
  --h4-size: 44px;   --h4-lh: 52px;   --h4-weight: 500;
  --h5-size: 38px;   --h5-lh: 42px;   --h5-weight: 500;
  --h6-size: 30px;   --h6-lh: 36px;   --h6-weight: 500;
  --h7-size: 24px;   --h7-lh: 32px;   --h7-weight: 400;

  --p-lg-size: 22px;  --p-lg-lh: 32px;
  --p-md-size: 18px;  --p-md-lh: 28px;
  --p-sm-size: 16px;  --p-sm-lh: 24px;
  --p-xs-size: 14px;  --p-xs-lh: 20px;

  --eyebrow-size: 14px;  --eyebrow-tracking: 0.14em;  --eyebrow-weight: 500;

  /* ---------- SPACING & RHYTHM -------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ---------- RADII ------------------------------------- */
  /* Style guide: "Border Rundet 25px" for buttons (capsule-leaning) */
  --radius-pill: 999px;
  --radius-btn:  25px;
  --radius-card: 16px;
  --radius-sm:   8px;
  --radius-md:   12px;

  /* ---------- SHADOW (used sparingly) ------------------- */
  --shadow-soft:  0 1px 2px rgba(0,0,0,0.04), 0 6px 24px rgba(0,0,0,0.06);
  --shadow-card:  0 2px 6px rgba(0,0,0,0.05), 0 18px 40px rgba(0,0,0,0.08);
  --shadow-press: inset 0 0 0 1px rgba(0,0,0,0.08);

  /* ---------- MOTION ------------------------------------ */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);   /* calm exit */
  --ease-in:  cubic-bezier(0.55, 0, 1, 0.45);
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 480ms;
}

/* =============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================= */

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

h1, .h1 {
  font-size: var(--h1-size); line-height: var(--h1-lh);
  font-weight: var(--h1-weight);
  letter-spacing: -0.01em;
  margin: 0;
}
h2, .h2 {
  font-size: var(--h2-size); line-height: var(--h2-lh);
  font-weight: var(--h2-weight);
  letter-spacing: -0.005em;
  margin: 0;
}
h3, .h3 {
  font-size: var(--h3-size); line-height: var(--h3-lh);
  font-weight: var(--h3-weight);
  margin: 0;
}
h4, .h4 {
  font-size: var(--h4-size); line-height: var(--h4-lh);
  font-weight: var(--h4-weight);
  margin: 0;
}
h5, .h5 {
  font-size: var(--h5-size); line-height: var(--h5-lh);
  font-weight: var(--h5-weight);
  margin: 0;
}
h6, .h6 {
  font-size: var(--h6-size); line-height: var(--h6-lh);
  font-weight: var(--h6-weight);
  margin: 0;
}
.h7 {
  font-size: var(--h7-size); line-height: var(--h7-lh);
  font-weight: var(--h7-weight);
}

p, .p {
  font-size: var(--p-md-size); line-height: var(--p-md-lh);
  font-weight: 400;
  margin: 0 0 1em 0;
  text-wrap: pretty;
}
.p-lg { font-size: var(--p-lg-size); line-height: var(--p-lg-lh); }
.p-sm { font-size: var(--p-sm-size); line-height: var(--p-sm-lh); }
.p-xs { font-size: var(--p-xs-size); line-height: var(--p-xs-lh); }

.eyebrow {
  font-size: var(--eyebrow-size);
  letter-spacing: var(--eyebrow-tracking);
  font-weight: var(--eyebrow-weight);
  text-transform: uppercase;
}

em, i { font-style: italic; }
strong, b { font-weight: 500; }

a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

::selection { background: var(--k-mint); color: var(--k-black); }