/* tokens.css — Design token defaults (Dark Mode baseline).
   Theme files override specific tokens. E-Ink sets --t-motion: 0.
   ================================================================ */

:root {
  /* ── Colors ──────────────────────────────────────── */
  --t-bg:           #0c0c14;
  --t-surface:      #12121e;
  --t-surface-2:    #1a1a2e;
  --t-border:       rgba(255, 255, 255, 0.08);
  --t-border-strong:#252540;
  --t-text-1:       #eeeef8;
  --t-text-2:       #7878a8;
  --t-text-3:       #484868;
  --t-accent:       #4a9eff;

  /* Transport type colors */
  --t-metro:        #d63031;
  --t-tram:         #e17055;
  --t-bus:          #0984e3;
  --t-train:        #00b894;

  /* Status colors */
  --t-realtime:     #00cec9;
  --t-planned:      #fdcb6e;
  --t-error:        #e84393;
  --t-stale:        #fdcb6e;
  --t-stale-bg:     rgba(253, 203, 110, 0.10);

  /* Semantic aliases (shared CSS uses these) */
  --color-bg:       var(--t-bg);
  --color-surface:  var(--t-surface);
  --color-surface-2:var(--t-surface-2);
  --color-border:   var(--t-border);
  --color-text-1:   var(--t-text-1);
  --color-text-2:   var(--t-text-2);
  --color-text-3:   var(--t-text-3);
  --color-accent:   var(--t-accent);
  --color-metro:    var(--t-metro);
  --color-tram:     var(--t-tram);
  --color-bus:      var(--t-bus);
  --color-train:    var(--t-train);
  --color-realtime: var(--t-realtime);
  --color-planned:  var(--t-planned);
  --color-error:    var(--t-error);
  --color-stale:    var(--t-stale);
  --color-stale-bg: var(--t-stale-bg);
  --color-clock:    var(--t-text-1);
  --color-spinner:  var(--t-accent);

  /* ── Typography (Skala relativ, kein px) ─────────── */
  --t-font:         system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --t-font-size:    100%;

  /* ── Sizing (rem: feste typografische Skala, unabhängig von %-Eltern) ─ */
  --t-clock:        2.8rem;
  --t-countdown:    1.95rem;
  --t-direction:    1.1rem;
  --t-badge:        2.6rem;
  --t-badge-font:   1.05rem;
  --t-label:        0.68rem;
  --t-meta:         0.75rem;

  /* ── Spacing (% der Blockbreite; vertikaler % ebenfalls Breitenbasis) ─ */
  --t-gap:          1.35%;
  /* Vertikale Stacks: em/rem — vermeidet zyklisches % row-gap (0px) in auto-höhen-Flex-Spalten */
  --t-stack-after-heading:   min(0.38em, 0.52rem);
  --t-stack-between-cards:   max(0.58em, min(0.72rem, 1.05vw));
  --t-stack-between-regions: max(0.78em, min(0.95rem, 1.55vw));
  --t-pad-card:     1.6% 2.2%;
  --t-pad-page:     2.1% 3.4%;
  --t-pad-bar:      0.95% 2.8%;

  /* ── Shape (vw/em, keine px-Kantenmaße) ───────────── */
  --t-radius:       min(3.4vw, 0.9em);
  --t-radius-sm:    min(2.1vw, 0.58em);
  --t-radius-md:    min(3.8vw, 0.95em);
  --t-hairline:     min(0.09em, 0.22vw);

  /* ── Elevation (Offsets in em) ───────────────────── */
  --t-shadow:       0 0.06em 0.2em rgba(0, 0, 0, 0.45), 0 0.14em 0.55em rgba(0, 0, 0, 0.25);
  --t-shadow-hover: 0 0.12em 0.4em rgba(0, 0, 0, 0.55), 0 0.22em 1.05em rgba(0, 0, 0, 0.3);
  --t-shadow-elevated: 0 0.5em 1.85em rgba(0, 0, 0, 0.38);

  /* Abfahrtstafel: max. Breite reaktiv (% / vw) */
  --layout-board-max: min(90%, 62.5vw);

  /* Semantic elevation aliases */
  --shadow-card:       var(--t-shadow);
  --shadow-card-hover: var(--t-shadow-hover);

  /* ── Animation ───────────────────────────────────── */
  /* Set --t-motion: 0 in E-Ink theme to disable all animation */
  --t-motion:       1;
  --t-speed:        0.2s;
  --t-enter:        0.38s;
  --t-exit:         0.18s;

  /* Computed values used in base.css */
  --_enter-dur: calc(var(--t-enter) * var(--t-motion, 1));
  --_exit-dur:  calc(var(--t-exit)  * var(--t-motion, 1));
  --_speed:     calc(var(--t-speed) * var(--t-motion, 1));

  /* Legacy aliases used in base.css */
  --font:              var(--t-font);
  --font-size:         var(--t-font-size);
  --radius:            var(--t-radius);
  --radius-sm:         var(--t-radius-sm);
  --gap:               var(--t-gap);
  --pad-card:          var(--t-pad-card);
  --pad-page:          var(--t-pad-page);
  --pad-bar:           var(--t-pad-bar);
  --size-clock:        var(--t-clock);
  --size-line-badge:   var(--t-badge-font);
  --size-direction:    var(--t-direction);
  --size-countdown:    var(--t-countdown);
  --size-meta:         var(--t-meta);
  --size-label:        var(--t-label);
  --badge-size:        var(--t-badge);
  --font-weight-clock: 400;
  --color-planned:     var(--t-planned);
}