/* tokens.css — Design-Tokens. Seit DS2a (12.10.2026) in der fewy-Palette
   (Navy/Periwinkle/Papier, Schrift Manrope, quality/design/fewy-brand/BRAND.md).
   Die Namen --sand-* bleiben (Hintergrund-Rollen), die frühere Gold-Stufe
   heißt jetzt --akzent-* (Periwinkle als Marker: Linie, aktiver Reiter,
   Rahmen). Der Bezahl-/Bestätigen-Knopf (.btn-primary, früher .btn-gold)
   ist Navy mit weisser Schrift. Logo: feworld-Hosts behalten das feworld-
   Logo, jeder andere Host zeigt fewy (assets/img/fewy-horizontal.svg). */

/* Manrope, selbst gehostet (SIL OFL 1.1, assets/fonts/OFL-Manrope.txt). */
@font-face {
  font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url('../fonts/manrope-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url('../fonts/manrope-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --sand-50:  #F5F6F8;   /* Papier  */
  --sand-100: #EEF1F6;   /* Grau 1  */
  --sand-200: #E3E7EE;   /* Grau 2  */
  --akzent-400: #97AEE0; /* Periwinkle, eine Stufe heller */
  --akzent-500: #7F9BD6; /* Periwinkle (Marker, nie Schrift auf Weiss) */
  --navy-900: #1F2737;   /* Tinte */
  --navy-800: #324158;   /* Navy  */
  --navy-700: #435069;
  --navy-600: #3f6f88;
  --slate-300: #8295ad;
  --slate-100: #c3d4e8;
  --white:    #ffffff;

  --ok:     #2e8b57;
  --ok-bg:  #dcefe2;
  --warn:   #b8860b;
  --warn-bg:#fbf0d0;
  --danger: #c0392b;
  --danger-bg: #f9dcd8;
  --info:   #3f6f88;
  --info-bg:#dde9f0;
  --neutral: #6b7686;
  --neutral-bg: #e6e8ec;

  --text:       var(--navy-900);
  --text-muted: #5c6b80;
  --bg:         var(--sand-50);
  --surface:    var(--white);
  --border:     rgba(50, 65, 88, 0.12);

  --shadow-card: 0 6px 24px rgba(26,35,52,0.08);
  --shadow-lift: 0 14px 40px -22px rgba(26,35,52,0.4);

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

  --ff-body: 'Manrope',system-ui,'Segoe UI',Helvetica,Arial,sans-serif;
  --ff-head: 'Manrope',system-ui,'Segoe UI',Helvetica,Arial,sans-serif;
  --focus-ring: #6683C6;  /* Periwinkle tief, 3,7:1 auf Weiss */

  --fs-body: 15px;
  --fs-small: 13px;
  --fs-label: 11px;
  --fs-title: 24px;
  --fs-section: 17px;

  /* Layout / Touch / Safe-Area */
  --tap: 44px;
  --topnav-h: 60px;
  --bottomnav-h: 60px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --page-pad: 24px;
  --content-max: 1080px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  --z-nav: 100;
  --z-sticky: 50;
  --z-toast: 9999;
}

@media (max-width: 767px) {
  :root { --page-pad: 16px; }
}
@media (max-width: 479px) {
  :root { --page-pad: 16px; --fs-title: 22px; }
}