/* ============================================================================
   Design Tokens — einzige Quelle für Farbe, Schrift, Abstand, Radius, Zeit.
   Regel: Kein Wert in components.css oder screens.css, der hier nicht steht.
   Dokumentation: docs/design/design-system.md
   ========================================================================== */

:root {
  /* --- Farbe: Grundton ---------------------------------------------------
     Die Palette ist bewusst schmal. Vier Grautöne, ein Akzent, drei Signale.
     Begründung: Kap. 4.2 — «Der SRF-Storytelling-Standard, nicht der
     App-Store-Standard». Farbe trägt hier keine Dekoration, nur Bedeutung. */
  --c-ink-900: #0d0c0f;   /* Seitengrund                    */
  --c-ink-800: #131118;   /* Verlauf oben                   */
  --c-ink-700: #15141a;   /* Flächen, Karten                */
  --c-ink-600: #1e1c24;   /* erhöhte Flächen, Inputs        */
  --c-ink-500: #302d38;   /* Linien, Trenner                */
  --c-ink-400: #4a4654;   /* Rahmen im Hover                */

  --c-bone-100: #e9e4da;  /* Fliesstext auf dunkel          */
  --c-bone-200: #c6c0b6;  /* Sekundärtext                   */
  --c-bone-300: #a49e94;  /* Tertiärtext                    */
  --c-bone-400: #6f6a63;  /* Fussnoten, Metadaten           */

  --c-accent:      #b8443c;  /* Akzent: aktiv, Fortschritt, Preis */
  --c-accent-hi:   #c94d44;  /* Hover                            */
  --c-accent-dim:  #7d2f2a;  /* Rahmen, gedämpft                 */
  --c-accent-soft: #e9a49e;  /* Umriss auf Akzentfläche          */

  --c-signal-warn: #c9973f;  /* Content-Warnung, Platzhalter    */
  --c-signal-ok:   #5c8c6a;  /* verifiziert, gelöst             */
  --c-signal-info: #6f8fb0;  /* Hinweis, offline                */

  --c-warn-bg: #1a160f;
  --c-warn-fg: #d8c9a6;

  /* --- Typografie --------------------------------------------------------
     Serif für alles Erzählerische, Sans für alles Bedienbare.
     Die Trennung ist die Aussage: Text ist Inhalt, UI ist Werkzeug. */
  --f-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --f-sans:  "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-mono:  ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;

  --t-display: 34px;  --t-display-lh: 1.1;
  --t-title:   24px;  --t-title-lh:   1.2;
  --t-heading: 19px;  --t-heading-lh: 1.3;
  --t-narrate: 16.5px; --t-narrate-lh: 1.62;  /* Lesetext im Player */
  --t-body:    15px;  --t-body-lh:    1.55;
  --t-ui:      13.5px;
  --t-meta:    12px;
  --t-micro:   11px;

  --track-eyebrow: .16em;
  --track-chip: .1em;

  /* --- Raster ------------------------------------------------------------ */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 56px;

  --r-sm: 6px; --r-md: 8px; --r-lg: 10px; --r-xl: 16px; --r-pill: 99px;

  /* --- Layout ------------------------------------------------------------ */
  --w-app: 520px;          /* Der Player ist ein Handformat, auch am Desktop */
  --h-topbar: 49px;
  --h-sheet: 46vh;
  --h-sheet-tall: 82%;
  --z-map: 1; --z-hud: 10; --z-sheet: 20; --z-bar: 30; --z-top: 40;
  --z-fab: 60; --z-drawer: 70; --z-toast: 80;

  /* --- Bewegung ----------------------------------------------------------
     Zurückhaltend. Nichts hüpft, nichts blinkt. */
  --m-fast: .15s; --m-base: .25s; --m-slow: .3s;
  --m-ease: cubic-bezier(.4, 0, .2, 1);

  /* --- Touch -------------------------------------------------------------
     44px Mindestziel. Die App wird im Gehen bedient, oft einhändig,
     oft in der Sonne. Kleiner geht nicht. */
  --hit-min: 44px;
}

/* Bewegungsreduktion respektieren — nicht optional, sondern Zugänglichkeit. */
@media (prefers-reduced-motion: reduce) {
  :root { --m-fast: .01s; --m-base: .01s; --m-slow: .01s; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}