/* NextBuy Design-Tokens. Erzeugt aus brand/design-tokens.json.
 * NICHT VON HAND AENDERN. Quelle sind die gesperrten Werte-Dokumente,
 * brand/farbsystem.md, brand/typografie.md und brand/bildmarke.md.
 * Neu bauen mit: node tools/build-tokens.mjs   (Stand 2026-09-09)
 *
 * Gescoped auf .nb-v3. Alles greift nur innerhalb eines Elements mit
 * dieser Klasse, damit das laufende Theme unberuehrt bleibt.
 * Pruefen mit: node tools/build-tokens.mjs --check
 */

.nb-v3 {

  /* Layer 1, Primitives. Nie direkt im Component-CSS */
  --nb-night: #010C28;
  --nb-night-rgb: 1 12 40;
  --nb-signal-500: #5850FF;
  --nb-signal-700: #473BDA;
  --nb-signal-800: #382DB3;
  --nb-sky-300: #EDF0FE;
  --nb-sky-500: #9DAEF7;
  --nb-sky-700: #7887CD;
  --nb-sky-stage: #E4E9FE;
  --nb-lime: #D4FA64;
  --nb-white: #FFFFFF;
  --nb-page: #F6F7FB;
  --nb-canvas: #F7F5F0;
  --nb-hero-base: #E9EAEC;
  /* ink-50 ist der getönte Seitengrund K1 (Daniel 30.09.2026, ENTSCHEIDE-flaechen-kontrast-2026-09-30.md E1) */
  --nb-ink-50: #F9FAFC;
  --nb-ink-100: #F2F4F7;
  --nb-ink-200: #E3E6EC;
  --nb-ink-300: #CDD1D8;
  --nb-ink-400: #9FA3AB;
  --nb-ink-500: #777C84;
  --nb-ink-600: #5E646D;
  --nb-ink-700: #474D58;
  --nb-dark-surface: #17243A;
  --nb-dark-border: #25334A;
  --nb-dark-control: #949AA6;
  --nb-on-dark-1: #F7F5F0;
  --nb-on-dark-2: #B3B7C1;
  --nb-on-dark-3: #8C929F;
  --nb-mint: #83E1B6;
  --nb-mint-ink: #055522;
  --nb-coral: #FF5E56;
  --nb-coral-700: #C1272D;
  --nb-night-rgb: 1 12 40;

  /* Rueckmeldungsfarben */
  --nb-success-bg: #DAFCE2;
  --nb-success-border: #A7DDB4;
  --nb-success-solid: #3D9C5E;
  --nb-success-text: #247D46;
  --nb-warning-bg: #FFEFDD;
  --nb-warning-border: #ECCB9E;
  --nb-warning-solid: #EDB345;
  --nb-warning-text: #956011;
  --nb-critical-bg: #FFEBE8;
  --nb-critical-border: #F3BFBA;
  --nb-critical-solid: #C4403D;
  --nb-critical-text: #B7443D;

  /* Layer 2, Semantic Aliases. Pflicht-Quelle fuer Component-CSS */
  --nb-surface-page: #FFFFFF;
  /* Seitengrund K1, getönt. Karten darauf weiß ohne Rand, Bühne ink-100 (Umkehr-Regel E2) */
  --nb-surface-base: var(--nb-ink-50);
  --nb-surface-secondary: #F6F7FB;
  --nb-surface-warm: #F7F5F0;
  --nb-surface-info: #EDF0FE;
  --nb-surface-stage: #E4E9FE;
  --nb-surface-dark: #010C28;
  --nb-surface-dark-raised: #17243A;
  --nb-surface-component: #F2F4F7;
  --nb-text-heading: #010C28;
  --nb-text-body: #474D58;
  --nb-text-muted: #5E646D;
  --nb-text-accent: #473BDA;
  --nb-text-link: #473BDA;
  --nb-text-on-dark: #F7F5F0;
  --nb-text-on-dark-muted: #B3B7C1;
  --nb-text-on-dark-accent: #D4FA64;
  --nb-text-on-dark-link: #9DAEF7;
  --nb-text-on-lime: #010C28;
  --nb-text-on-signal: #FFFFFF;
  --nb-action-primary: #5850FF;
  --nb-action-primary-hover: #473BDA;
  --nb-action-primary-active: #382DB3;
  --nb-action-primary-label: #FFFFFF;
  --nb-action-bar-surface: #010C28;
  --nb-action-bar-button: #D4FA64;
  --nb-action-bar-button-label: #010C28;
  --nb-border-hairline: #E3E6EC;
  --nb-border-control: #777C84;
  --nb-border-dark-hairline: #25334A;
  --nb-border-dark-control: #949AA6;

  /* Alpha-Leiter, immer auf night-rgb, nie auf Schwarz */
  --nb-alpha-hairline: rgb(var(--nb-night-rgb) / 0.06);
  --nb-alpha-decorative: rgb(var(--nb-night-rgb) / 0.15);
  --nb-alpha-control: rgb(var(--nb-night-rgb) / 0.25);
  --nb-alpha-scrim: rgb(var(--nb-night-rgb) / 0.4);

  /* Schatten K1 (Daniel 30.09.2026, E1), gemessen an Back Market: ruht, Hover oder angehoben, nur Schwebendes.
     Karten ohne Rand, Hover nur der stärkere Schatten. Für jeden neuen Bau */
  --nb-sh-ruht: 0 2px 4px rgb(var(--nb-night-rgb) / .05);
  --nb-sh-hoch: 0 4px 8px rgb(var(--nb-night-rgb) / .08);
  --nb-sh-schwebt: 0 8px 16px rgb(var(--nb-night-rgb) / .12);

  /* Schatten bis 30.09.2026. Abgelöst durch sh-ruht, sh-hoch, sh-schwebt, bleiben bis zum Port jeder Seite */
  --nb-sh-card: 0 1px 2px rgb(var(--nb-night-rgb) / .05), 0 2px 6px rgb(var(--nb-night-rgb) / .05);
  --nb-sh-raised: 0 1px 0 rgb(var(--nb-night-rgb) / .06), 0 10px 30px -16px rgb(var(--nb-night-rgb) / .2);
  --nb-sh-panel: 0 2px 4px rgb(var(--nb-night-rgb) / .05), 0 18px 44px -20px rgb(var(--nb-night-rgb) / .34);
  --nb-sh-float: 0 16px 40px -14px rgb(var(--nb-night-rgb) / .5);

  /* Radius, 8er-Leiter */
  --nb-radius-badge: 8px;
  --nb-radius-input: 16px;
  --nb-radius-card: 24px;
  --nb-radius-container: 32px;
  --nb-radius-hero: 48px;
  --nb-radius-pill: 999px;

  /* Abstaende, 8er-Leiter plus drei Sektionsstufen */
  --nb-space-3xs: 4px;
  --nb-space-2xs: 8px;
  --nb-space-xs: 12px;
  --nb-space-s: 16px;
  --nb-space-m: 24px;
  --nb-space-l: 32px;
  --nb-space-xl: 48px;
  --nb-space-2xl: 64px;
  --nb-space-sektion-band: clamp(24px, 20.33px + 0.94vw, 32px);
  --nb-space-sektion-normal: clamp(56px, 37.65px + 4.71vw, 96px);
  --nb-space-sektion-gross: clamp(80px, 50.64px + 7.53vw, 144px);

  /* Motion, eine Kurve fuer alles */
  --nb-motion-kurve: cubic-bezier(.4, 0, .2, 1);
  --nb-motion-farbe: 200ms;
  --nb-motion-rand: 250ms;
  --nb-motion-transform: 300ms;
  --nb-motion-reveal: 600ms;
  --nb-motion-skeleton-sweep: 1200ms;

  /* Schrift */
  --nb-font-sans: Gilroy, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --nb-font-serif: "Poynter Old Style Display", Georgia, "Times New Roman", serif;
  --nb-weight-regular: 400;
  --nb-weight-semibold: 600;

  /* Typo-Skala als Rollen-Tokens */
  --nb-t-display-01: clamp(40px, 32.7px + 1.88vw, 56px);
  --nb-t-display-02: clamp(30px, 25.4px + 1.18vw, 40px);
  --nb-t-heading-01: clamp(24px, 22.2px + 0.47vw, 28px);
  --nb-t-heading-02: clamp(18px, 17.1px + 0.24vw, 20px);
  --nb-t-heading-03: 16px;
  --nb-t-body-01: 16px;
  --nb-t-body-02: 14px;
  --nb-t-label-01: 11px;
  --nb-t-legal-01: 12px;
  --nb-t-price-01: clamp(28px, 25.2px + 0.71vw, 34px);
  --nb-t-price-02: 16px;

  /* Layout */
  --nb-container: 1200px;
  --nb-measure: 65ch;
  --nb-breakpoint-desktop: 1240px;
  --nb-breakpoint-mobil: 390px;
}

/* Rollen-Klassen. Das Tag ist Semantik, die Rolle ist Gestaltung. */
.nb-v3 .nb-display-01 { font-family: var(--nb-font-sans); font-size: var(--nb-t-display-01); font-weight: var(--nb-weight-semibold); line-height: 1.05; letter-spacing: -0.03em; color: var(--nb-text-heading); }
.nb-v3 .nb-display-02 { font-family: var(--nb-font-sans); font-size: var(--nb-t-display-02); font-weight: var(--nb-weight-semibold); line-height: 1.08; letter-spacing: -0.03em; color: var(--nb-text-heading); }
.nb-v3 .nb-heading-01 { font-family: var(--nb-font-sans); font-size: var(--nb-t-heading-01); font-weight: var(--nb-weight-semibold); line-height: 1.15; letter-spacing: -0.02em; color: var(--nb-text-heading); }
.nb-v3 .nb-heading-02 { font-family: var(--nb-font-sans); font-size: var(--nb-t-heading-02); font-weight: var(--nb-weight-semibold); line-height: 1.25; letter-spacing: -0.01em; color: var(--nb-text-heading); }
.nb-v3 .nb-heading-03 { font-family: var(--nb-font-sans); font-size: var(--nb-t-heading-03); font-weight: var(--nb-weight-semibold); line-height: 1.4; letter-spacing: 0; color: var(--nb-text-heading); }
.nb-v3 .nb-body-01 { font-family: var(--nb-font-sans); font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-regular); line-height: 1.5; letter-spacing: 0; color: var(--nb-text-body); }
.nb-v3 .nb-body-02 { font-family: var(--nb-font-sans); font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-regular); line-height: 1.45; letter-spacing: 0; color: var(--nb-text-muted); }
.nb-v3 .nb-label-01 { font-family: var(--nb-font-sans); font-size: var(--nb-t-label-01); font-weight: var(--nb-weight-semibold); line-height: 1; letter-spacing: 0.12em; color: var(--nb-text-muted); text-transform: uppercase; }
.nb-v3 .nb-legal-01 { font-family: var(--nb-font-sans); font-size: var(--nb-t-legal-01); font-weight: var(--nb-weight-regular); line-height: 1.5; letter-spacing: 0; color: var(--nb-text-muted); }
.nb-v3 .nb-price-01 { font-family: var(--nb-font-sans); font-size: var(--nb-t-price-01); font-weight: var(--nb-weight-semibold); line-height: 1; letter-spacing: -0.03em; color: var(--nb-text-heading); font-variant-numeric: lining-nums; }
.nb-v3 .nb-price-02 { font-family: var(--nb-font-sans); font-size: var(--nb-t-price-02); font-weight: var(--nb-weight-semibold); line-height: 1.2; letter-spacing: -0.01em; color: var(--nb-text-heading); font-variant-numeric: lining-nums; }
/* Ziffern proportional außerhalb von Tabellen und Rechner (typografie.md §6, Daniel 26.09.2026). Tabellen, Warenkorb, Kasse und Rechner setzen tabular-nums selbst (nb-tradein.css) */

/* Kern-Code 3, das kursive Akzentwort. Kein Unterstrich, gestrichen 2026-09-05. */
.nb-v3 .nb-display-01 em, .nb-v3 .nb-display-02 em { font-family: var(--nb-font-serif); font-style: italic; font-weight: var(--nb-weight-semibold); color: var(--nb-text-accent); }
.nb-v3 .nb-auf-dunkel .nb-display-01 em, .nb-v3 .nb-auf-dunkel .nb-display-02 em { color: var(--nb-text-on-dark-accent); }

/* Fokus, WCAG-Technik G195. Kein border-radius-Reset, er quetscht jede Pille. */
.nb-v3 :focus-visible { outline: 2px solid #010C28; outline-offset: 3px; box-shadow: 0 0 0 5px #FFFFFF; }
/* Ziele mit tabindex="-1" (main fuer den Sprunglink, Fenster) sind keine Bedienelemente. Ein Klick auf eine leere
   Flaeche setzt dort den Fokus, und ein Druck auf Shift zeichnete den Ring um die ganze Seite (Daniel 28.09.2026) */
.nb-v3 [tabindex="-1"]:focus-visible { outline: none; box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  .nb-v3 *, .nb-v3 *::before, .nb-v3 *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}