/*
 * Design tokens — reconciled against the live sbb.be site (2026-09-18).
 *
 * Brand colors and the heading typeface below are read directly from
 * sbb.be's own CSS (--sbb__pagetitle-color, --sbb__accent-bgcolor, the
 * .btn-primary--arrow rule, body text color) rather than estimated from a
 * screenshot. They supersede the earlier placeholder blue.
 *
 * Not reconciled: sbb.be's body copy runs on "neue-haas-grotesk-display",
 * served from their own Adobe Fonts (Typekit) kit — a license tied to their
 * domain. We keep a system font stack for body text rather than hotlink
 * their kit; ask Johan for this app's own kit ID (or a webfont license) if
 * an exact match is wanted.
 */

:root {
  /* Color — brand (sbb.be: --sbb__pagetitle-color / .btn-primary--arrow) */
  --color-brand-500: #009ad6;
  --color-brand-400: #33aede; /* real hover state — lighter, not darker */
  --color-brand-50: #ccebf7;

  /* Color — ink (sbb.be: body { color } / h1-h2 default color) */
  --color-navy-900: #00163a;

  /* Color — neutral (app-specific chrome, not sourced from sbb.be) */
  --color-neutral-0: #ffffff;
  --color-neutral-100: #f1f1f1;
  --color-neutral-200: #eeeeee;

  /* Color — surface & overlay (from the design reference screenshot) */
  --color-surface-card: rgba(255, 255, 255, 0.97);
  --color-shadow-card: rgba(0, 0, 0, 0.25);

  /* Color — semantic aliases */
  --color-text-body: var(--color-navy-900);
  --color-text-heading: var(--color-navy-900);
  --color-text-on-brand: var(--color-neutral-0);

  --color-status-info-bg: var(--color-brand-50);
  --color-status-info-text: var(--color-brand-500);
  --color-status-success-bg: #e3f5ea;
  --color-status-success-text: #1f7a41;
  --color-status-warning-bg: #fff6d6;
  --color-status-warning-text: #8a6d00;
  --color-status-error-bg: #fbe4e4;
  --color-status-error-text: #b3261e;

  --color-border-subtle: var(--color-neutral-200);

  --color-action-default: var(--color-brand-500);
  --color-action-hover: var(--color-brand-400);

  /* Typography */
  --font-family-heading: "Baloo 2", "Segoe UI", Arial, sans-serif;
  --font-family-base: "Segoe UI", Arial, sans-serif;

  --font-size-sm: 0.9rem;
  --font-size-base: 0.95rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.25rem;

  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Spacing scale (4px base) */
  --space-2: 8px;
  --space-3: 12px;
  --space-3-5: 14px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* Radius */
  --radius-sm: 8px;
  --radius-lg: 12px;

  /* Elevation */
  --shadow-card: 0 12px 40px var(--color-shadow-card);
}