/* ============================================================
   VhAG Bielefeld — Colors & Type
   Verkehrshistorische Arbeitsgemeinschaft Bielefeld e.V.
   ============================================================ */

/* ---------- Fonts ----------------------------------------- */
/*  TWO TYPEFACES, STRICT ROLES.

    1. Univers (Linotype, 1957) — the brand body face. Used
       everywhere: body, headings, eyebrows, UI. Cuts supplied:
       Light, Regular, Bold + Univers Condensed Regular, Bold.

    2. Avionic (Fontspring) — LOGO ONLY. Used for the wordmark.
       Never for body, headings or UI copy. Supplied as a
       Fontspring DEMO build (subset); replace with a licensed
       cut before production. */

@font-face {
  font-family: "Univers";
  src: url("fonts/Univers-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Univers";
  src: url("fonts/Univers-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Univers";
  src: url("fonts/Univers-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Univers Condensed";
  src: url("fonts/UniversCn-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Univers Condensed";
  src: url("fonts/UniversCn-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Avionic";
  src: url("fonts/Avionic-Book.otf") format("opentype");
  font-weight: 350;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Avionic";
  src: url("fonts/Avionic-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Avionic";
  src: url("fonts/Avionic-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Avionic";
  src: url("fonts/Avionic-Black.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Avionic";
  src: url("fonts/Avionic-Heavy.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Avionic";
  src: url("fonts/Avionic-Oblique.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Avionic";
  src: url("fonts/Avionic-BoldOblique.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Avionic";
  src: url("fonts/Avionic-HeavyOblique.otf") format("opentype");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* Avionic Cond / Wide / ExWide / Oblique cuts are intentionally
   omitted — the brand uses only the regular-width Avionic, in
   Heavy weight, for the logo wordmark. */

/* ---------- Color tokens ---------------------------------- */
:root {
  /* Primary palette — values taken from the supplied DIN 5008 +
     Visitenkarte PDFs (RGB 0 0.36 0.55 and 0.31 0.32 0.31).
     These are the canonical VhAG print colours; they read as the
     "Verkehrs-" family but are a touch deeper and warmer than
     pure RAL 5017 / 7043. */
  --vhag-blau:     #005C8C;   /* Verkehrsblau (VhAG print)       */
  --vhag-blau-deep:#004A72;   /* darker variant for hovers       */
  --vhag-blau-ink: #00344F;   /* pressed / deepest tone          */

  --vhag-grau:     #4F524F;   /* Dunkles Verkehrsgrau (VhAG)     */
  --vhag-grau-mid: #6E726E;
  --vhag-grau-soft:#A4A8A4;

  --vhag-schwarz:  #1A1B1C;   /* near-black, body type           */
  --vhag-weiss:    #F4F2EC;   /* RAL 9016 Verkehrsweiß           */
  --vhag-paper:    #FBFAF6;   /* page background, off-white      */
  --vhag-line:     #DAD7CE;   /* dividers, hairlines             */

  /* Accent — use sparingly, signage tradition only */
  --vhag-rot:      #B41E25;   /* RAL 3020-ish: alarm / warnings  */
  --vhag-gelb:     #F5C518;   /* tram destination-blind yellow   */

  /* Semantic foreground / background */
  --fg-1: var(--vhag-schwarz);          /* primary text          */
  --fg-2: var(--vhag-grau);             /* secondary text        */
  --fg-3: var(--vhag-grau-mid);         /* tertiary / meta       */
  --fg-on-dark: var(--vhag-weiss);      /* text on blue or grey  */
  --fg-link: var(--vhag-blau);
  --fg-link-hover: var(--vhag-blau-deep);

  --bg-1: var(--vhag-paper);            /* page                  */
  --bg-2: #FFFFFF;                      /* card                  */
  --bg-3: var(--vhag-weiss);            /* subtle alt panel      */
  --bg-blau: var(--vhag-blau);
  --bg-grau: var(--vhag-grau);

  --border-1: var(--vhag-line);
  --border-strong: var(--vhag-schwarz);

  /* Bands — the signature motif. NOT diagonal hazard stripes.
     Solid full-bleed colour bars in Verkehrsblau or Verkehrsgrau,
     used as a top/bottom banner across a letterhead or card.
     Text on the band is always white. Two bands may stack to
     form a thin blue rule above a thicker grey block. */
  --band-h-lg: 113.4px;        /* DIN 5008 footer height (40mm) */
  --band-h-md: 64px;           /* card-front contact strip      */
  --band-rule: 4px;            /* the thin top rule             */

  /* Spacing — modest, signage-influenced 4 / 8 grid */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Radii — small. Tram-side stencils are crisp; we use no
     more than 4px except on pills. Cards lean rectangular. */
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 8px;     /* reserved for buttons/inputs           */
  --radius-pill: 999px;

  /* Shadows — restrained. No "soft fluffy" UI. */
  --shadow-1: 0 1px 0 rgba(26,27,28,0.06), 0 1px 2px rgba(26,27,28,0.06);
  --shadow-2: 0 2px 0 rgba(26,27,28,0.04), 0 8px 24px -10px rgba(14,37,82,0.20);
  --shadow-inset-line: inset 0 -2px 0 var(--vhag-blau);

  /* Type scale */
  /* Print materials (Briefbogen, Visitenkarte) are set in
     Univers. Avionic was supplied for the digital/successor
     system. Both stacks are exposed; default digital surface
     uses Avionic, fall back to Univers / Helvetica metrics. */
  /* DEFAULT TEXT STACK — Univers everywhere except the wordmark.
     Helvetica is the metric-compatible fallback if Univers fails
     to load. */
  --font-text:    "Univers", "Helvetica Neue", Arial, sans-serif;
  --font-head:    "Univers", "Helvetica Neue", Arial, sans-serif;
  --font-tab:     "Univers Condensed", "Univers", "Helvetica Neue", Arial, sans-serif;
  --font-print:   "Univers", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

  /* LOGOTYPE ONLY — used by the VhAG wordmark.
     Avionic Heavy (the regular-width cut) is the brand face;
     "Avionic Wide" / "Avionic Cond" are NOT the wordmark face.
     Never used for paragraphs, headings or UI.
     The wordmark is always set in MIXED CASE — "VhAG" with a
     lowercase "h" between the V, A and G. Never uppercased. */
  --font-logo:    "Avionic", "Helvetica Neue", Arial, sans-serif;

  --fs-display: clamp(48px, 6vw, 88px);
  --fs-h1: clamp(36px, 4.4vw, 56px);
  --fs-h2: clamp(28px, 3.2vw, 40px);
  --fs-h3: 24px;
  --fs-h4: 18px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-meta: 12px;

  --lh-tight: 0.95;
  --lh-snug: 1.15;
  --lh-text: 1.55;

  --tr-tight: -0.02em;
  --tr-norm: 0;
  --tr-wide: 0.08em;
  --tr-xwide: 0.18em;
}

/* ---------- Semantic element styles ----------------------- */
body {
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-text);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--fg-1);
}
h2, .h2 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: -0.005em;
}
h3, .h3 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1.2;
}
h4, .h4 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-h4);
  line-height: 1.25;
}

.eyebrow {
  font-family: var(--font-tab);
  font-weight: 700;
  font-size: var(--fs-meta);
  letter-spacing: var(--tr-xwide);
  text-transform: uppercase;
  color: var(--vhag-blau);
}

.linie {
  /* tram-line "blind" — number on coloured chip */
  font-family: var(--font-tab);
  font-weight: 900;
  letter-spacing: var(--tr-norm);
  color: var(--vhag-gelb);
  background: var(--vhag-schwarz);
  padding: 2px 10px;
  border-radius: var(--radius-1);
}

p { max-width: 68ch; }
small, .small { font-size: var(--fs-small); color: var(--fg-2); }
.meta { font-size: var(--fs-meta); letter-spacing: var(--tr-wide);
        text-transform: uppercase; color: var(--fg-3); }

a {
  color: var(--fg-link);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
a:hover { color: var(--fg-link-hover); }

/* ---------- Signature: the band system -------------------- */
/* A full-width solid bar (grey OR blue) that sits at the top
   or bottom of a surface. White type on top. This is the
   primary brand motif lifted from the DIN 5008 letterhead. */
.band {
  display: block;
  width: 100%;
  background: var(--vhag-grau);
  color: var(--vhag-weiss);
  padding: 20px 24px;
  box-sizing: border-box;
}
.band--blau { background: var(--vhag-blau); }
.band--grau { background: var(--vhag-grau); }
.band--thin { padding: 0; height: var(--band-rule); }

/* The canonical "Briefbogen" stack: a thin blue rule sitting
   directly above a thicker grey block. Used at top OR bottom
   of a page / card. */
.band-stack { display: flex; flex-direction: column; }
.band-stack > .band--thin { background: var(--vhag-blau); }
.band-stack > .band:not(.band--thin) { background: var(--vhag-grau); }