/* Design tokens and self-hosted Söhne. Shared by every page. */

@font-face {
  font-family: "Söhne";
  src: url('/fonts/sohne-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Söhne";
  src: url('/fonts/sohne-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --primary:          oklch(0.66 0.06 255);
  --primary-hover:    oklch(0.58 0.06 255);
  --primary-shadow:   oklch(0.66 0.06 255 / 0.35);
  --primary-shadow-h: oklch(0.66 0.06 255 / 0.45);

  --video-bg:         oklch(0.92 0.01 255);
  --placeholder-start:oklch(0.85 0.01 255);
  --placeholder-end:  oklch(0.80 0.01 255);

  --bg:               oklch(1.00 0 0);
  --bg-subtle:        oklch(0.96 0.005 255);
  --bg-accent:        oklch(0.92 0.02 255);

  --feature-bg:       oklch(0.92 0.02 255);
  --feature-icon:     oklch(0.50 0.06 255);

  --text:             oklch(0.25 0.01 255);
  --text-mid:         oklch(0.40 0.01 255);
  --text-muted:       oklch(0.50 0.01 255);

  --footer-bg:        oklch(0.20 0.02 255);
  --footer-text:      oklch(1.00 0 0 / 0.7);
  --footer-text-dim:  oklch(1.00 0 0 / 0.6);

  --border:           oklch(0.90 0.01 255);
  --font-display:     "Söhne", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Visible to screen readers only. Lets the picker show "FR"/"DE" while
   still announcing the full language name. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}