/*
 * Design tokens derived 1:1 from DESIGN_GUIDE.md (§7 Token-Referenz).
 * Source of truth for the DEGES / "Die Autobahn" look. Web scale.
 */
:root {
  /* Primary (DEGES blue) */
  --color-primary-150: #0A325F;
  --color-primary-125: #005F89;
  --color-primary-100: #007BB0;
  --color-primary-50:  #009EE3;
  --color-primary-25:  #C4E5F4;

  /* Neutrals */
  --color-white:    #FFFFFF;
  --color-black:    #000000;
  --color-grey-150: #151718;
  --color-grey-125: #3F4547;
  --color-grey-100: #808080;
  --color-grey-50:  #A5ABAD;
  --color-grey-40:  #E5E5E5;
  --color-grey-25:  #F7F8F8;

  /* Informative / status */
  --color-error:      #EB1E23;
  --color-error-bg:   #FCE5E5;
  --color-success:    #616700;
  --color-success-bg: #F6F7E6;
  --color-hint:       #956414; /* also focus-ring colour */
  --color-hint-bg:    #FEF6E9;

  /* Noise rating scale (traffic-light) — exhibit-specific 4-step Ampel, see
     design/README.md "Gemeinsame Erweiterung: Lärm-Ampel". Fill/wave/border
     use the vivid values directly; --noise-slight is never used as text on
     white (fails AA) — use --noise-slight-text (deepened, = --color-hint)
     for any text/number in that rating instead. */
  --noise-healthy:      #2E9E5B; /* Gesund / entspannt  (green) */
  --noise-slight:       #F2C200; /* Leicht gestört      (yellow) — fill/wave/border only */
  --noise-slight-text:  #956414; /* Leicht gestört, deepened for AA text     */
  --noise-sleep:        #D46A12; /* Schlaf gestört      (orange) */
  --noise-critical:     #EB1E23; /* Kritisch            (red) */

  /* Surface — light (default) */
  --surface:          var(--color-white);
  --text-standard:    var(--color-grey-150);
  --text-additional:  var(--color-grey-100);
  --accent-light:     var(--color-primary-50);
  --accent-dark:      var(--color-primary-125);
  --divider:          var(--color-grey-50);

  /* Typography */
  --font-family: "SWIS721 WGL 4 BT", Arial, Helvetica, sans-serif;
  --fw-regular: 400;
  --fw-bold: 700;
  --lh-title: 1.1;
  --lh-title-soft: 1.3;
  --lh-content: 1.5;
  --letter-spacing: 0;

  /* Radius (web scale) */
  --radius-button: 0;
  --radius-media: 8px;
  --radius-card: 8px;
  --radius-box: 8px;
  --radius-pill: 9999px;

  /* Elevation */
  --shadow-main: 0 8px 40px 0 rgba(28,28,28,.08), 0 8px 12px 0 rgba(28,28,28,.04);

  /* Gradient (direction -77deg; verify visually, see guide §2.2) */
  --gradient-primary: linear-gradient(120.54deg, #0A325F 1.15%, #009EE3 87.93%);

  /* Border / focus */
  --border-default: 1px solid var(--color-grey-50);
  --focus-ring-button: 2px solid var(--color-hint);
  --focus-ring-link: 1px solid var(--color-primary-150);

  /* Spacing (desktop-web scale) */
  --space-2xs: 8px;
  --space-xs: 12px;
  --space-s: 16px;
  --space-m: 24px;
  --space-l: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;
  --space-3xl: 96px;
  --space-4xl: 128px;
  --space-5xl: 256px;
}

[data-surface="dark"] {
  --surface: var(--color-primary-150);
  --text-standard: var(--color-white);
  --text-additional: var(--color-grey-25);
  --accent-light: var(--color-white);
  --accent-dark: var(--color-primary-25);
  --divider: var(--color-primary-100);
}