/* TrueWagyu Design-Tokens
 *
 * Quelle: design/handoff/tokens/{typography,colors,spacing,effects,dark}.css
 * Reihenfolge wie in design/handoff/styles.css. Werte 1:1 uebernommen.
 *
 * Wo README.md und tokens/*.css sich widersprechen, steht der aufgeloeste
 * Wert hier und der verworfene daneben im Kommentar. Alle Faelle sind im
 * Uebergabebericht begruendet.
 *
 * Regel: Templates referenzieren NUR diese Variablen, nie Literale.
 */

:root{
  /* ================= Typografie (tokens/typography.css) =================
   * Der @import auf fonts.googleapis.com aus der Quelldatei ist entfernt
   * (DSGVO). Anton und Patrick Hand liegen lokal, siehe base.css.
   */
  /* Originale zuerst, wie in der V3-Referenz - Ansage vom 13.08.2026.
   * Wer Impact bzw. Noteworthy hat (Windows, macOS, iOS), sieht die
   * Referenz-Anmutung; alle anderen fallen auf die lokalen Webfonts
   * Anton und Patrick Hand zurueck, die der Handoff selbst als Ersatz
   * nennt. Comic Sans ist aus dem Akzent-Stack raus: es stand hinter
   * Segoe Print und wuerde nur greifen, wenn Patrick Hand fehlt - und
   * die liegt lokal. */
  --font-display:Impact,'Haettenschweiler','Arial Narrow Bold','Anton',sans-serif;
  --font-marketing:'Archivo Black',sans-serif;  /* nicht verwenden: Lettering nur als Pixelgrafik (Regel 7) */
  --font-accent:'Noteworthy','Bradley Hand','Segoe Print','Patrick Hand',cursive;
  /* README: "System-Stack so belassen" - schlaegt 'Inter' aus typography.css */
  --font-body:'Helvetica Neue',Helvetica,Arial,sans-serif;
  --font-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --text-display:4.5rem;  /* 72px - Marketing */
  --text-h1:3rem;         /* 48px */
  --text-h2:2.25rem;      /* 36px */
  --text-h3:1.5rem;       /* 24px */
  --text-h4:1.25rem;      /* 20px */
  --text-h5:1.0625rem;    /* 17px */
  --text-h6:.875rem;      /* 14px, Versalien */
  --text-body-l:1.125rem; --text-body:1rem; --text-small:.875rem; --text-caption:.78125rem;
  --leading-display:1.02; --leading-tight:1.15; --leading-snug:1.3; --leading-body:1.6;
  --tracking-caps:.06em;

  /* ================= Farben (tokens/colors.css) ================= */
  /* ===== Marke ===== */
  --color-primary:#a0dafe;        /* Himmelblau - Markenfarbe */
  --color-primary-ink:#111c35;    /* Text AUF Himmelblau */
  /* ===== Sky-Skala ===== */
  --sky-50:#f2faff; --sky-100:#e0f2fe; --sky-200:#c7e9fe;
  --sky-300:#a0dafe; /* = Marke */
  --sky-400:#6fc3f4; --sky-500:#42a6e6; --sky-600:#2b8ccc;
  --sky-700:#1e6ea6; /* Links / interaktiver Text auf Weiss (5,5:1) */
  /* ===== Navy-Skala (aus Key Visual) ===== */
  --navy-100:#dce6f5; --navy-200:#c0d0e9; --navy-300:#8ea6cd;
  --navy-400:#5a76a8; --navy-500:#3b5687; --navy-600:#2c4370;
  --navy-700:#22345a; --navy-800:#182746; /* Navy-Sektionen/Footer */
  --navy-900:#111c35; --navy-950:#0b1326;
  /* ===== Text & Flaechen ===== */
  --color-ink:#131f3a; --color-text:var(--color-ink);
  --color-text-muted:#5a6b82;      /* 5,4:1 auf Weiss */
  --color-text-inverse:#f4f9ff; --color-text-inverse-muted:#b6c4dd;
  --color-bg:#ffffff; --color-bg-alt:#f5f9fd;
  --color-photo-bg:#f0f2f4; /* Produktfoto-Hintergrund (Clean Room) */
  /* Bildbuehne der generierten Produktserie: exakt die Farbe, auf die die
     Bilder gebacken sind - nicht toenen, nicht ableiten. */
  --product-stage:#ffffff;
  --color-surface:#ffffff; --color-surface-2:#f5f9fd; /* erhoehte Flaechen */
  --color-border:#dbe4ee; --color-border-strong:#b9c7d8;
  /* ===== Links ===== */
  --color-link:#1e6ea6; --color-link-hover:#164f78;
  /* ===== Semantik ===== */
  --color-success:#1a7f4b; --color-success-surface:#e6f6ec;
  --color-warning:#b45309; --color-warning-surface:#fdf3e3;
  --color-error:#c6281c;   --color-error-surface:#fdeceb;
  /* ===== CTA =====
   * tokens/colors.css setzt --color-cta auf --cta-a (#d92d20, rot).
   * README, harte Regel 1: CTA ist Himmelblau mit Navy-Text, niemals Rot.
   * Rot bleibt ausschliesslich Verkaufssemantik. Die drei Rot-Vorschlaege
   * sind damit unbenutzt und stehen nicht mehr hier.
   */
  --color-cta:#a0dafe;            /* statt var(--cta-a) */
  --color-cta-ink:#111c35;        /* statt #ffffff */
  --color-cta-hover:#8ccdf3;      /* statt color-mix(in oklab,var(--color-cta) 85%,#000) */
  /* ===== Preise ===== */
  --color-price:#131f3a; --color-price-strike:#e8383b; --color-sale:#e8383b;
  /* ===== Akzent ===== */
  --color-gold:#e3bc55; /* BMS-Badge auf Navy (9,3:1), nicht fuer Flaechen */
  /* ===== Haarlinien (nur README-V3-Override, in tokens/*.css nicht vorhanden) ===== */
  --hair:#eef2f7;
  /* Trenner-Staerke. In der Referenz der Tweak "trennerStaerke", Standard 1.
   * Skaliert die Wanderstrecke der Blueten/Wolken in den Sektionstrennern. */
  --tk:1;

  /* ================= Abstaende (tokens/spacing.css) ================= */
  /* 4px-Basis */
  --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;
  /* Radius - rund & freundlich wie das Logo */
  --radius-xs:6px; --radius-sm:10px; --radius-md:14px;
  --radius-lg:20px; --radius-xl:28px; --radius-pill:999px;
  --container-max:1140px;

  /* ================= Effekte (tokens/effects.css) ================= */
  --shadow-card:0 1px 2px rgba(17,28,53,.06),0 6px 16px -6px rgba(17,28,53,.12);
  --shadow-card-hover:0 2px 4px rgba(17,28,53,.08),0 16px 32px -10px rgba(17,28,53,.22);
  --shadow-pop:0 12px 40px -8px rgba(11,19,38,.35);
  --focus-ring:0 0 0 3px #ffffff,0 0 0 6px rgba(43,140,204,.55);
  --transition-fast:.15s ease; --transition-base:.22s ease;
}

/* ================= Dark Mode (tokens/dark.css) =================
 * "Nachthimmel ueber Japan"
 */
[data-theme="dark"]{
  color-scheme:dark;
  /* Flaechen - Elevation ueber Helligkeit statt Schatten */
  --color-bg:#0b1326; --color-bg-alt:#111c35;
  --color-surface:#182746; --color-surface-2:#22345a;
  --color-photo-bg:#14233f;
  --product-stage:#101b36;
  /* Text - blaeuliches Off-White, kein reines Weiss */
  --color-text:#e8f2fc; --color-ink:#e8f2fc; --color-text-muted:#b6c4dd;
  --color-border:#22345a; --color-border-strong:#3b5687;
  /* Himmelblau wechselt die Rolle: Flaeche -> Akzent */
  --color-link:#a0dafe; --color-link-hover:#c7e9fe;
  /* Preise */
  --color-price:#e8f2fc;
  --color-price-strike:#f57578; --color-sale:#e8383b; /* 6,4:1 auf Surface */
  /* Semantik dark */
  --color-success:#5fc98e; --color-success-surface:#0f2f1f;
  --color-warning:#e8a13d; --color-warning-surface:#33230d;
  --color-error:#ff8a7a;   --color-error-surface:#391620;
  /* CTA dark: README-V3-Override. tokens/dark.css laesst --color-cta stehen
   * und rechnet mit weissem Text auf Rot - gilt mit Regel 1 nicht mehr. */
  --color-cta:var(--navy-600);
  --color-cta-ink:#e0f2fe;
  --color-cta-hover:var(--navy-500);  /* statt color-mix(in oklab,var(--color-cta) 82%,#fff) */
  --hair:rgba(160,218,254,.14);
  /* Schatten -> helle Kanten + Glow */
  --shadow-card:0 0 0 1px rgba(160,218,254,.10);
  --shadow-card-hover:0 0 0 1px rgba(160,218,254,.30),0 14px 32px -14px rgba(0,0,0,.55);
  --shadow-pop:0 0 0 1px rgba(160,218,254,.2),0 16px 44px -12px rgba(0,0,0,.6);
  --focus-ring:0 0 0 3px #0b1326,0 0 0 6px rgba(160,218,254,.65);
}