/* ============================================================
   DMC  tokens.css  -  Notturno di Modena
   Farb- und Schrift-Tokens final aus SHARED_CONVENTIONS.
   Skalen (Typo, Spacing, Radien, Elevation, Motion, z, Container,
   Focus) ergaenzt. Dunkles Theme primaer.
   ============================================================ */
:root{
  color-scheme: dark;

  /* ---- FARBEN  (SHARED_CONVENTIONS, verbindlich) ---- */
  --bg:oklch(13% .02 264);
  --bg-2:oklch(16% .02 264);
  --surface:oklch(18% .022 263);
  --surface-2:oklch(22% .024 262);
  --surface-3:oklch(27% .026 260);
  --text:oklch(95% .01 86);
  --text-muted:oklch(72% .015 256);
  --text-faint:oklch(58% .012 260);
  --hairline:oklch(100% 0 0 / .10);
  --hairline-soft:oklch(100% 0 0 / .06);
  --hairline-strong:oklch(100% 0 0 / .20);
  --accent:oklch(59% .185 262);
  --accent-hover:oklch(66% .175 262);
  --accent-strong:oklch(50% .17 262);
  --accent-soft:oklch(59% .185 262 / .14);
  --accent-line:oklch(59% .185 262 / .55);
  --accent-glow:oklch(72% .15 258);
  --accent-contrast:oklch(98% 0 0);
  --rame:oklch(70% .12 60);
  --rame-luce:oklch(83% .085 78);
  --rame-soft:oklch(70% .12 60 / .14);
  --corsa:oklch(45% .14 27);
  --ok:oklch(72% .13 155);
  --warn:oklch(80% .11 78);
  --danger:oklch(64% .17 25);
  /* abgeleitete Status-Flaechen (Skala-Ergaenzung, dezent) */
  --ok-soft:oklch(72% .13 155 / .14);
  --warn-soft:oklch(80% .11 78 / .14);
  --danger-soft:oklch(64% .17 25 / .14);
  --corsa-soft:oklch(45% .14 27 / .18);

  /* ---- SCHRIFT (SHARED_CONVENTIONS; @font-face liegt in fonts.css) ---- */
  --font-display:"Bodoni Moda",Georgia,serif;
  --font-sans:"Archivo",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;

  /* ---- TYPO-SKALA (fluid, clamp min@360 -> max@1440+) ---- */
  --text-caption:clamp(.75rem,.72rem + .15vw,.8125rem);
  --text-body:clamp(1rem,.96rem + .2vw,1.125rem);
  --text-lead:clamp(1.125rem,1.03rem + .45vw,1.4375rem);
  --text-h4:clamp(1.25rem,1.1rem + .7vw,1.75rem);
  --text-h3:clamp(1.5rem,1.24rem + 1.2vw,2.25rem);
  --text-h2:clamp(2rem,1.53rem + 2.2vw,3.25rem);
  --text-h1:clamp(2.75rem,1.88rem + 4vw,4.75rem);
  --text-display:clamp(3.5rem,1.8rem + 8vw,7rem);
  --text-hero:clamp(4rem,.35rem + 14vw,10.5rem);

  --leading-tight:1.04;--leading-snug:1.15;--leading-normal:1.55;--leading-relaxed:1.7;
  --tracking-tight:-.02em;--tracking-normal:0;--tracking-wide:.06em;--tracking-kicker:.2em;
  --weight-regular:400;--weight-medium:500;--weight-semibold:600;

  /* ---- SPACING (4px-Basis + fluide Sektions-Tokens) ---- */
  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;
  --space-5:1.5rem;--space-6:2rem;--space-7:2.5rem;--space-8:3rem;
  --space-9:4rem;--space-10:5rem;--space-11:6rem;--space-12:8rem;
  --space-section:clamp(4rem,2.5rem + 7.5vw,10rem);
  --space-section-lg:clamp(6rem,3rem + 12vw,14rem);
  --gutter:clamp(1.25rem,.8rem + 2.2vw,2.5rem);

  /* ---- RADIEN (praezise, klein) ---- */
  --radius-xs:2px;--radius-sm:4px;--radius-md:8px;--radius-lg:14px;
  --radius-xl:22px;--radius-pill:999px;--radius-round:50%;

  /* ---- ELEVATION + GLOW (dunkel-getunt) ---- */
  --shadow-1:0 1px 2px rgba(0,0,0,.45);
  --shadow-2:0 4px 16px -4px rgba(0,0,0,.55);
  --shadow-3:0 14px 44px -8px rgba(0,0,0,.62);
  --shadow-4:0 28px 80px -12px rgba(0,0,0,.72);
  --edge-catch:inset 0 1px 0 oklch(100% 0 0 / .06);
  --glow-accent:0 0 0 1px oklch(59% .185 262 / .5),0 10px 34px -8px oklch(59% .185 262 / .4);
  --glow-accent-soft:0 0 26px -6px oklch(72% .15 258 / .38);
  --glow-rame:0 0 24px -6px oklch(70% .12 60 / .35);

  /* ---- BORDER / HAIRLINE ---- */
  --border:1px solid var(--hairline);
  --border-strong:1px solid var(--hairline-strong);
  --border-accent:1px solid var(--accent-line);

  /* ---- MOTION (Dauer + Easing) ---- */
  --dur-fast:140ms;--dur-normal:260ms;--dur-slow:520ms;--dur-hero:900ms;
  --ease-out-expo:cubic-bezier(.16,1,.3,1);
  --ease-out-quint:cubic-bezier(.22,1,.36,1);
  --ease-lux:cubic-bezier(.65,0,.35,1);
  --ease-standard:cubic-bezier(.4,0,.2,1);

  /* ---- LAYOUT / CONTAINER ---- */
  --container-prose:68ch;--container-lg:1024px;--container-xl:1200px;
  --container-2xl:1440px;--container-max:1600px;
  --header-h:clamp(64px,4vw,84px);

  /* ---- Z-INDEX-SKALA ---- */
  --z-base:0;--z-raised:10;--z-sticky:100;--z-header:1000;--z-dropdown:1100;
  --z-overlay:2000;--z-modal:2100;--z-toast:3000;--z-consent:3500;--z-max:9999;

  /* ---- A11Y ---- */
  --focus-ring:0 0 0 2px var(--bg),0 0 0 4px var(--accent-hover);
  --focus-offset:2px;

  /* ---- BREAKPOINTS (Referenz; @media nutzt px direkt) ---- */
  --bp-md:768px;--bp-lg:1024px;--bp-xl:1280px;--bp-2xl:1440px;
}