/* Design tokens for AusjesprochenJut. Every component reads from these
   variables instead of hardcoding values, so new SVG icons or a palette tweak
   never require touching component logic. */
:root {
  /* Brand colors, taken directly from svgs/logo bunt@5x.svg */
  --color-red: #ff0000;
  --color-green: #009245;
  --color-purple: #662d91;

  --color-ink: #1a1a1a;
  --color-paper: #fdfdfa;
  --color-paper-dim: #f1f1ea;
  --color-muted: #6b6b63;

  --color-primary: var(--color-green);
  --color-danger: var(--color-red);
  --color-accent: var(--color-purple);

  /* Offset-shadow "Bückware" system: hard shadows, no blur, sticker look */
  --shadow-offset: 4px;
  --shadow-offset-pressed: 1px;
  --shadow-color-primary: var(--color-red);
  --shadow-color-accent: var(--color-purple);

  --shadow-hard: var(--shadow-offset) var(--shadow-offset) 0 0 var(--shadow-color-primary);
  --shadow-hard-accent: var(--shadow-offset) var(--shadow-offset) 0 0 var(--shadow-color-accent);
  --shadow-hard-pressed: var(--shadow-offset-pressed) var(--shadow-offset-pressed) 0 0 var(--shadow-color-primary);

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

  --touch-target-min: 44px;
  --radius: 10px;
  --radius-lg: 16px;

  --transition-fast: 200ms ease;
  --transition-medium: 250ms ease;

  /* Three-tier type system, all self-hosted (not Google Fonts CDN) so the app
     keeps working fully offline/on plain static hosting with no external
     font dependency:
       - --font-display (body default): Space Mono, everything not covered below
       - --font-heading: Kirilir, headings only (h1/h2/h3)
       - --font-vocab: Janzet, only the isolated foreign-language word being
         learned (see .lang-word in base.css) - never translations/body text */
  --font-display: 'Space Mono', monospace;
  --font-numerals: 'Space Mono', monospace;
  --font-heading: 'Kirilir', 'Space Mono', monospace;
  --font-vocab: 'Janzet', 'Space Mono', monospace;
}

@font-face {
  font-family: 'Space Mono';
  src: url('/assets/fonts/SpaceMono-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Space Mono';
  src: url('/assets/fonts/SpaceMono-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'Kirilir';
  src: url('/assets/fonts/KIRILIRFONTnummerzwo.otf') format('opentype');
  font-display: swap;
}

@font-face {
  font-family: 'Janzet';
  src: url('/assets/fonts/JanzEinfachBuchstabe.woff2') format('woff2'),
       url('/assets/fonts/JanzEinfachBuchstabe.woff') format('woff');
  font-display: swap;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-ink: #f1f1ea;
    --color-paper: #17171a;
    --color-paper-dim: #202024;
    --color-muted: #a3a39a;
  }
}
