/* ============================================================================
   SWISS PEAK INFORMATIONS // DESIGN TOKENS
   Schweizer Berggipfel & Bergbahnen — dark "alpenglow" foundations.
   Near-black night surfaces, cold readout greys, one warm alpenglow accent.
   Import this file first. Everything downstream references these vars.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Sans:wght@400;500;600;700&family=Saira+Condensed:wght@500;600;700;800&display=swap');

:root {
  /* ----- SURFACES (void → raised) -------------------------------------- */
  --void:        #06070A;  /* deepest background / page base behind panels */
  --bg:          #0A0C10;  /* default app background                       */
  --panel:       #10141A;  /* card / panel surface                         */
  --raised:      #161B22;  /* raised surface, inputs, hovered rows         */
  --overlay:     #1D232B;  /* menus, popovers, tooltips                    */
  --inset:       #07090C;  /* wells, code blocks, recessed areas           */

  /* ----- HAIRLINES & BORDERS ------------------------------------------- */
  --line:        #1C232B;  /* default hairline divider                     */
  --line-soft:   #141A20;  /* barely-there separation                      */
  --line-strong: #2A333D;  /* emphasized border, focus rings base          */
  --grid-line:   rgba(120, 140, 160, 0.045); /* background grid texture    */

  /* ----- TEXT (cold readout greys) ------------------------------------- */
  --fg:          #E7EBEF;  /* primary text                                 */
  --fg-2:        #A6AEB7;  /* secondary text / supporting copy             */
  --fg-3:        #6B747E;  /* tertiary / metadata / labels                 */
  --fg-4:        #444C55;  /* faint / disabled / placeholder               */
  --fg-on-signal:#0A0C10;  /* text on top of alpenglow-amber fills          */

  /* ----- SIGNAL (alpenglow amber — the single brand accent) ------------ */
  --signal:      #E0A53A;  /* primary accent: active, focus, selected peak */
  --signal-hi:   #F4C162;  /* glow / hover-bright (alpenglow highlight)    */
  --signal-dim:  #8A6B2E;  /* muted amber for inactive / limited states    */
  --signal-wash: rgba(224, 165, 58, 0.10); /* tinted fill / selection      */
  --signal-line: rgba(224, 165, 58, 0.38); /* amber hairline               */

  /* ----- SEMANTIC STATUS ----------------------------------------------- */
  --critical:    #D9483B;  /* geschlossen / Sommerpause / Störung          */
  --critical-wash: rgba(217, 72, 59, 0.12);
  --confirm:     #4E9E69;  /* in Betrieb / offen / belegte Daten           */
  --confirm-wash: rgba(78, 158, 105, 0.12);
  --info:        #56A8C4;  /* neutrale Info / Telemetrie / Hinweis         */
  --info-wash:   rgba(86, 168, 196, 0.12);
  --warn:        #E0A53A;  /* eingeschränkt / Warnung (teilt Amber)        */

  /* ----- BETRIEBSSTATUS (operating-status colors) ---------------------- */
  --status-open:    #4E9E69; /* IN BETRIEB                                 */
  --status-info:    #56A8C4; /* HINWEIS                                    */
  --status-limited: #E0A53A; /* EINGESCHRÄNKT                              */
  --status-closed:  #D9483B; /* GESCHLOSSEN / SOMMERPAUSE                  */

  /* ----- TYPE FAMILIES -------------------------------------------------- */
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-sans:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-display: 'Saira Condensed', 'IBM Plex Sans', sans-serif;

  /* ----- TYPE SCALE (px) ------------------------------------------------ */
  --t-display:  44px;
  --t-h1:       32px;
  --t-h2:       24px;
  --t-h3:       18px;
  --t-body:     15px;
  --t-small:    13px;
  --t-label:    11px;   /* uppercase mono micro-labels                     */
  --t-data:     14px;   /* tabular readouts                                */

  /* ----- TRACKING (letter-spacing) ------------------------------------- */
  --track-display: 0.01em;
  --track-label:   0.18em;  /* wide-tracked uppercase labels               */
  --track-mono:    0.02em;

  /* ----- SPACING SCALE (4px base grid) --------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* ----- RADII (tight, hardware-panel feel — never pill-soft) ---------- */
  --r-0: 0px;     /* sharp edges (banners, ticks)                          */
  --r-1: 2px;     /* inputs, chips                                         */
  --r-2: 4px;     /* buttons, cards                                        */
  --r-3: 6px;     /* panels, modals                                        */

  /* ----- ELEVATION (deep shadow + inner edge highlight) ---------------- */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.5);
  --shadow-2: 0 4px 14px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.02) inset;
  --shadow-3: 0 18px 50px rgba(0,0,0,0.65), 0 1px 0 rgba(255,255,255,0.03) inset;
  --glow-signal: 0 0 0 1px var(--signal-line), 0 0 18px rgba(224,165,58,0.18);

  /* ----- MOTION -------------------------------------------------------- */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-snap: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:  120ms;
  --dur-base:  200ms;
  --dur-slow:  360ms;
}

/* ============================================================================
   SEMANTIC TYPOGRAPHY
   Apply these classes (or copy the rules) for consistent text styling.
   ============================================================================ */

.spi-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-display);
  line-height: 1.02;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  color: var(--fg);
}

.spi-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h1);
  line-height: 1.08;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--fg);
}

.spi-h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--t-h2);
  line-height: 1.2;
  color: var(--fg);
}

.spi-h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--t-h3);
  line-height: 1.3;
  color: var(--fg);
}

.spi-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--fg-2);
}

.spi-small {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--fg-3);
}

/* Wide-tracked uppercase mono micro-label — the signature Swiss Peak detail.
   Used for field labels, section eyebrows, status tags, coordinates. */
.spi-label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--t-label);
  line-height: 1;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg-3);
}

/* Tabular data readout — Umsätze, codes, timestamps, coordinates. */
.spi-data {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--t-data);
  line-height: 1.4;
  letter-spacing: var(--track-mono);
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}

.spi-code {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--signal-hi);
  background: var(--inset);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  padding: 1px 6px;
}