/* ============================================================
   Dari-Intelligence Brand Tokens v1.3
   Editorial-Feuilleton + Schweizer Typografie + Bauhaus
   Light Default + Dark Toggle via [data-theme="dark"]
   Selbst-gehostete Fonts (DSGVO-konform)
   v1.3 (2026-05-26): Body Geist -> Schibsted Grotesk (redaktioneller
   Grotesk, OFL). Kommerz-Font-Namen (GT Sectra/ABC Diatype) aus dem
   Token-Stack entfernt -> kein stiller Fallback mehr.
============================================================ */

/* ─── Self-Hosted Fonts (DSGVO, LG Muenchen 3 O 17493/20) ─── */
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/newsreader-400.woff2') format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/newsreader-500.woff2') format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/newsreader-600.woff2') format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/newsreader-700.woff2') format('woff2'); }
/* Schibsted Grotesk — Variable Font (Gewichts-Achse 400–700), self-hosted.
   Zwei Subsets: latin deckt alle deutschen Zeichen inkl. äöü߀ ab (U+0000-00FF),
   latin-ext nur für seltene Fremdnamen. OFL — siehe fonts/OFL-Schibsted-Grotesk.txt */
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/schibsted-grotesk-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: 'Schibsted Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/schibsted-grotesk-latinext.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: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/jetbrains-mono-400.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/jetbrains-mono-500.woff2') format('woff2'); }


:root {
  /* ── LIGHT MODE (Default) ── */
  --paper:           #F4F0E8;
  --paper-2:         #E8E0D2;
  --paper-3:         #DCD0BD;

  --ink:             #1A1815;
  --ink-2:           #2C2826;
  --ink-3:           #4A4540;

  --burgundy:        #7A2E2E;
  --burgundy-dim:    #5C2222;
  --gold:            #A88945;
  --gold-dim:        #7A6233;

  --pewter:          #8B8680;
  --pewter-dim:      #6B6660;

  --signal-risk-on:   #4A6B3F;
  --signal-risk-off:  var(--burgundy);
  --signal-neutral:   var(--pewter);

  --chart-line:      var(--ink-2);
  --chart-area:      rgba(122, 46, 46, 0.08);
  --chart-grid:      rgba(74, 69, 64, 0.12);
  --chart-axis:      var(--pewter);

  --rule:            1px solid var(--ink-3);
  --rule-dim:        1px solid rgba(74, 69, 64, 0.12);
  --rule-burgundy:   1px solid var(--burgundy);

  --footer-bg:       var(--ink);
  --footer-text:     var(--paper-2);
  --cta-bg:          var(--ink);
  --cta-color:       var(--paper);

  /* ── TYPOGRAFIE ──
     Nur self-hosted Fonts als Primär (ehrlich, kein stiller Fallback auf
     nicht-lizenzierte Kommerz-Fonts). Editorial-Serif + Schweizer-Grotesk + Mono. */
  --font-display:    'Newsreader', Georgia, 'Times New Roman', serif;
  --font-body:       'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:       'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

  --text-xs:         0.75rem;
  --text-sm:         0.875rem;
  --text-base:       1rem;
  --text-lg:         1.125rem;
  --text-xl:         1.5rem;
  --text-2xl:        2rem;
  --text-3xl:        2.75rem;
  --text-4xl:        4rem;

  --leading-display: 1.05;
  --leading-tight:   1.25;
  --leading-body:    1.55;
  --leading-relaxed: 1.7;

  --tracking-display: -0.02em;
  --tracking-tight:   -0.01em;
  --tracking-mono:    -0.01em;
  --tracking-meta:    0.08em;

  /* ── GRID & SPACING ── */
  --container-narrow:  640px;
  --container-default: 1080px;
  --container-wide:    1280px;
  --container-max:     1440px;

  --pad-page-x:      max(24px, 4vw);
  --pad-section-y:   clamp(48px, 8vw, 120px);
  --pad-block-y:     clamp(24px, 4vw, 48px);

  --grid-gap:        clamp(16px, 2vw, 32px);

  --radius-none:     0;
  --radius-sm:       2px;

  --ease-quiet:      cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --dur-fade:        600ms;
  --dur-quiet:       800ms;
  --dur-slow:        1200ms;
}

[data-theme="dark"] {
  --paper:           #14110D;
  --paper-2:         #1F1B16;
  --paper-3:         #2A2520;

  --ink:             #EDE6D6;
  --ink-2:           #C9C0AE;
  --ink-3:           #8A8378;

  --burgundy:        #CF6868;
  --burgundy-dim:    #8C3939;
  --gold:            #C9A064;
  --gold-dim:        #9C7A45;

  --pewter:          #7A7268;
  --pewter-dim:      #5A5249;

  --chart-area:      rgba(184, 84, 84, 0.12);
  --chart-grid:      rgba(237, 230, 214, 0.06);

  --rule:            1px solid rgba(237, 230, 214, 0.18);
  --rule-dim:        1px solid rgba(237, 230, 214, 0.08);

  --footer-bg:       var(--paper-2);
  --footer-text:     var(--ink-2);
  --cta-bg:          var(--burgundy);
  --cta-color:       var(--paper);
}

html {
  transition: background-color var(--dur-fade) var(--ease-quiet),
              color var(--dur-fade) var(--ease-quiet);
}
body, header, footer, section, article {
  transition: background-color var(--dur-fade) var(--ease-quiet),
              color var(--dur-fade) var(--ease-quiet),
              border-color var(--dur-fade) var(--ease-quiet);
}

.theme-toggle {
  background: transparent;
  border: 1px solid var(--ink-3);
  color: var(--ink-2);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  margin-left: 24px;
  transition: all var(--dur-fade) var(--ease-quiet);
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1;
}
.theme-toggle:hover {
  border-color: var(--burgundy);
  color: var(--burgundy);
}
.theme-toggle svg { width: 14px; height: 14px; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }