/*
 * Design-Tokens, 1:1 aus /pushgate/design/tokens.json portiert (Slush-Designsystem).
 * Diese Datei ist KEINE eigene Interpretation — jeder Wert hat eine Entsprechung dort.
 * Quelle bei Zweifel: /pushgate/design/tokens.json + design/DESIGN-SYSTEM.md.
 *
 * Abweichung von der App-Portierung (bewusst, weil hier der native Slush-Zielmedium ist):
 * Slush selbst ist ein Web-System mit fluid root font-size (1em = 16px nur am Mobile-Breakpoint).
 * Auf dieser Website skaliert die Wurzel deshalb leicht mit der Viewport-Breite, sodass alle
 * em-Werte (Space, Radius, Type, Border) auf großen Screens mitwachsen — genau wie im Original,
 * nicht nur wie in der auf 16px fixierten Telefon-Portierung der App. Die genauen
 * Desktop-Breakpoint-Werte aus slush-design-system/PLAYBOOK.md wurden dafür NICHT 1:1
 * übernommen (die Formel ist bekannt, die Breakpoint-Tabelle wurde für dieses Dokument nicht
 * neu ausgemessen) — die Kurve unten ist eine vernünftige Näherung, kein Anspruch auf exakte
 * Parität mit slush.app.
 *
 * Schriften: Lateral + Aeonik Pro sind bei Slush kommerzielles, nicht lizenziertes CDN-Material
 * (siehe font.$comment in tokens.json). Für eine öffentliche Website — anders als für einen
 * App-Prototyp im eigenen Simulator — ist das kein vertretbares Risiko. Diese Seite nutzt daher
 * von Anfang an die im selben Dokument empfohlenen offenen Ersatzschriften: Anton (Display) und
 * Inter Tight (Text), beide OFL-lizenziert, selbst gehostet unter assets/fonts/.
 */

:root {
  /* Fluid root: 16px an schmalen Screens (Slush-Mobile-Breakpoint), moderat wachsend bis ~19px
     auf großen Desktop-Screens. Alles unten ist em -- skaliert automatisch mit. */
  font-size: clamp(16px, 15px + 0.6vw, 19px);
}

:root {
  /* ---------- Farbe: 'light' -- Karten-Screens ---------- */
  --color-bg: #000000;
  --color-onBg: #ffffff;
  --color-surface: #ffffff;
  --color-onSurface: #000000;
  --color-surfaceChip: #dceeff;
  --color-onSurfaceChip: #000000;
  --color-border: #000000;
  --color-accent: #4da2ff;
  --color-onAccent: #000000;
  --color-emphasis: #ffd731;
  --color-onEmphasis: #000000;
  --color-textPrimary: #000000;
  --color-textSecondary: rgba(0, 0, 0, 0.7);
  --color-textSecondary-50: rgba(0, 0, 0, 0.5);
  --color-danger: #fb4903;
  --color-dangerText: #ca1a38;
  --color-scrim: #000000;

  /* ---------- Farbe: 'dark' -- Vollflächen-Screens ---------- */
  --colorDark-bg: #000000;
  --colorDark-onBg: #ffffff;
  --colorDark-surface: #000000;
  --colorDark-onSurface: #ffffff;
  --colorDark-surfaceChip: #4da2ff;
  --colorDark-onSurfaceChip: #000000;
  --colorDark-border: #000000;
  --colorDark-accent: #4da2ff;
  --colorDark-onAccent: #000000;
  --colorDark-emphasis: #ffd731;
  --colorDark-onEmphasis: #000000;
  --colorDark-textPrimary: #ffffff;
  --colorDark-textSecondary: rgba(255, 255, 255, 0.7);
  --colorDark-dangerText: #fb4903;

  /* ---------- Die fünf Akzente (Rotation violett -> blau -> grün -> gelb -> orange) ---------- */
  --accent-violet-700: #e9ccff;
  --accent-violet-100: #f8f0ff;
  --accent-blue-700: #4da2ff;
  --accent-blue-100: #dceeff;
  --accent-green-700: #55db9c;
  --accent-green-100: #99e9c4;
  --accent-yellow-700: #ffd731;
  --accent-yellow-100: #ffefad;
  --accent-orange-700: #fb4903;
  --accent-orange-100: #ffefad;
  --accent-purple-700: #5c4ade;
  --accent-purple-100: #f8f0ff;

  /* ---------- Deckkraft-Rampe (ersetzt Grau) ---------- */
  --opacity-70: 0.7;
  --opacity-50: 0.5;
  --opacity-30: 0.3;
  --opacity-watermark: 0.6;

  /* ---------- Abstand (em, 1em = 16pt an der Slush-Mobile-Wurzel) ---------- */
  --space-xxs: 0.25em;
  --space-xs: 0.5em;
  --space-sm: 0.75em;
  --space-md: 1em;
  --space-lg: 1.25em;
  --space-xl: 1.5em;
  --space-xxl: 2em;
  --space-xxxl: 3em;
  --space-huge: 4em;
  --space-screenPadding: 0.75em;
  --space-cardPadding: 1.875em;
  --space-sectionPadding: 2.75em;

  /* ---------- Radius ---------- */
  --radius-sm: 1.25em;
  --radius-md: 1.875em;
  --radius-lg: 2.5em;
  --radius-pill: 999px;

  /* ---------- Rahmen ---------- */
  --border-width: 0.125em;
  --border-widthThick: 0.25em;

  /* ---------- Größen ---------- */
  --size-buttonHeight: 3.5em;
  --size-buttonHeightHero: 4em;
  --size-chipHeight: 2.5em;
  --size-circleButton: 3.125em;
  --size-iconTile: 3.5em;

  /* ---------- Schrift ---------- */
  --font-display: "Anton", "Arial Narrow", sans-serif;
  --font-body: "Inter Tight", -apple-system, "Segoe UI", sans-serif;

  /* ---------- Typ-Skala (em, Faktoren wie in tokens.json) ---------- */
  --type-display-size: 2.75em;      /* 44 / 16 */
  --type-display-line: 2.25em;      /* 36 / 16 */
  --type-title-size: 2em;           /* 32 / 16 */
  --type-title-line: 1.625em;
  --type-headline-size: 1.25em;     /* 20 / 16 */
  --type-headline-line: 1.375em;
  --type-body-size: 1em;            /* 16 / 16 */
  --type-body-line: 1.25em;
  --type-label-size: 1.0625em;      /* 17 / 16 */
  --type-label-line: 1.25em;
  --type-caption-size: 0.8125em;    /* 13 / 16 */
  --type-caption-line: 1em;
  --type-overline-size: 0.8125em;
  --type-overline-line: 1em;
  --type-stat-size: 4em;            /* 64 / 16 */
  --type-stat-line: 3.1875em;
  --type-marquee-size: 6em;         /* 96 / 16, an dieser Website eher als 5em genutzt */

  --displayTrim-top: 0.08em;
  --displayTrim-bottom: -0.1em;

  /* ---------- Zustände ---------- */
  --state-pressed-scale: 0.955;
  --state-disabled-opacity: 0.35;
  --state-hoverTile-scale: 0.92;
  --state-focusRing-width: 0.125em;
  --state-focusRing-offset: 0.25em;

  /* ---------- Bewegung ---------- */
  /* Web-Näherung von Slushs --elastic-ease-out (Überschwinger ~1.14): eine back-out-Bezier.
     Kein ease / ease-in-out / linear -- siehe motion.$comment in tokens.json. */
  --motion-elastic: cubic-bezier(0.34, 1.56, 0.64, 1);
  --motion-duration-default: 0.75s;
  --motion-duration-medium: 0.85s;
  --motion-duration-fade: 0.15s;
  --motion-marquee-duration: 20s;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-elastic: ease-out;
    --motion-duration-default: 0.15s;
    --motion-duration-medium: 0.15s;
    --motion-marquee-duration: 0s;
  }
}