/* ==========================================================================
   Das Experten — Colors & Type tokens
   ==========================================================================
   Heritage: the three-ribbon logomark uses the German flag palette
   (Schwarz, Rot, Gold). We keep those as brand accents while elevating
   the system with an apothecary / clinical neutral base.
   ========================================================================== */

/* ---------- Webfonts (substitutions flagged in README) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Archivo+Narrow:wght@400;500;600;700&family=Fraunces:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Manrope:wght@400;500;600;700;800&display=swap');

/* ---------- Brand fonts (uploaded) ---------- */
/* NOTE: fonts/Eras-Bold_Regular.ttf the client uploaded is corrupted —
   browser rejects it with "Invalid font data in ArrayBuffer". Until a
   working .ttf/.woff2 of Eras Bold ITC arrives, display falls back to
   Archivo Black, which is the closest free analogue. */
@font-face {
  font-family: 'Megafonts';
  src: url('fonts/megafonts_inc.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------------- BRAND — heritage flag palette ---------------- */
  --brand-schwarz:     #282229;  /* warm off-black, sampled from logomark */
  --brand-rot:         #E5202C;  /* crimson red, sampled from logomark */
  --brand-gold:        #FEF004;  /* sodium yellow, sampled from logomark */
  --brand-schwarz-ink: #1A1519;  /* deeper ink for long-form text */

  /* ---------------- PRODUCT LINES ---------------- */
  /* Each product line gets its own accent. Sampled from packaging. */
  --line-innoweiss:    #0D199E;  /* deep electric blue  — whitening */
  --line-detox:        #1A1519;  /* charcoal black     — detox/charcoal */
  --line-fresh:        #0E7C66;  /* apothecary green   — fresh/mint */
  --line-sensitive:    #7A3B8A;  /* soft violet        — sensitive */
  --line-kids:         #FE7F2D;  /* vitamin orange     — kids */

  /* ---------------- NEUTRAL — apothecary paper ---------------- */
  --paper:             #FBFAF6;  /* off-white, warm — base canvas */
  --paper-raised:      #FFFFFF;  /* pure white, used sparingly for cards */
  --paper-sunk:        #F3F0E8;  /* card trays, subtle fills */
  --bone:              #EDE8DD;  /* hairline-darker fill */
  --stone-100:         #E3DDCF;
  --stone-200:         #C9C1B0;
  --stone-300:         #9C9384;
  --stone-400:         #6E6558;
  --stone-500:         #4A4238;
  --stone-600:         #2E2822;
  --stone-700:         #1A1519;

  /* ---------------- SEMANTIC TEXT ---------------- */
  --fg-1:              var(--brand-schwarz-ink);   /* primary ink */
  --fg-2:              var(--stone-500);           /* secondary */
  --fg-3:              var(--stone-400);           /* tertiary / meta */
  --fg-muted:          var(--stone-300);           /* captions, placeholder */
  --fg-on-dark:        var(--paper);
  --fg-on-brand:       var(--paper-raised);
  --fg-link:           var(--brand-rot);

  /* ---------------- SEMANTIC SURFACES ---------------- */
  --bg-canvas:         var(--paper);
  --bg-surface:        var(--paper-raised);
  --bg-sunk:           var(--paper-sunk);
  --bg-inverse:        var(--brand-schwarz);
  --bg-accent:         var(--brand-rot);

  /* ---------------- BORDERS ---------------- */
  --border-hairline:   rgba(26, 21, 25, 0.08);    /* 1px hairlines */
  --border-subtle:     rgba(26, 21, 25, 0.14);
  --border-strong:     rgba(26, 21, 25, 0.32);
  --border-ink:        var(--brand-schwarz-ink);

  /* ---------------- STATUS ---------------- */
  --status-success:    #2E7D4F;
  --status-warning:    #C77A00;
  --status-error:      var(--brand-rot);
  --status-info:       var(--line-innoweiss);

  /* ---------------- SPACING ---------------- */
  --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 — restrained, apothecary ---------------- */
  /* Brand leans clinical. Radii stay small; pills only on tags/chips. */
  --radius-xs:  2px;
  --radius-sm:  4px;
  --radius-md:  6px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  /* ---------------- ELEVATION — low, printed, not glassy ---------------- */
  --shadow-hairline: 0 0 0 1px var(--border-hairline);
  --shadow-card:     0 1px 2px rgba(26,21,25,.05), 0 0 0 1px var(--border-hairline);
  --shadow-raised:   0 4px 16px -6px rgba(26,21,25,.12), 0 0 0 1px var(--border-hairline);
  --shadow-float:    0 18px 48px -18px rgba(26,21,25,.22), 0 2px 6px rgba(26,21,25,.06);
  --shadow-inset:    inset 0 1px 0 rgba(255,255,255,.6), inset 0 0 0 1px var(--border-hairline);

  /* ---------------- MOTION ---------------- */
  --ease-standard:   cubic-bezier(.2, .7, .2, 1);
  --ease-emphasis:   cubic-bezier(.2, 1.2, .3, 1);
  --ease-exit:       cubic-bezier(.4, 0, 1, 1);
  --dur-fast:  120ms;
  --dur-base:  200ms;
  --dur-slow:  360ms;

  /* ---------------- TYPE STACKS ---------------- */
  /* Display  — Eras Bold ITC is the wordmark face but the uploaded TTF is corrupted;
                stack falls back to Archivo Black until a working file arrives.
     Body     — Archivo (sans), with Narrow variant for tight meta.
     Accent   — Fraunces serif for apothecary pull-quotes / numerals.
     Mono     — Manrope (replaces JetBrains Mono — proportional sans, normal tracking).       */
  --font-display:  'Eras Bold ITC', 'Archivo Black', 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body:     'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-narrow:   'Archivo Narrow', 'Archivo', Arial, sans-serif;
  --font-accent:   'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-mono:     'Manrope', 'Archivo', 'Helvetica Neue', Arial, sans-serif;

  /* ---------------- TYPE SCALE ---------------- */
  /* Decisive, modernist scale. Display sizes skew tight & heavy. */
  --fs-display-2xl: clamp(56px, 7vw, 112px);
  --fs-display-xl:  clamp(44px, 5.5vw, 80px);
  --fs-display-lg:  clamp(36px, 4.5vw, 64px);
  --fs-display-md:  clamp(28px, 3.6vw, 48px);
  --fs-h1: 40px;
  --fs-h2: 32px;
  --fs-h3: 24px;
  --fs-h4: 20px;
  --fs-h5: 17px;
  --fs-h6: 14px;
  --fs-body-lg: 18px;
  --fs-body:    16px;
  --fs-body-sm: 14px;
  --fs-caption: 12px;
  --fs-micro:   11px;

  /* line-heights */
  --lh-tight:   1.02;
  --lh-snug:    1.12;
  --lh-heading: 1.18;
  --lh-body:    1.55;
  --lh-loose:   1.7;

  /* tracking */
  --tr-tighter:  -0.03em;
  --tr-tight:    -0.015em;
  --tr-normal:    0em;
  --tr-wide:     0.04em;
  --tr-wider:    0.1em;
  --tr-widest:   0.18em;
}

/* ==========================================================================
   Semantic element defaults — opt-in via .dx-prose on a parent
   ========================================================================== */
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--bg-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.dx-display-2xl, .dx-display-xl, .dx-display-lg, .dx-display-md {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tighter);
  color: var(--fg-1);
}
.dx-display-2xl { font-size: var(--fs-display-2xl); }
.dx-display-xl  { font-size: var(--fs-display-xl); }
.dx-display-lg  { font-size: var(--fs-display-lg); }
.dx-display-md  { font-size: var(--fs-display-md); }

.dx-h1, h1.dx, .dx-prose h1 { font: 800 var(--fs-h1)/var(--lh-heading) var(--font-display); letter-spacing: var(--tr-tight); }
.dx-h2, h2.dx, .dx-prose h2 { font: 800 var(--fs-h2)/var(--lh-heading) var(--font-display); letter-spacing: var(--tr-tight); }
.dx-h3, h3.dx, .dx-prose h3 { font: 700 var(--fs-h3)/var(--lh-heading) var(--font-display); letter-spacing: var(--tr-tight); }
.dx-h4, h4.dx, .dx-prose h4 { font: 700 var(--fs-h4)/var(--lh-snug) var(--font-display); }
.dx-h5, h5.dx, .dx-prose h5 { font: 600 var(--fs-h5)/var(--lh-snug) var(--font-body); }
.dx-h6, h6.dx, .dx-prose h6 { font: 700 var(--fs-h6)/var(--lh-snug) var(--font-narrow); letter-spacing: var(--tr-widest); text-transform: uppercase; }

.dx-eyebrow {
  font: 700 var(--fs-micro)/1 var(--font-narrow);
  text-transform: uppercase;
  letter-spacing: var(--tr-widest);
  color: var(--brand-rot);
}

.dx-lede {
  font: 400 var(--fs-body-lg)/var(--lh-body) var(--font-body);
  color: var(--fg-2);
  max-width: 62ch;
}

.dx-body, .dx-prose p { font: 400 var(--fs-body)/var(--lh-body) var(--font-body); color: var(--fg-1); }
.dx-caption { font: 500 var(--fs-caption)/1.4 var(--font-narrow); color: var(--fg-3); letter-spacing: var(--tr-wide); }
.dx-mono    { font: 500 var(--fs-body-sm)/1.45 var(--font-mono);  color: var(--fg-2); letter-spacing: 0; }
.dx-label   { font: 700 var(--fs-micro)/1 var(--font-narrow); text-transform: uppercase; letter-spacing: var(--tr-widest); color: var(--fg-2); }

/* Product names — set in Eras Bold ITC, the actual brand display face from the wordmark.
   Use on innoWeiss, Detox, Fresh, Sensitive, Kids labels in product cards, packaging, PDPs. */
.dx-product-name { font-family: 'Eras Bold ITC', 'Archivo', sans-serif; font-weight: 700; letter-spacing: 0; }

.dx-serif   { font-family: var(--font-accent); font-weight: 400; font-style: italic; }
.dx-quote   { font: italic 500 var(--fs-h3)/1.3 var(--font-accent); color: var(--fg-1); }

/* numerical / claim numerals — Fraunces on a heavy weight */
.dx-numeral { font: 700 var(--fs-display-lg)/1 var(--font-accent); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

/* bilingual / scientific label (used on packaging & PDPs) */
.dx-clinical { font: 500 var(--fs-caption)/1.4 var(--font-mono); color: var(--fg-2); letter-spacing: 0; }

/* German-heritage underline-pipe accent, echoing the tagline lockup */
.dx-pipe::after {
  content: '';
  display: inline-block;
  width: 3px; height: 0.85em;
  background: var(--brand-schwarz-ink);
  margin-left: 0.35em;
  transform: translateY(0.08em);
}

/* small utilities kept close to the tokens so imports are single-file-friendly */
.dx-ribbon-rule {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 3px;
  height: 6px; border-radius: 2px; overflow: hidden;
}
.dx-ribbon-rule > i:nth-child(1) { background: var(--brand-schwarz); }
.dx-ribbon-rule > i:nth-child(2) { background: var(--brand-rot); }
.dx-ribbon-rule > i:nth-child(3) { background: var(--brand-gold); }