/* ==========================================================================
   Videokonverter · Design Tokens v2
   --------------------------------------------------------------------------
   Kopie der KodiniTools-Tokens v2 aus dem Collage Maker
   (KodiniTools/Collage-Maker, src/design-system/tokens-v2.css, Stand 9dc4eca),
   dort wiederum aus dem Playlist Generator (Stand 89bb48e). Werte werden dort
   gepflegt und hierher übernommen, nicht lokal geändert.
   Maschinenlesbar: ../design-system/tokens-v2.json · Doku: ../design-system/README.md

   Theme-Mechanik: Dark auf :root, Light auf body.light-theme und
   html[data-theme='light'] (SSI-Partials). Beide Light-Selektoren tragen den
   vollständigen Satz, damit auch Partials --ds-* nutzen können.

   Composite-Tokens mit var() (--ds-focus-ring) sind in den Light-Blöcken
   erneut deklariert, weil var() auf dem deklarierenden Element aufgelöst wird.
   ========================================================================== */

/* === Dark (Standard) === */
:root {
  /* Flächen */
  --ds-surface-0: #0a1324;
  --ds-surface-1: #111d33;
  --ds-surface-2: #182741;
  --ds-surface-3: #1f3050;
  --ds-border: #223553;
  --ds-border-strong: #2f4668;

  /* Text */
  --ds-text: #f2eee2;
  --ds-text-2: #a7b3c4;
  --ds-text-3: #8593a8;

  /* Akzent */
  --ds-accent: #d4a257;
  --ds-accent-hover: #e0b06a;
  --ds-accent-soft: rgba(212, 162, 87, 0.14);
  --ds-on-accent: #0a1324;
  --ds-link: #6aaef5;

  /* Status */
  --ds-success: #5fcf8a;
  --ds-warning: #e3b341;
  --ds-danger: #ef6b6b;
  --ds-info: #6aaef5;

  /* Effekte (theme-abhängig) */
  --ds-focus-ring: 0 0 0 2px var(--ds-surface-0), 0 0 0 4px var(--ds-accent);
  --ds-shadow-overlay: 0 8px 24px rgba(0, 0, 0, 0.35);

  /* === Typografie === */
  --ds-font-sans: 'Supreme', sans-serif;
  --ds-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --ds-text-xs: 12px;
  --ds-text-sm: 13px;
  --ds-text-md: 14px;
  --ds-text-lg: 16px;
  --ds-text-xl: 20px;
  --ds-text-2xl: 24px;
  --ds-text-3xl: 32px;
  --ds-weight-regular: 400;
  --ds-weight-medium: 500;
  --ds-weight-semibold: 600;
  --ds-weight-bold: 700;
  --ds-leading: 1.5;
  --ds-leading-tight: 1.25;
  --ds-tracking-tight: -0.01em;

  /* === Abstände (4er-Raster) === */
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 20px;
  --ds-space-6: 24px;
  --ds-space-8: 32px;
  --ds-space-10: 40px;
  --ds-space-12: 48px;
  --ds-space-16: 64px;

  /* === Form === */
  --ds-radius-sm: 6px;
  --ds-radius-md: 10px;
  --ds-radius-lg: 16px;
  --ds-radius-full: 999px;
  --ds-border-width: 1px;

  /* === Motion === */
  --ds-duration: 150ms;
  --ds-duration-slow: 250ms;
  --ds-ease: cubic-bezier(0.2, 0, 0, 1);

  /* === Größen === */
  --ds-control-sm: 28px;
  --ds-control-md: 36px;
  --ds-control-lg: 40px;
  --ds-row-height: 44px;
  --ds-topbar-height: 56px;
  --ds-player-height: 60px;
  --ds-icon-sm: 16px;
  --ds-icon-md: 20px;
  --ds-icon-stroke: 1.75;

  /* === Layout === */
  --ds-container: 1200px;
  --ds-gutter: 24px;
  --ds-gap: 20px;

  /* === Ebenen === */
  --ds-z-topbar: 500;
  --ds-z-player: 900;
  --ds-z-backdrop: 1000;
  --ds-z-dialog: 1001;
  --ds-z-toast: 9999;
}

/* === Light (App) === */
.light-theme {
  --ds-surface-0: #f6f5f1;
  --ds-surface-1: #ffffff;
  --ds-surface-2: #f0eee8;
  --ds-surface-3: #e8e5dd;
  --ds-border: #e2dfd7;
  --ds-border-strong: #cbc6ba;

  --ds-text: #14213a;
  --ds-text-2: #3f4a60;
  --ds-text-3: #5f6b84;

  --ds-accent: #c9984d;
  --ds-accent-hover: #b8842f;
  --ds-accent-soft: rgba(201, 152, 77, 0.16);
  --ds-on-accent: #14213a;
  --ds-link: #0f5aa8;

  --ds-success: #177a42;
  --ds-warning: #9a6416;
  --ds-danger: #c93c3c;
  --ds-info: #0f5aa8;

  --ds-focus-ring: 0 0 0 2px var(--ds-surface-0), 0 0 0 4px var(--ds-accent);
  --ds-shadow-overlay: 0 8px 24px rgba(20, 33, 58, 0.12);
}

/* === Light (SSI-Partials, spiegelt .light-theme vollständig) === */
:root[data-theme='light'] {
  --ds-surface-0: #f6f5f1;
  --ds-surface-1: #ffffff;
  --ds-surface-2: #f0eee8;
  --ds-surface-3: #e8e5dd;
  --ds-border: #e2dfd7;
  --ds-border-strong: #cbc6ba;

  --ds-text: #14213a;
  --ds-text-2: #3f4a60;
  --ds-text-3: #5f6b84;

  --ds-accent: #c9984d;
  --ds-accent-hover: #b8842f;
  --ds-accent-soft: rgba(201, 152, 77, 0.16);
  --ds-on-accent: #14213a;
  --ds-link: #0f5aa8;

  --ds-success: #177a42;
  --ds-warning: #9a6416;
  --ds-danger: #c93c3c;
  --ds-info: #0f5aa8;

  --ds-focus-ring: 0 0 0 2px var(--ds-surface-0), 0 0 0 4px var(--ds-accent);
  --ds-shadow-overlay: 0 8px 24px rgba(20, 33, 58, 0.12);
}