/* ============================================================
   AWO Bonn/Rhein-Sieg — Design Tokens
   Source: CSS export from Adobe XD (xd-export-variables.css) plus
   globalResources. Faithful to the design. Base tokens for the theme.
   ============================================================ */
:root {
  /* — Brand — */
  --awo-primary:   #E2001A;  /* AWO Rot (Primär) */
  --awo-secondary: #FECD1B;  /* Gelb */

  /* — Neutrals — */
  --awo-ink:    #171717;     /* default text */
  --awo-ink-2:  #313131;
  --awo-dark:   #343A40;
  --awo-gray:   #707070;
  --awo-gray-2: #5A6268;
  --awo-border: #DBDADA;
  --awo-light:  #F6F6F6;      /* soft background */
  --awo-white:  #FFFFFF;
  --awo-black:  #000000;

  /* — Shadows — */
  --awo-shadow-10: rgba(0,0,0,.10);
  --awo-shadow-16: rgba(0,0,0,.16);
  --awo-shadow-20: rgba(0,0,0,.20);

  /* — Font —  (Fira Sans, served by this plugin; see the @font-face rules in design.css) */
  --awo-font: "Fira Sans", Arial, "Open Sans", system-ui, sans-serif;

  /* — Typo-Skala (size / line-height, from the XD design) — */
  --fs-h1:44px;   --lh-h1:48px;
  --fs-h2:42px;   --lh-h2:44px;
  --fs-h3:24px;   --lh-h3:26px;
  --fs-h4:20px;   --lh-h4:24px;
  --fs-h5:18px;   --lh-h5:24px;
  --fs-h6:15px;   --lh-h6:20px;
  --fs-copy:16px; --lh-copy:22px;   /* body */
  --fs-lead:18px; --lh-lead:27px;   /* intro/lead */
  --fs-nav:20px;  --lh-nav:22px;    /* main navigation */
  --fs-small:14px;--lh-small:18px;
}

/* — Typographic base — */
body { font-family: var(--awo-font); font-size: var(--fs-copy); line-height: var(--lh-copy); color: var(--awo-ink); }

.awo-h1 { font: 700 var(--fs-h1)/var(--lh-h1) var(--awo-font); color: var(--awo-ink); margin:0 0 .5em; }
.awo-h2 { font: 700 var(--fs-h2)/var(--lh-h2) var(--awo-font); color: var(--awo-ink); margin:0 0 .5em; }
.awo-h3 { font: 700 var(--fs-h3)/var(--lh-h3) var(--awo-font); color: var(--awo-ink); margin:0 0 .4em; }
.awo-h4 { font: 700 var(--fs-h4)/var(--lh-h4) var(--awo-font); color: var(--awo-ink); margin:0 0 .4em; }
.awo-h5 { font: 700 var(--fs-h5)/var(--lh-h5) var(--awo-font); color: var(--awo-ink); margin:0 0 .3em; }
.awo-h6 { font: 700 var(--fs-h6)/var(--lh-h6) var(--awo-font); color: var(--awo-ink); margin:0 0 .3em; }
.awo-lead { font: 400 var(--fs-lead)/var(--lh-lead) var(--awo-font); }
.awo-nav  { font: 700 var(--fs-nav)/var(--lh-nav) var(--awo-font); color: var(--awo-ink); }
.awo-small{ font: 400 var(--fs-small)/var(--lh-small) var(--awo-font); }

/* — Color modifiers (from the XD design: headings in red or white) — */
.is-red   { color: var(--awo-primary); }
.is-white { color: var(--awo-white); }
.is-gray  { color: var(--awo-gray); }