/* Linienplan: the recognition path as a transit line. The only file with raw values. */
@font-face { font-family: "Sofia Sans Condensed"; src: url("../fonts/heading-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Sofia Sans Condensed"; src: url("../fonts/heading-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("../fonts/body-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("../fonts/body-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  /* Bright platform: near-white ground, white plates floating on soft shadows, deep slate-teal lettering */
  --color-bg: #f7fbfc;
  --color-surface: #ffffff;
  --color-surface-tint: #eaf5f6;
  --color-text: #18323b;
  --color-text-muted: #4b626d;
  --color-border: #d3e3e8;

  /* Lines: A (teal) runs inside Germany, B (sky blue) comes from abroad */
  --line-a: #0f7c7a;
  --line-a-strong: #0b5f5d;
  --line-b: #3a8fd4;
  --line-b-strong: #2c74b3;
  /* soft line tints for badges and notices, with their dark ink */
  --line-a-soft: #d9f0ee;
  --line-a-ink: #0b5f5d;
  --line-b-soft: #dcebfa;
  --line-b-ink: #1f5f94;
  --color-here: #c8332b;

  --color-brand: var(--line-a);
  --color-brand-strong: var(--line-a-strong);
  --color-on-brand: #ffffff;
  --color-accent: var(--line-a);
  --color-accent-strong: var(--line-a-strong);
  --color-on-accent: #ffffff;
  --color-focus: #0f7c7a;
  --color-selection: #cfe6fa;

  /* Luminous field behind every page header: light aqua running into light sky, lit from above */
  --field: radial-gradient(ellipse 70% 80% at 80% -20%, #ffffff 0%, rgb(255 255 255 / 0) 60%), linear-gradient(160deg, #c6ece7 0%, #d3e8f8 60%, #eef6fb 100%);
  --color-on-field: var(--color-text);
  --color-field-heading: var(--line-a-ink);

  /* Inverse: solid teal for the closing panel, terminus and pressed states (white text 5:1) */
  --color-inverse-bg: #0f7c7a;
  --color-inverse-text: #ffffff;
  --color-inverse-muted: #ffffff;
  --color-inverse-border: rgb(255 255 255 / 0.35);

  --font-heading: "Sofia Sans Condensed", "Arial Narrow", sans-serif;
  --font-body: "Atkinson Hyperlegible Next", system-ui, sans-serif;

  --text-sm: 1rem;
  --text-base: 1.125rem;
  --text-lg: 1.3125rem;
  --text-xl: 1.625rem;
  --text-2xl: clamp(1.875rem, 1.45rem + 1.9vw, 2.75rem);
  --text-3xl: clamp(2.5rem, 1.6rem + 4vw, 4.75rem);
  --text-3xl-compact: clamp(2.5rem, 1.2rem + 3vw, 4rem);
  --leading-tight: 1.05;
  --leading-body: 1.6;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  --container: 76rem;
  --container-narrow: 44rem;
  --gutter: clamp(1rem, 4vw, 2rem);

  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 6px rgb(15 90 110 / 0.06);
  --shadow-md: 0 2px 6px rgb(15 90 110 / 0.06), 0 18px 40px -20px rgb(15 90 110 / 0.30);

  --line-width: 0.5rem;
  --plate-rim: 1px solid #d3e3e8;
  --station-size: 1.25rem;
  --station-ring: 0.25rem;

  --duration: 200ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}