/* ============================================================
   BdP Stamm Wildgänse — Colors & Typography Tokens
   Source: "Einfach umsetzen. Das BdP Corporate Design" (29.04.26)
   Shared across Wildgänse MV and RRKasse via Wildgaense.Shared.
   Served at _content/Wildgaense.Shared/css/tokens.css
   ============================================================ */

/* ---------- Web fonts ---------- */
@font-face {
  font-family: "einfachBdP";
  src: url("../fonts/einfachBdP-Klassisch.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "einfachBdP";
  src: url("../fonts/einfachBdP-Kursiv.otf") format("opentype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "einfachBdP";
  src: url("../fonts/einfachBdP-Stark.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "einfachBdP";
  src: url("../fonts/einfachBdP-Superfett.otf") format("opentype");
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "MARKS";
  src: url("../fonts/MARKS.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  /* ---- Primärfarben ---- */
  --bdp-pfadiblau:       #0e4278;
  --bdp-woelflingsgelb:  #ffd208;
  --bdp-rrrot:           #971b2f;

  /* ---- Sekundärfarben — hell ---- */
  --bdp-pfadiblau-hell:      #a9bbce;
  --bdp-woelflingsgelb-hell: #ffe984;
  --bdp-rrrot-hell:          #d5a4ac;

  /* ---- Sekundärfarben — dunkel ---- */
  --bdp-kluft:                 #0b2341;
  --bdp-woelflingsgelb-dunkel: #8b7417;
  --bdp-rrrot-dunkel:          #52111b;

  /* ---- Akzentfarben ---- */
  --bdp-lagerplatzgruen:     #00b74f;
  --bdp-waldgruen:           #006c55;
  --bdp-kohte:               #222423;
  --bdp-glut:                #e84e1b;
  --bdp-lagerfeuerorange:    #ef7d00;
  --bdp-morgenkreis:         #ef859d;
  --bdp-internationalerabend:#653279;
  --bdp-singekreislila:      #8e7fae;

  /* ---- Neutrals ---- */
  --bdp-white:    #ffffff;
  --bdp-paper:    #fffdf5;
  --bdp-ink:      #0b2341;
  --bdp-line:     rgba(14, 66, 120, 0.16);
  --bdp-line-on-blue: rgba(255, 210, 8, 0.32);

  /* ---- Semantic roles ---- */
  --bg:        var(--bdp-woelflingsgelb);
  --bg-alt:    var(--bdp-pfadiblau);
  --bg-paper:  var(--bdp-paper);
  --fg:        var(--bdp-pfadiblau);
  --fg-on-blue:var(--bdp-woelflingsgelb);
  --fg-muted:  rgba(14, 66, 120, 0.62);
  --fg-subtle: rgba(14, 66, 120, 0.42);
  --accent:    var(--bdp-rrrot);
  --link:      var(--bdp-pfadiblau);
  --line:      var(--bdp-line);

  /* ---- Typography ---- */
  --font-display: "einfachBdP", "Mona Sans", "Inter", system-ui, sans-serif;
  --font-body:    "einfachBdP", "Mona Sans", "Inter", system-ui, sans-serif;
  --font-accent:  "MARKS", "Permanent Marker", "Caveat", cursive;

  --fw-classic: 400; --fw-italic: 400; --fw-strong: 700; --fw-superfett: 900;

  --fs-h1:   clamp(34px, 4.4vw, 54px);
  --fs-h2:   clamp(30px, 3.3vw, 48px);
  --fs-h3:   clamp(22px, 2.2vw, 30px);
  --fs-subline: 18px;
  --fs-body: 16px;
  --fs-small: 13px;
  --fs-accent: 28px;

  --lh-h1: 1.05; --lh-h2: 1.1; --lh-h3: 1.2; --lh-body: 1.4; --lh-tight: 1.15;
  --tracking-tight: -0.01em; --tracking-body: 0; --tracking-marks: 0.02em;

  /* ---- Spacing / radius / shadow ---- */
  --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;

  --radius-xs: 4px; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(11, 35, 65, 0.10);
  --shadow-md: 0 6px 20px rgba(11, 35, 65, 0.13);
  --shadow-lg: 0 22px 50px rgba(11, 35, 65, 0.24);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms; --dur-base: 220ms; --dur-slow: 420ms;

  /* ---- App-local neutrals (shared by both shells) ---- */
  --cream: #fffdf5;
  --orange: var(--bdp-lagerfeuerorange);
  --track: #e9e6da;
  --card-line: #ece8dc;
  --sb-text: #aebfd4;
}

/* ---------- Base / semantic type ---------- */
html, body {
  font-family: var(--font-body); font-size: 15px; line-height: 1.45;
  color: var(--fg); background: var(--bg-paper);
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
h1, .h1 { font-family: var(--font-display); font-weight: var(--fw-superfett); font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--tracking-tight); text-wrap: balance; margin: 0; }
h2, .h2 { font-family: var(--font-display); font-weight: var(--fw-superfett); font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--tracking-tight); text-wrap: balance; margin: 0; }
h3, .h3 { font-family: var(--font-display); font-weight: var(--fw-superfett); font-size: var(--fs-h3); line-height: var(--lh-h3); margin: 0; }
h4 { font-family: var(--font-display); font-weight: var(--fw-strong); margin: 0; }
.subline { font-family: var(--font-display); font-weight: var(--fw-strong); font-size: var(--fs-subline); line-height: 1.35; }
p, .body { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); text-wrap: pretty; margin: 0 0 var(--space-4); }
strong, b { font-weight: var(--fw-strong); }
em, i { font-style: italic; }
.marks, .accent-text { font-family: var(--font-accent); font-weight: 400; letter-spacing: var(--tracking-marks); font-size: var(--fs-accent); color: var(--fg); }
a { color: var(--link); }
code, pre, .mono { font-family: ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace; font-size: 0.95em; }
::selection { background: var(--bdp-woelflingsgelb); color: var(--bdp-pfadiblau); }