/* Mivix Media Design System – Tokens (Quelle: Artifact „Mivix Media Design System“, tokens.json) */
@font-face {
  font-family: "Manrope";
  src: url("/assets/fonts/manrope-variable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  /* Farbe – dunkel ist Standard */
  --ground: #0e0e10;
  --surface: #1a1a1d;
  --surface-alt: #242428;
  --ink: #f5f2ec;
  --ink-muted: #a8a39a;
  --line: #2e2e33;
  --line-strong: #7d7972;
  --signal: #ff5a1f;
  --signal-hover: #ff7a47;
  --on-signal: #0e0e10;
  --signal-ink: #ff6a33;
  --focus: #f5f2ec;
  --scrim: rgba(14, 14, 16, 0.64);
  --on-media: #f5f2ec;
  --danger: #ff8fa3;
  --success: #4fc9d9;

  /* Schrift */
  --font-sans: "Manrope", system-ui, sans-serif;

  /* Abstand */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 64px;
  --space-7: 96px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Bewegung (Erweiterung für die Website) */
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --dur-fast: 200ms;
  --dur-reveal: 700ms;

  /* Layout */
  --container: 1240px;
  --gutter: 20px;
  --header-h: 72px;
}

/* Farben als echte Farbwerte registrieren, damit der Wechsel Hell → Dunkel weich überblendet */
@property --ground      { syntax: "<color>"; inherits: true; initial-value: #0e0e10; }
@property --surface     { syntax: "<color>"; inherits: true; initial-value: #1a1a1d; }
@property --surface-alt { syntax: "<color>"; inherits: true; initial-value: #242428; }
@property --ink         { syntax: "<color>"; inherits: true; initial-value: #f5f2ec; }
@property --ink-muted   { syntax: "<color>"; inherits: true; initial-value: #a8a39a; }
@property --line        { syntax: "<color>"; inherits: true; initial-value: #2e2e33; }
@property --line-strong { syntax: "<color>"; inherits: true; initial-value: #7d7972; }
@property --signal-ink  { syntax: "<color>"; inherits: true; initial-value: #ff6a33; }
@property --signal-hover { syntax: "<color>"; inherits: true; initial-value: #ff7a47; }
@property --focus       { syntax: "<color>"; inherits: true; initial-value: #f5f2ec; }

/* Helles Theme für lange Textstrecken (Impressum, Datenschutz) */
.theme-light {
  color-scheme: light;
  --ground: #f5f2ec;
  --surface: #ffffff;
  --surface-alt: #ebe7df;
  --ink: #0e0e10;
  --ink-muted: #5e5a53;
  --line: #ddd8ce;
  --line-strong: #857f76;
  --signal-hover: #e94e16;
  --signal-ink: #ad3708;
  --focus: #0e0e10;
  --danger: #b4232f;
  --success: #0a6170;
}