/* ==========================================================================
   Bahnmonitor — Design-Tokens  (Fassung 1, 27.10.2026)
   Eine Datei, die alle Grundwerte hält. App und Website binden nur diese
   Variablen ein; nie Farben oder Größen direkt in Komponenten schreiben.
   Schriften liegen lokal unter ../fonts (kein CDN).
   ========================================================================== */

/* ---------- Schriften (lokal, OFL-Lizenz) ---------- */
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/barlow-condensed-latin-500-normal.woff2") format("woff2");}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/barlow-condensed-latin-600-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/barlow-condensed-latin-ext-600-normal.woff2") format("woff2");
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/barlow-condensed-latin-700-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/barlow-condensed-latin-ext-700-normal.woff2") format("woff2");
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Atkinson Hyperlegible Next";font-style:normal;font-weight:200 800;font-display:swap;
  src:url("../fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Atkinson Hyperlegible Next";font-style:normal;font-weight:200 800;font-display:swap;
  src:url("../fonts/atkinson-hyperlegible-next-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Atkinson Hyperlegible Next";font-style:italic;font-weight:200 800;font-display:swap;
  src:url("../fonts/atkinson-hyperlegible-next-latin-wght-italic.woff2") format("woff2-variations");}

/* ---------- Hell (Standard) ---------- */
:root{
  color-scheme: light dark;

  /* Grundtöne — knalliges Weiß, kein Beige */
  --bm-paper:      #FFFFFF;   /* Seite */
  --bm-surface:    #F2F4F3;   /* Wechselton: Leisten, Eingabefelder, Zebra */
  --bm-surface-2:  #E6E9E8;   /* gedrückt / ausgewählt */
  --bm-ink:        #0F1317;   /* Gleisschwarz — Text, Linien-Plaketten (18,6 : 1) */
  --bm-ink-soft:   #2B323A;   /* Fließtext zweite Stufe (13 : 1) */
  --bm-muted:      #5A636C;   /* Labels, Zeitstempel (6,1 : 1) */
  --bm-line:       rgba(15,19,23,.12);  /* Haarlinie */
  --bm-line-strong:rgba(15,19,23,.28);

  /* Die EINE Signalfarbe: Abfahrtsgelb
     — wie der gelbe Abfahrtsplan am Bahnsteig. Nur als Fläche mit Tinte darauf,
       nie als Textfarbe auf Weiß. Bedeutet immer: „Hier kannst du etwas tun.“ */
  --bm-accent:     #FFD200;
  --bm-on-accent:  #0F1317;   /* 12,9 : 1 */

  /* Zustandsfarben — Datenkodierung, keine Dekoration.
     Nur an Zahlen, Punkten, Streifen und Plaketten, nie als Flächen-Hintergrund ganzer Bereiche. */
  --bm-ok:         #0A7447;   /* pünktlich (< 6 Min.)        5,8 : 1 */
  --bm-late:       #B84A00;   /* verspätet (≥ Schwelle)      5,2 : 1 */
  --bm-cancel:     #B0103A;   /* fällt aus                    7,0 : 1 */
  --bm-ok-tint:    #E3F2EA;
  --bm-late-tint:  #FBEADD;
  --bm-cancel-tint:#F8E1E7;
  --bm-ok-2:       #63B08A;   /* knapp pünktlich (Streifen) */
  --bm-late-2:     #7E2A06;   /* stark verspätet (Streifen) */
  --bm-nodata:     #C9CFCC;   /* keine Daten (Streifen) */

  /* Schrift */
  --bm-display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  --bm-sans:    "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;

  /* Skala (Sprung ≈ 1,2; Schlagzeile zu Text > 1 : 2,5) */
  --bm-fs-label: 12px;   /* Versalien, letter-spacing .14em */
  --bm-fs-small: 14px;
  --bm-fs-body:  17px;
  --bm-fs-lead:  20px;
  --bm-fs-h3:    24px;
  --bm-fs-h2:    clamp(30px, 4.2vw, 48px);
  --bm-fs-h1:    clamp(52px, 8.4vw, 112px);
  --bm-fs-tafel: clamp(56px, 12vw, 168px);   /* Anzeigetafel-Ziffern */
  --bm-lh-tight: .92;
  --bm-lh-body:  1.55;
  --bm-track-display: -.01em;
  --bm-track-label:   .14em;

  /* Abstandstakt 4 / 8 */
  --bm-s1:4px; --bm-s2:8px; --bm-s3:12px; --bm-s4:16px; --bm-s5:24px;
  --bm-s6:32px; --bm-s7:48px; --bm-s8:64px; --bm-s9:96px; --bm-s10:128px;

  /* Formen: eckig. Einzige Rundung = Pille für Handlungsknöpfe & Statuspunkte */
  --bm-radius: 0;
  --bm-radius-pill: 999px;
  --bm-hair: 1px;
  --bm-rule: 2px;          /* Gleislinie / Linienband */
  --bm-tap: 48px;          /* Mindest-Tippfläche */
  --bm-max: 1240px;        /* Inhaltsbreite Website */

  /* Bewegung */
  --bm-t-press: 140ms;
  --bm-t-quick: 180ms;
  --bm-t-menu:  220ms;
  --bm-t-sheet: 320ms;
  --bm-t-flap:  90ms;      /* ein Fallblatt-Halbschritt */
  --bm-ease-out:    cubic-bezier(.23,1,.32,1);
  --bm-ease-in-out: cubic-bezier(.77,0,.175,1);
  --bm-ease-drawer: cubic-bezier(.32,.72,0,1);
}

/* ---------- Dunkel: „Nachtbahnsteig“ ---------- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bm-paper:#0C0F12; --bm-surface:#151A1F; --bm-surface-2:#1E252B;
    --bm-ink:#F1F3F4; --bm-ink-soft:#C9D0D5; --bm-muted:#98A2AB;
    --bm-line:rgba(241,243,244,.12); --bm-line-strong:rgba(241,243,244,.28);
    --bm-ok:#3CCB86; --bm-late:#FF8F45; --bm-cancel:#FF6382;
    --bm-ok-tint:#0F2A1E; --bm-late-tint:#33200F; --bm-cancel-tint:#33121B; --bm-nodata:#2A3238; --bm-ok-2:#1F7A50; --bm-late-2:#C2551B;
  }
}
:root[data-theme="dark"]{
  --bm-paper:#0C0F12; --bm-surface:#151A1F; --bm-surface-2:#1E252B;
  --bm-ink:#F1F3F4; --bm-ink-soft:#C9D0D5; --bm-muted:#98A2AB;
  --bm-line:rgba(241,243,244,.12); --bm-line-strong:rgba(241,243,244,.28);
  --bm-ok:#3CCB86; --bm-late:#FF8F45; --bm-cancel:#FF6382;
  --bm-ok-tint:#0F2A1E; --bm-late-tint:#33200F; --bm-cancel-tint:#33121B; --bm-nodata:#2A3238; --bm-ok-2:#1F7A50; --bm-late-2:#C2551B;
}