/* ============================================================
   Histaminhilfe — Design Tokens
   Brand blue (#007db2) + soft pastel category tints on white,
   in the Everyday-Health editorial style.
   Headings: Lexend · Body & UI: DM Sans (both self-hosted).
   ============================================================ */

/* ---- Lexend (headings) — self-hosted, one face per weight ---- */
@font-face {
  font-family: 'Lexend'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/lexend-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lexend'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/lexend-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lexend'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/lexend-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lexend'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/lexend-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lexend'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/lexend-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lexend'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/lexend-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lexend'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/lexend-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lexend'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/lexend-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lexend'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('../fonts/lexend-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lexend'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('../fonts/lexend-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- DM Sans (body & UI) — self-hosted, one face per weight ---- */
@font-face {
  font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/dmsans-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/dmsans-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/dmsans-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/dmsans-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/dmsans-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/dmsans-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/dmsans-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/dmsans-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ============================================================
     TYPOGRAPHY
     ============================================================ */
  --font-heading: 'Lexend', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-heavy:    800;

  /* Type scale (editorial) — hero ~64 / h1 ~48 / h2 ~36 / h3 24 / h4 20 */
  --fs-display:  clamp(2.6rem, 1.6rem + 3.4vw, 4rem);
  --fs-h1:       clamp(2.1rem, 1.5rem + 2vw, 3rem);
  --fs-h2:       clamp(1.7rem, 1.3rem + 1.4vw, 2.25rem);
  --fs-h3:       1.5rem;
  --fs-h4:       1.25rem;
  --fs-lead:     1.25rem;
  --fs-body:     1.0625rem;
  --fs-base:     1rem;
  --fs-sm:       0.9375rem;
  --fs-xs:       0.8125rem;
  --fs-2xs:      0.6875rem;

  --lh-tight:    1.08;
  --lh-heading:  1.18;
  --lh-snug:     1.35;
  --lh-body:     1.65;

  --ls-tight:   -0.02em;
  --ls-normal:   0;
  --ls-wide:     0.04em;
  --ls-caps:     0.08em;

  --measure: 68ch;

  /* ============================================================
     COLORS — brand blue ramp
     ============================================================ */
  --blue-700: #00557b;   /* dark — hover, footer, heading accents */
  --blue-600: #0f6b93;   /* mid */
  --blue-500: #007db2;   /* PRIMARY — links, active nav, buttons, accents */
  --blue-200: #c8ebfa;   /* tint — shapes, borders on blue cards */
  --blue-100: #def5ff;   /* tint — section backgrounds, cards */
  --blue-050: #f5fcff;   /* faintest blue wash */

  /* Neutrals */
  --white:     #ffffff;
  --ink:       #090909;  /* near-black body & headings */
  --ink-soft:  #2c2c2c;  /* softened body on tints */
  --gray-500:  #6b6b6b;  /* muted text that still passes AA on white */
  --gray-400:  #767676;  /* secondary / meta gray (AA on white) */
  --gray-200:  #e6e6e6;  /* light fill */
  --hairline:  #d8d8d8;  /* hairline borders */
  --paper:     #fbfdfe;  /* page background, a hair off white */

  /* Category pastel tints (signature EH move): bg / wash / shape / ink */
  /* Mint — Ernährung, Rezepte */
  --mint-bg:    #e3fceb;
  --mint-wash:  #f2fcf5;
  --mint-shape: #d0f7dc;
  --mint-ink:   #1b7a43;

  /* Sky — Grundlagen, Diagnose */
  --sky-bg:     #def5ff;
  --sky-wash:   #f5fcff;
  --sky-shape:  #c8ebfa;
  --sky-ink:    #006a98;

  /* Blush — Symptome, Erfahrungen */
  --blush-bg:    #fff1f0;
  --blush-wash:  #fff8f8;
  --blush-shape: #ffd9d6;
  --blush-ink:   #b23a32;

  /* Cream — Tipps, Alltag & Reisen, Behandlung */
  --cream-bg:    #fff7ea;
  --cream-wash:  #fffcf5;
  --cream-shape: #ffe9c2;
  --cream-ink:   #8a5f14;

  /* Semantic accents (histamine level — use sparingly) */
  --ok:      #1b7a43;   /* gut verträglich */
  --warn:    #a06a0f;   /* mit Vorsicht (AA on warn-bg) */
  --danger:  #c0392b;   /* meiden */
  --ok-bg:     #e3fceb;
  --warn-bg:   #fff3d6;
  --danger-bg: #fdecea;

  /* ---- Inline icon used as a CSS mask (editable links get the arrow via ::after) ---- */
  --icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");

  /* ---- Semantic aliases — prefer these in components ---- */
  --color-primary:        var(--blue-500);
  --color-primary-hover:  var(--blue-700);
  --color-primary-tint:   var(--blue-100);

  --text-strong:    var(--ink);
  --text-body:      var(--ink-soft);
  --text-muted:     var(--gray-500);
  --text-meta:      var(--gray-400);
  --text-on-brand:  var(--white);
  --text-link:      var(--blue-500);
  --text-link-hover:var(--blue-700);

  --surface-page:   var(--paper);
  --surface-card:   var(--white);
  --surface-sky:    var(--sky-bg);
  --surface-mint:   var(--mint-bg);
  --surface-blush:  var(--blush-bg);
  --surface-cream:  var(--cream-bg);

  --border-hairline: var(--hairline);
  --border-card:     var(--gray-200);
  --border-strong:   var(--gray-400);

  /* ============================================================
     SPACING, LAYOUT (8px rhythm)
     ============================================================ */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  --section-pad-y: clamp(48px, 6vw, 88px);
  --content-max:   1200px;   /* main container */
  --content-wide:  1320px;   /* full-bleed band inner */
  --measure-max:   720px;    /* article column */

  /* ---- Radius ---- */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   14px;   /* default card */
  --radius-lg:   20px;   /* feature card / hero */
  --radius-xl:   28px;
  --radius-pill: 999px;

  --border-w:    1px;
  --border-w-2:  2px;

  /* ---- Shadows — soft, low, diffuse (calm health feel) ---- */
  --shadow-xs:  0 1px 2px rgba(9, 30, 45, 0.05);
  --shadow-sm:  0 1px 3px rgba(9, 30, 45, 0.06), 0 1px 2px rgba(9, 30, 45, 0.04);
  --shadow-md:  0 4px 14px rgba(9, 30, 45, 0.08);
  --shadow-lg:  0 12px 30px rgba(9, 30, 45, 0.10);
  --shadow-hover: 0 10px 26px rgba(0, 125, 178, 0.14);
  --shadow-focus: 0 0 0 3px rgba(0, 125, 178, 0.30);

  /* ---- Motion ---- */
  --ease-out:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft: cubic-bezier(0.33, 0, 0.2, 1);
  --dur-fast:  120ms;
  --dur-base:  200ms;
  --dur-slow:  320ms;
}