/* Erzeugt von scripts/marke.mjs aus brand/design-system. Nicht von Hand bearbeiten. */
@font-face { font-family: 'Gliker'; src: url('/fonts/gliker-semibold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gliker'; src: url('/fonts/gliker-bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gliker'; src: url('/fonts/gliker-black.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/fonts/inter-variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --navy: #0c2b40;
  --offwhite: #fffdf7;
  --lavender: #c69fd4;
  --sky: #b6cff0;
  --butter: #ffecaa;
  --bordeaux: #54110f;
  --bg: var(--offwhite);
  --surface: #f1f1ec;
  --surface-raised: var(--offwhite);
  --text: var(--navy);
  --text-muted: #506673;
  --line: rgba(12, 43, 64, 0.14);
  --line-strong: #7f8f99;
  --cta-bg: var(--navy);
  --cta-text: var(--offwhite);
  --focus: var(--navy);
  --alert: var(--bordeaux);
  --cat-run: var(--sky);
  --cat-social: var(--butter);
  --cat-workshop: var(--lavender);
  --cat-special: var(--bordeaux);
  --on-cat: var(--navy);
  --on-cat-special: var(--offwhite);
  --cat-special-edge: rgba(84, 17, 15, 0);
  --float: 0 18px 40px -18px rgba(12, 43, 64, 0.35);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;
  --radius-input: 14px;
  --radius-tile: 20px;
  --radius-card: 28px;
  --radius-pill: 999px;
  --font-display: "Gliker", "Inter", sans-serif;
  --font-text: "Inter", system-ui, sans-serif;
}

/* Dunkel nur, wo eine Seite es zulässt (Verwaltung): data-modus="system" folgt dem Gerät. */
@media (prefers-color-scheme: dark) {
  :root[data-modus="system"] {
    --bg: var(--navy);
    --surface: #113650;
    --surface-raised: #163f5c;
    --text: var(--offwhite);
    --text-muted: #bbc2ca;
    --line: rgba(255, 253, 247, 0.16);
    --line-strong: #6d8aa0;
    --cta-bg: var(--butter);
    --cta-text: var(--navy);
    --focus: var(--butter);
    --alert: var(--butter);
    --cat-special-edge: rgba(255, 253, 247, 0.5);
    --float: 0 18px 40px -18px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
  }
}