/* ============================================================
   Flüsterfee TN Befragung – design tokens.
   Flüsterfee Editorial: white carries the content, navy frames
   beginning and end, magenta leads, teal accompanies.
   Light is the one and only mode.
   Fonts: Tenor Sans (titles), Jost (everything else) – fonts.css.
   ============================================================ */

:root {
  color-scheme: light;

  /* ---- Brand (Flüsterfee Editorial) ---- */
  --magenta: #c02b5c;        /* accent word, signature line, buttons, active states */
  --navy: #1e2f5c;           /* headings; title, join and closing slide */
  --navy-flaeche: #283a68;   /* surfaces on navy */
  --tuerkis: #60aaa9;        /* accent on navy, second chart color */
  --tuerkis-dunkel: #4d8887; /* bars, dots, large digits */
  --tuerkis-text: #417473;   /* teal as SMALL text on white (AA 5.3:1); the brand tone only passes large */
  --tuerkis-hell: #cfe6e5;   /* boxes, card backgrounds on the participant page */
  --nebel-navy: #bcc1ce;     /* secondary text on navy */
  --schiefer: #4a575e;       /* footer, secondary text */
  --kohle: #1f2a2e;          /* body text */
  --nebel: #eae8e6;          /* hairlines */
  --off-white: #f7f6f4;      /* cards, zebra */
  --white: #ffffff;

  /* ---- Background steps ---- */
  --bg-0: #ffffff;
  --bg-1: #ffffff;
  --bg-2: #ffffff;
  --bg-3: var(--off-white);
  --bg-4: var(--nebel);

  /* ---- Text on white ---- */
  --text-100: var(--kohle);
  --text-200: rgba(31,42,46,.92);
  --text-300: var(--schiefer);
  --text-400: rgba(74,87,94,.88);
  --text-500: rgba(74,87,94,.60);
  --text-600: rgba(74,87,94,.40);

  /* ---- Borders ---- */
  --border-subtle: rgba(31,42,46,.06);
  --border-soft: var(--nebel);
  --border-strong: rgba(31,42,46,.22);
  --border-active: rgba(192,43,92,.45);
  --focus-ring: rgba(192,43,92,.80);

  /* ---- Status (calibrated for white, AA as text) ---- */
  --status-green: #2e7d46;
  --status-yellow: #9a6b00;
  --status-red: #b3261e;

  /* ---- Accent text aliases ---- */
  --signal-text: var(--magenta);
  --ok-text: var(--status-green);
  --warn-text: var(--status-yellow);
  --alert-text: var(--status-red);

  /* ---- Spacing (base 4) ---- */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 64px;

  /* ---- Radii ---- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* ---- Shadows (soft, light) ---- */
  --shadow-sm: 0 1px 2px rgba(30,47,92,.08);
  --shadow-md: 0 8px 24px rgba(30,47,92,.10), 0 2px 6px rgba(30,47,92,.06);
  --shadow-lg: 0 24px 60px -12px rgba(30,47,92,.16), 0 12px 28px -8px rgba(30,47,92,.10);

  /* ---- Typography ---- */
  --font: 'Jost', system-ui, -apple-system, sans-serif;
  --font-display: 'Tenor Sans', 'Jost', system-ui, sans-serif;
  --mono: ui-monospace, 'SF Mono', 'Menlo', 'Consolas', monospace;

  /* ---- Font sizes ---- */
  --fs-xs: 12px;  --fs-sm: 14px;  --fs-md: 16px;  --fs-lg: 20px;
  --fs-xl: 24px;  --fs-2xl: 32px; --fs-3xl: 40px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: .15s;
  --t: .25s;
  --t-slow: .4s;

  /* ---- Layout ---- */
  --container: 1200px;
  --reading: 900px;
}