/* kollex Design System – Farben, Typografie, Abstände (Quelle: kollex Design System, colors_and_type.css) */
/* ============================================================
   Kollex Design System — Color & Type Tokens
   ============================================================
   Source: kollex Brand Book (2023), color & typography sheets.
   Radikal is the official headline face (commercial license).
   Licensed .otf files dropped into /fonts.
   ============================================================ */

/* ---------- Radikal (brand display face) — licensed OTFs ---------- */
@font-face { font-family: "Radikal"; font-style: normal; font-weight: 300; font-display: swap; src: url("/fonts/Radikal-Light.otf") format("opentype"); }
@font-face { font-family: "Radikal"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/Radikal-Medium.otf") format("opentype"); }
@font-face { font-family: "Radikal"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/Radikal-Bold.otf") format("opentype"); }

/* ---------- Barlow (brand body face) — local TTFs ---------- */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 100; font-display: swap; src: url("/fonts/Barlow-Thin.ttf")        format("truetype"); }
@font-face { font-family: "Barlow"; font-style: italic; font-weight: 100; font-display: swap; src: url("/fonts/Barlow-ThinItalic.ttf")  format("truetype"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 200; font-display: swap; src: url("/fonts/Barlow-ExtraLight.ttf")  format("truetype"); }
@font-face { font-family: "Barlow"; font-style: italic; font-weight: 200; font-display: swap; src: url("/fonts/Barlow-ExtraLightItalic.ttf") format("truetype"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 300; font-display: swap; src: url("/fonts/Barlow-Light.ttf")       format("truetype"); }
@font-face { font-family: "Barlow"; font-style: italic; font-weight: 300; font-display: swap; src: url("/fonts/Barlow-LightItalic.ttf") format("truetype"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/Barlow-Regular.ttf")     format("truetype"); }
@font-face { font-family: "Barlow"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/Barlow-RegularItalic.ttf") format("truetype"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/Barlow-Medium.ttf")      format("truetype"); }
@font-face { font-family: "Barlow"; font-style: italic; font-weight: 500; font-display: swap; src: url("/fonts/Barlow-MediumItalic.ttf") format("truetype"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/Barlow-SemiBold.ttf")    format("truetype"); }
@font-face { font-family: "Barlow"; font-style: italic; font-weight: 600; font-display: swap; src: url("/fonts/Barlow-SemiBoldItalic.ttf") format("truetype"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/Barlow-Bold.ttf")        format("truetype"); }
@font-face { font-family: "Barlow"; font-style: italic; font-weight: 700; font-display: swap; src: url("/fonts/Barlow-BoldItalic.ttf")  format("truetype"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 800; font-display: swap; src: url("/fonts/Barlow-ExtraBold.ttf")   format("truetype"); }
@font-face { font-family: "Barlow"; font-style: italic; font-weight: 800; font-display: swap; src: url("/fonts/Barlow-ExtraBoldItalic.ttf") format("truetype"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 900; font-display: swap; src: url("/fonts/Barlow-Black.ttf")       format("truetype"); }
@font-face { font-family: "Barlow"; font-style: italic; font-weight: 900; font-display: swap; src: url("/fonts/Barlow-BlackItalic.ttf") format("truetype"); }

:root {
  /* ---------- Brand colors — primary ---------- */
  --kx-green:        #41BD99;   /* kollex Green */
  --kx-bluegrey:     #1D2A43;   /* kollex Bluegrey — primary text */
  --kx-black:        #1D1F20;   /* kollex Black — logo, lines, icon outlines */
  --kx-white:        #FFFFFF;

  /* ---------- Brand colors — secondary (accents) ---------- */
  --kx-melon:        #FFC7C8;
  --kx-plum:         #471DAA;

  /* ---------- Brand colors — tertiary (UI feedback) ---------- */
  --kx-bumblebee:    #FFDC07;   /* warning */
  --kx-poppy:        #E51313;   /* error / destructive */

  /* ---------- 20% step gradations ---------- */
  /* kollex Green */
  --kx-green-80:     #67CAAD;
  --kx-green-60:     #8DD7C2;
  --kx-green-40:     #B3E5D6;
  --kx-green-20:     #D9F2EB;

  /* kollex Bluegrey */
  --kx-bluegrey-80:  #4A5469;
  --kx-bluegrey-60:  #777F8F;
  --kx-bluegrey-40:  #A4A9B4;
  --kx-bluegrey-20:  #D2D4DA;
  --kx-bluegrey-05:  #F4F4F6;   /* very light surface, used sparingly */

  /* Melon */
  --kx-melon-80:     #FFD3D3;
  --kx-melon-60:     #FFDFE0;
  --kx-melon-40:     #FFEBEC;
  --kx-melon-20:     #FFF7F7;

  /* Plum */
  --kx-plum-80:      #6C4ABB;
  --kx-plum-60:      #9077CC;
  --kx-plum-40:      #B5A4DD;
  --kx-plum-20:      #DAD2EE;

  /* Bumble Bee — only 40% & 20% per brand book */
  --kx-bumblebee-40: #FFEE9C;
  --kx-bumblebee-20: #FFF7CD;

  /* Poppy Red — no gradations per brand book */

  /* ---------- Semantic surfaces & ink ---------- */
  --bg:              var(--kx-white);
  --bg-muted:        var(--kx-bluegrey-05);
  --bg-inverse:      var(--kx-bluegrey);
  --surface-card:    var(--kx-white);
  --surface-sunken:  var(--kx-bluegrey-05);

  --fg:              var(--kx-bluegrey);     /* primary text */
  --fg-muted:        var(--kx-bluegrey-80);  /* secondary text */
  --fg-subtle:       var(--kx-bluegrey-60);  /* tertiary / placeholders */
  --fg-on-brand:     var(--kx-white);
  --fg-on-light:     var(--kx-bluegrey);

  --accent:          var(--kx-green);
  --accent-hover:    #38A887;
  --accent-press:    #2F9374;
  --accent-soft:     var(--kx-green-20);

  --border:          var(--kx-bluegrey-20);
  --border-strong:   var(--kx-bluegrey-40);
  --divider:         var(--kx-bluegrey-05);

  --success:         var(--kx-green);
  --warning:         var(--kx-bumblebee);
  --danger:          var(--kx-poppy);
  --info:            var(--kx-plum);

  /* ---------- Typography — families ---------- */
  /* Radikal is now the licensed headline face; Hanken Grotesk kept only as a fallback. */
  --font-display: "Radikal", "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  /* Barlow ships on Google Fonts; brand spec lists Verdana as fallback */
  --font-body:    "Barlow", "Verdana", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---------- Typography — scale (digital, built around 17px body) ---------- */
  --fs-display-xl:  64px;   /* hero — Radikal Medium */
  --fs-display-lg:  48px;
  --fs-display-md:  32px;
  --fs-h1:          28px;   /* Radikal Medium */
  --fs-h2:          24px;
  --fs-h3:          20px;
  --fs-subhead:     26px;   /* Radikal Light — long subheads under hero */
  --fs-intro:       17px;   /* Barlow Bold */
  --fs-body:        17px;   /* Barlow Regular */
  --fs-body-sm:     15px;
  --fs-caption:     13px;
  --fs-overline:    12px;

  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;

  --ls-tight:   -0.01em;
  --ls-normal:  0;
  --ls-wide:    0.04em;     /* used on overlines / small caps replacements */

  /* ---------- Spacing (4px base) ---------- */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-8:   32px;
  --sp-10:  40px;
  --sp-12:  48px;
  --sp-16:  64px;
  --sp-20:  80px;
  --sp-24:  96px;

  /* ---------- Radii ---------- */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   20px;
  --r-pill: 999px;
  /* The kollex logo container uses ~22% radius — drop/squircle feel */
  --r-tile: 22%;

  /* ---------- Elevation ---------- */
  --shadow-1: 0 1px 2px rgba(29, 42, 67, 0.06), 0 1px 1px rgba(29, 42, 67, 0.04);
  --shadow-2: 0 4px 12px rgba(29, 42, 67, 0.08);
  --shadow-3: 0 12px 32px rgba(29, 42, 67, 0.12);
  --shadow-focus: 0 0 0 3px rgba(65, 189, 153, 0.35);

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emph:     cubic-bezier(0.2, 0, 0, 1.2);
  --dur-fast:      120ms;
  --dur-base:      200ms;
  --dur-slow:      320ms;
}

/* ============================================================
   Semantic element styles — opt-in via .kx-prose or scoped use
   ============================================================ */

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

.kx-display-xl,
.kx-h1, .kx-h2, .kx-h3,
.kx-subhead {
  font-family: var(--font-display);
  color: var(--fg);
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}

.kx-display-xl { font-size: var(--fs-display-xl); font-weight: 500; line-height: var(--lh-tight); }
.kx-display-lg { font-size: var(--fs-display-lg); font-weight: 500; line-height: var(--lh-tight); font-family: var(--font-display); }
.kx-display-md { font-size: var(--fs-display-md); font-weight: 500; line-height: var(--lh-snug);  font-family: var(--font-display); }
.kx-h1         { font-size: var(--fs-h1);        font-weight: 500; line-height: var(--lh-snug); }
.kx-h2         { font-size: var(--fs-h2);        font-weight: 500; line-height: var(--lh-snug); }
h2 { font-size: 32px !important; }
.kx-h3         { font-size: var(--fs-h3);        font-weight: 600; line-height: var(--lh-snug); }
.kx-subhead    { font-size: var(--fs-subhead);   font-weight: 300; line-height: var(--lh-snug); }

.kx-intro      { font-family: var(--font-body); font-size: var(--fs-intro); font-weight: 700; line-height: var(--lh-normal); }
.kx-body       { font-family: var(--font-body); font-size: var(--fs-body); font-weight: 400; line-height: var(--lh-relaxed); }
.kx-body-sm    { font-family: var(--font-body); font-size: var(--fs-body-sm); font-weight: 400; line-height: var(--lh-normal); }
.kx-caption    { font-family: var(--font-body); font-size: var(--fs-caption); color: var(--fg-muted); }
.kx-overline   { font-family: var(--font-display); font-size: var(--fs-overline); font-weight: 700; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--fg); }

/* Per brand spec: body/headlines are flush-left, ragged-right */
.kx-prose { text-align: left; }
.kx-prose p { margin: 0 0 var(--sp-4); max-width: 62ch; }

/* Per brand spec: NO ALL-CAPS in headlines or body. Only the
   .kx-overline utility uses uppercase, for tables / labels. */

/* Basis */
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--kx-white); }
a { color: var(--kx-green); }
a:hover { color: #38A887; }
img { max-width: 100%; }