/* OUTPLAY · Design-Tokens als CSS-Variablen. Stand 24.10.2026, Entwicklungsstand der App.
   Werte exakt aus ios/OUTPLAY/Design.swift (App) und videos/outplay-showcase/frame.md (Marketing).
   Hell ist Standard. Dunkel folgt dem System oder wird mit <html data-theme="dark"> erzwungen,
   mit data-theme="light" bleibt es hell.
   Pfad zu den Schriften unten bei Bedarf anpassen. */

@font-face {
  font-family: "Barlow Condensed";
  src: url("../fonts/BarlowCondensed-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Farben, App, hell */
  --op-brand: #B92D29;          /* Hauptrot. Weißer Text darauf: 6,05:1. Offene Entscheidung, siehe BRAND.md */
  --op-brand-display: #C93631;  /* nur große Schrift (ab 24 px) */
  --op-brand-soft: #FBE5DF;
  --op-brand-ink: #81231F;      /* kleine rote Schrift, Icons */
  --op-hunter: #285AB8;
  --op-runner: #9C500A;
  --op-danger: #81262D;
  --op-background: #F7F4F0;
  --op-surface: #FFFFFF;
  --op-ink: #241C1D;
  --op-muted: #6B5B59;
  --op-line: #E4DAD4;
  --op-destructive: rgb(46% 10% 14%); /* Löschen / Beenden, ohne Hex im App-Code */
  --op-on-brand: #FFFFFF;

  /* Farben, Marketing (Video). Altbestand, siehe BRAND.md "Abweichungen" */
  --op-mkt-coral: #C92F2A;
  --op-mkt-coral-dark: #A52420;
  --op-mkt-cream: #F7F4EF;
  --op-mkt-cream-dark: #F4CAC8;
  --op-mkt-black: #211C1A;
  --op-mkt-gray: #6B6B6B;
  --op-mkt-light-gray: #B0B0B0;
  --op-mkt-white: #FFFFFF;

  /* Schriften */
  --op-font-display: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", sans-serif; /* Empfehlung für Web, die App nutzt SF Pro Condensed Black */
  --op-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --op-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* nur Eyebrows wie in der App */

  /* Schriftgrößen (App-Werte in pt, hier px) */
  --op-size-wordmark: 26px;
  --op-size-wordmark-large: 58px;
  --op-size-display: 52px;
  --op-size-display-compact: 38.48px;
  --op-size-start-headline: 64px;
  --op-size-timer: 36px;
  --op-size-mode-title: 22px;
  --op-size-eyebrow: 12px;

  /* Tracking (App: Punkte bei der jeweiligen Größe, hier als em umgerechnet) */
  --op-tracking-wordmark: -0.0308em;        /* -0,8 bei 26 */
  --op-tracking-wordmark-large: -0.0431em;  /* -2,5 bei 58 */
  --op-tracking-display: -0.0346em;         /* -1,8 bei 52 */
  --op-tracking-display-compact: -0.026em;  /* -1 bei 38,48 */
  --op-tracking-start-headline: -0.0406em;  /* -2,6 bei 64 */
  --op-tracking-eyebrow: 0.125em;           /* 1,5 bei 12 */

  /* Radien */
  --op-radius-avatar-hunter: 10px;
  --op-radius-icon: 14px;
  --op-radius-button: 16px;
  --op-radius-notice: 16px;
  --op-radius-sos: 18px;
  --op-radius-surface: 20px;
  --op-radius-mode-card: 22px;
  --op-radius-panel: 24px;
  --op-radius-pill: 999px;

  /* Maße */
  --op-page-gutter: 24px;
  --op-section-gap: 24px;
  --op-gap-compact: 10px;
  --op-button-min-height: 58px;
  --op-capsule-min-height: 48px;
  --op-touch-min: 44px;
  --op-surface-padding: 20px;
  --op-notice-padding: 16px;

  /* Schatten (Näherung: Blur = 2 × SwiftUI-Radius, nicht verifiziert) */
  --op-shadow-hero: 0 8px 36px rgb(185 45 41 / 0.25);
  --op-shadow-card: 0 4px 20px rgb(0 0 0 / 0.05);
  --op-shadow-panel: 0 6px 36px rgb(0 0 0 / 0.10);
  --op-shadow-ping: 0 6px 32px rgb(185 45 41 / 0.35);
  --op-shadow-zone: 0 6px 28px rgb(0 0 0 / 0.18);

  /* Bewegung */
  --op-ping-period: 1.8s;
  --op-ping-scale: 2.6;
  --op-press-scale: 0.975;
  --op-press-opacity: 0.84;
  --op-disabled-opacity: 0.42;
  --op-ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* Näherung an die Feder der App, im Browser prüfen */
  --op-dur-press: 0.28s;
  --op-dur-entrance: 0.5s;
  --op-entrance-offset: 18px;
  --op-entrance-stagger: 0.06s;
}

/* Dunkel, System */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --op-brand-soft: #402321;
    --op-brand-ink: #FFC0B4;
    --op-hunter: #92B8FF;
    --op-runner: #FFBD7D;
    --op-danger: #FFB3BC;
    --op-background: #171314;
    --op-surface: #261F20;
    --op-ink: #FFF5EF;
    --op-muted: #CDBBB5;
    --op-line: #473B3C;
  }
}
/* Dunkel, erzwungen */
:root[data-theme="dark"] {
  color-scheme: dark;
  --op-brand-soft: #402321;
  --op-brand-ink: #FFC0B4;
  --op-hunter: #92B8FF;
  --op-runner: #FFBD7D;
  --op-danger: #FFB3BC;
  --op-background: #171314;
  --op-surface: #261F20;
  --op-ink: #FFF5EF;
  --op-muted: #CDBBB5;
  --op-line: #473B3C;
}

/* ---------- Bausteine nach dem App-Code (Zeilenhöhen sind Näherungen) ---------- */

body {
  background: var(--op-background);
  color: var(--op-ink);
  font-family: var(--op-font-body);
}

/* Wortzeichen: Text, kein Logo-Bild. Eine Zeile, Großbuchstaben. */
.op-wordmark {
  font-family: var(--op-font-display);
  font-weight: 900;
  font-size: var(--op-size-wordmark);
  letter-spacing: var(--op-tracking-wordmark);
  line-height: 1;
  white-space: nowrap;
  text-transform: uppercase;
}
.op-wordmark--large {
  font-size: var(--op-size-wordmark-large);
  letter-spacing: var(--op-tracking-wordmark-large);
}

.op-display {
  font-family: var(--op-font-display);
  font-weight: 900;
  font-size: var(--op-size-display);
  letter-spacing: var(--op-tracking-display);
  line-height: 0.96;
  text-transform: uppercase;
  color: var(--op-ink);
}
.op-display--compact { font-size: var(--op-size-display-compact); letter-spacing: var(--op-tracking-display-compact); }
.op-display--brand { color: var(--op-brand-display); }

.op-eyebrow {
  font-family: var(--op-font-mono);
  font-size: var(--op-size-eyebrow);
  font-weight: 600;
  letter-spacing: var(--op-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--op-muted);
}

.op-surface {
  background: var(--op-surface);
  border-radius: var(--op-radius-surface);
  padding: var(--op-surface-padding);
}

.op-button {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: var(--op-button-min-height);
  padding: 15px 20px;
  border-radius: var(--op-radius-button);
  border: 1px solid transparent;
  background: var(--op-brand);
  color: var(--op-on-brand);
  font: 600 17px/1.2 var(--op-font-body);
  cursor: pointer;
  transition: transform var(--op-dur-press) var(--op-ease-spring), opacity var(--op-dur-press);
}
.op-button:active { transform: scale(var(--op-press-scale)); opacity: var(--op-press-opacity); }
.op-button:disabled { opacity: var(--op-disabled-opacity); }
.op-button--secondary { background: var(--op-surface); color: var(--op-ink); border-color: var(--op-line); }
.op-button--destructive { background: var(--op-destructive); }

.op-notice {
  padding: var(--op-notice-padding);
  border-radius: var(--op-radius-notice);
  background: color-mix(in srgb, var(--op-brand-ink) 8%, transparent);
}

.op-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 8px; border-radius: var(--op-radius-pill);
  font: 600 12px/1.2 var(--op-font-body);
  background: var(--op-brand-soft); color: var(--op-brand-ink);
}
.op-pill--strong { background: var(--op-brand); color: var(--op-on-brand); }

/* Ping-Motiv: Ring läuft vom Punkt nach außen und verblasst. */
.op-ping { position: relative; display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: currentColor; }
.op-ping::before, .op-ping::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid currentColor;
  animation: op-ping var(--op-ping-period) linear infinite;
}
.op-ping::after { animation-delay: calc(var(--op-ping-period) / -2); }
@keyframes op-ping {
  from { transform: scale(1); opacity: 0.9; }
  to   { transform: scale(var(--op-ping-scale)); opacity: 0; }
}

@keyframes op-entrance {
  from { opacity: 0; transform: translateY(var(--op-entrance-offset)); }
  to   { opacity: 1; transform: none; }
}
.op-entrance { animation: op-entrance var(--op-dur-entrance) var(--op-ease-spring) both; animation-delay: calc(var(--i, 0) * var(--op-entrance-stagger)); }

/* "Bewegung reduzieren": keine Dauerschleifen, keine Skalierung, Inhalt sofort sichtbar. */
@media (prefers-reduced-motion: reduce) {
  .op-ping::before, .op-ping::after { animation: none; transform: scale(1.8); opacity: 0.35; }
  .op-entrance { animation: none; }
  .op-button { transition: none; }
  .op-button:active { transform: none; }
}