/* ──────────────────────────────────────────────────────────────────────────
   MTP Manufaktur — Design Tokens
   Quelle: docs/design.md (Single Source of Truth, W3C-DTCG-konform).
   Wenn ein Wert hier nicht steht, gehört er nicht ins Designsystem.

   Aufbau in 3 Schichten (Designrichtung „Instrumentenlicht", §10):
     1. PRIMITIVE  — Roh-Paletten, absolut, kontextfrei (--mtp-brass-*, --mtp-ink-* …)
     2. SEMANTISCH — surface-abhängige Tokens (--mtp-bg, --mtp-fg, --mtp-accent, --mtp-rule)
                     Light = :root-Default, Dark = .mtp-dark-Override
     3. Komponenten (base.css / components.css) referenzieren NUR die semantische
        Schicht und funktionieren dadurch automatisch auf Dark- wie Light-Surface.
   ────────────────────────────────────────────────────────────────────────── */

:root {
	/* ═══════════════════════════════════════════════════════════════════════
	   SCHICHT 1 — PRIMITIVE (Roh-Paletten)
	   ═══════════════════════════════════════════════════════════════════════ */

	/* ── Brass (aus dem MTP-Logo abgeleitet) ─────────────────────────────── */
	--mtp-brass-50:  #faf6e8;
	--mtp-brass-100: #f2eac4;
	--mtp-brass-200: #e8d89a;
	--mtp-brass-300: #d4c266;
	--mtp-brass-400: #c6b408;
	--mtp-brass-500: #b09710;  /* MTP-Hauptmessing (Logo-Mittelton) */
	--mtp-brass-600: #9b7a14;
	--mtp-brass-700: #7a6010;
	--mtp-brass-800: #5c4a0f;
	--mtp-brass-900: #3d3008;

	/* Brass-Varianten für die Surfaces (design.md §10) */
	--mtp-brass-light:   #d8c468;  /* Brass auf Dark — AA-safe (~11:1) */
	--mtp-brass-deep:    #8a7508;  /* Brass auf Paper — AA-safe */
	--mtp-brass-deeper:  #6f5e07;  /* Brass-Hover auf Paper */

	/* ── Ink (Schrift, Linien) ───────────────────────────────────────────── */
	--mtp-ink-50:  #f5f4f0;
	--mtp-ink-100: #e5e3dd;
	--mtp-ink-200: #c9c6bd;
	--mtp-ink-300: #a8a49a;
	--mtp-ink-400: #7a766c;
	--mtp-ink-500: #525049;
	--mtp-ink-600: #34332e;   /* Body auf Paper (~12:1) */
	--mtp-ink-700: #23221e;
	--mtp-ink-800: #171617;   /* MTP-Schrift (aus Logo) */
	--mtp-ink-900: #0a0a0b;

	/* ── Dark-Grund-Töne (Instrumentenlicht §10) ─────────────────────────── */
	--mtp-ink-0:      #171617;  /* Brand-Ground (Header/Hero/Trust/Footer) */
	--mtp-ink-1:      #1d1b18;  /* leicht erhöht (Trust-Bar auf Home) */
	--mtp-ink-panel:  #0d0c0c;  /* tieferer Lese-/Auftakt-Grund (Artikel) */
	--mtp-ink-raised: #15130f;  /* „raised reading panel", mildert Halation */

	/* ── Helle Töne auf Dark ─────────────────────────────────────────────── */
	--mtp-paper:        #e8e2cf;             /* Body-Off-White, warm (nicht reinweiß) */
	--mtp-highlight:    #f4ecd2;             /* hellste Display-Töne (H1, Zahlen) */
	--mtp-paper-muted:  #b8b1a0;             /* sekundärer Text auf Dark */
	--mtp-paper-quiet:  rgba(232, 226, 207, 0.55); /* Meta/Labels auf Dark */

	/* ── Surfaces (Light) ────────────────────────────────────────────────── */
	--mtp-surface-paper:    #faf8f2;   /* Logo-BG, Hauptseiten-Hintergrund */
	--mtp-surface-canvas:   #ffffff;
	--mtp-surface-sunken:   #f2efe5;
	--mtp-surface-contrast: #171617;   /* = ink-0, dark Footer/Sektion */
	--mtp-paper-bg:         #faf8f2;   /* Alias surface-paper (§10-Sprech) */
	--mtp-paper-bg-2:       #f2eee2;   /* abgesetzte helle Fläche */
	--mtp-ink-text:         #34332e;   /* = ink-600, Body auf Light */
	--mtp-ink-strong:       #171617;   /* Headings auf Light */
	--mtp-ink-muted:        #6b6760;   /* sekundärer Text auf Light */

	/* ── Linien / Rules ──────────────────────────────────────────────────── */
	--mtp-rule-l:        rgba(23, 22, 23, 0.10);     /* auf Light */
	--mtp-rule-l-strong: rgba(23, 22, 23, 0.22);
	--mtp-rule-d:        rgba(232, 226, 207, 0.10);  /* auf Dark */
	--mtp-rule-d-strong: rgba(232, 226, 207, 0.22);

	/* ── Gefederte-Naht-Stops (warm, nie neutralgrau — §10) ──────────────── */
	--mtp-seam-1: #261e10;  /* warm-darkened ink */
	--mtp-seam-2: #5a4c2a;  /* brass haze mid */
	--mtp-seam-3: #c2b58e;  /* warm tan, near paper */

	/* ── Semantik (nur in Form-States, nie als Brand-Akzent) ─────────────── */
	--mtp-success: #2d7a4f;
	--mtp-warning: #b07720;
	--mtp-danger:  #9b2d2d;
	--mtp-info:    #3a5a7a;

	/* ── Typografie ──────────────────────────────────────────────────────── */
	/* Instrumentenlicht: Instrument Serif (Display) + Inter Tight (UI/Body). */
	--mtp-font-display: "Instrument Serif", "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--mtp-font-ui:      "Inter Tight", "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
	--mtp-font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
	/* Abwärtskompatible Aliase (bestehende Selektoren in base/components.css) */
	--mtp-font-heading: var(--mtp-font-display);
	--mtp-font-body:    var(--mtp-font-ui);

	/* Major-Third-Scale (ratio 1.250, base 16px) */
	--mtp-text-xs:   12px;
	--mtp-text-sm:   14px;
	--mtp-text-base: 16px;
	--mtp-text-lg:   18px;
	--mtp-text-xl:   20px;
	--mtp-text-2xl:  24px;
	--mtp-text-3xl:  30px;
	--mtp-text-4xl:  38px;
	--mtp-text-5xl:  48px;
	--mtp-text-6xl:  60px;
	--mtp-text-hero: 76px;

	--mtp-tracking-tight:  -0.02em;
	--mtp-tracking-normal:  0;
	--mtp-tracking-wide:    0.04em;
	--mtp-tracking-widest:  0.12em;
	--mtp-tracking-mono:    0.22em;   /* Mono-Meta-Labels (§10) */

	/* ── Spacing (4-px-Skala) ────────────────────────────────────────────── */
	--mtp-space-0:   0;
	--mtp-space-1:   4px;
	--mtp-space-2:   8px;
	--mtp-space-3:   12px;
	--mtp-space-4:   16px;
	--mtp-space-5:   20px;
	--mtp-space-6:   24px;
	--mtp-space-8:   32px;
	--mtp-space-10:  40px;
	--mtp-space-12:  48px;
	--mtp-space-16:  64px;
	--mtp-space-20:  80px;
	--mtp-space-24:  96px;
	--mtp-space-32:  128px;
	--mtp-space-40:  160px;
	--mtp-space-48:  192px;
	--mtp-space-64:  256px;

	/* ── Layout ──────────────────────────────────────────────────────────── */
	--mtp-container-prose:   65ch;
	--mtp-container-content: 1200px;
	--mtp-container-wide:    1440px;
	--mtp-container-hero:    1600px;

	--mtp-grid-gutter: 24px;

	/* Instrumentenlicht-Layout (§10) */
	--mtp-gutter:    clamp(32px, 5.5vw, 80px); /* Sektions-Innenabstand Dark/Light */
	--mtp-maxw:      1440px;                   /* breite Dark-/Light-Sektionen */
	--mtp-measure:   64ch;                     /* Lese-Spalte (Artikel-Prosa) */
	--mtp-header-h:  88px;                      /* Sticky-Header-Höhe */

	/* Breakpoints sind in @media-Queries hartcodiert (keine CSS-Variablen in MQ erlaubt). */

	/* ── Radius (manufaktur-typisch wenig Rundung) ───────────────────────── */
	--mtp-radius-none: 0;
	--mtp-radius-sm:   2px;
	--mtp-radius-md:   4px;
	--mtp-radius-lg:   8px;
	--mtp-radius-xl:   12px;
	--mtp-radius-full: 9999px;

	/* ── Shadows ─────────────────────────────────────────────────────────── */
	--mtp-shadow-xs:    0 1px 2px rgba(23, 22, 23, 0.04);
	--mtp-shadow-sm:    0 1px 3px rgba(23, 22, 23, 0.06), 0 1px 2px rgba(23, 22, 23, 0.04);
	--mtp-shadow-md:    0 4px 8px rgba(23, 22, 23, 0.06), 0 2px 4px rgba(23, 22, 23, 0.04);
	--mtp-shadow-lg:    0 12px 24px rgba(23, 22, 23, 0.08), 0 4px 8px rgba(23, 22, 23, 0.04);
	--mtp-shadow-xl:    0 24px 48px rgba(23, 22, 23, 0.10), 0 8px 16px rgba(23, 22, 23, 0.06);
	--mtp-shadow-brass: 0 4px 16px rgba(176, 151, 16, 0.20);
	--mtp-shadow-card:  0 20px 40px -28px rgba(23, 22, 23, 0.22); /* Light-Card-Hover (§10) */

	/* ── Motion ──────────────────────────────────────────────────────────── */
	--mtp-ease-standard: cubic-bezier(0.2, 0, 0, 1);
	--mtp-ease-in:       cubic-bezier(0.4, 0, 1, 1);
	--mtp-ease-out:      cubic-bezier(0, 0, 0.2, 1);
	--mtp-ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);

	--mtp-duration-instant: 75ms;
	--mtp-duration-fast:    150ms;
	--mtp-duration-base:    250ms;
	--mtp-duration-slow:    400ms;
	--mtp-duration-slower:  600ms;

	/* ═══════════════════════════════════════════════════════════════════════
	   SCHICHT 2 — SEMANTISCH (Surface-Tokens) · Default = LIGHT
	   Komponenten referenzieren NUR diese Tokens. Dark-Werte in .mtp-dark unten.
	   ═══════════════════════════════════════════════════════════════════════ */
	--mtp-bg:           var(--mtp-paper-bg);     /* Sektions-Hintergrund */
	--mtp-bg-2:         var(--mtp-paper-bg-2);   /* abgesetzte Fläche / Card-Inset */
	--mtp-surface-card: var(--mtp-surface-canvas); /* Card-Fläche (Light: weiß) */
	--mtp-fg:           var(--mtp-ink-text);     /* Body-Text (#34332e) */
	--mtp-fg-strong:    var(--mtp-ink-strong);   /* Headings (#171617) */
	--mtp-fg-muted:     var(--mtp-ink-muted);    /* sekundärer Text (#6b6760) */
	--mtp-fg-quiet:     var(--mtp-ink-400);      /* leiseste Meta */
	--mtp-accent:       var(--mtp-brass-deep);   /* Brass-Akzent (AA auf Paper) */
	--mtp-accent-hover: var(--mtp-brass-deeper); /* Brass-Hover */
	--mtp-on-accent:    var(--mtp-surface-paper);/* Text auf Brass-Button */
	--mtp-rule:         var(--mtp-rule-l);       /* feine Linie */
	--mtp-rule-strong:  var(--mtp-rule-l-strong);/* kräftige Linie */
	--mtp-focus-ring:   var(--mtp-brass-500);    /* :focus-visible-Ring */
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCHICHT 2 (Override) — DARK-SURFACE
   Jede .mtp-dark-Sektion kippt die semantischen Tokens auf Dunkel. Komponenten
   darin werden automatisch dunkel — kein komponentenspezifischer Dark-Code nötig.
   ═══════════════════════════════════════════════════════════════════════════ */
.mtp-dark {
	--mtp-bg:           var(--mtp-ink-0);
	--mtp-bg-2:         var(--mtp-ink-1);
	--mtp-surface-card: var(--mtp-ink-raised);
	--mtp-fg:           var(--mtp-paper);
	--mtp-fg-strong:    var(--mtp-highlight);
	--mtp-fg-muted:     var(--mtp-paper-muted);
	--mtp-fg-quiet:     var(--mtp-paper-quiet);
	--mtp-accent:       var(--mtp-brass-light);
	--mtp-accent-hover: var(--mtp-brass-light);
	--mtp-on-accent:    #1a1408;                 /* dunkles Braun auf hellem Brass */
	--mtp-rule:         var(--mtp-rule-d);
	--mtp-rule-strong:  var(--mtp-rule-d-strong);
	--mtp-focus-ring:   var(--mtp-brass-light);  /* sichtbarer Ring auf Dunkel */
}

/* Tiefere Dark-Variante (Artikel-Lese-Auftakt / Panel) — opt-in. */
.mtp-dark.mtp-dark--panel {
	--mtp-bg:   var(--mtp-ink-panel);
	--mtp-bg-2: var(--mtp-ink-raised);
}