@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --background: #F8F6F2;
  --foreground: #0A0A0A;

  /* Belt colors as CSS variables for inline SVG / non-Tailwind usage */
  --belt-white: #F5F5F5;
  --belt-yellow: #FFD700;
  --belt-orange: #FF8C00;
  --belt-green: #228B22;
  --belt-blue: #1E3A8A;
  --belt-purple: #6B21A8;
  --belt-brown: #7B4A2D;
  --belt-black: #1A1A1A;
}

* {
  scroll-behavior: smooth;
}

body {
  color: var(--foreground);
  background: var(--background);
}

/* Visible focus states for keyboard navigation */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #8B0000;
  outline-offset: 2px;
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }

  /* Tatami-Hintergrundmuster */
  .tatami-bg {
    background-image:
      linear-gradient(45deg, rgba(139, 0, 0, 0.03) 25%, transparent 25%),
      linear-gradient(-45deg, rgba(139, 0, 0, 0.03) 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, rgba(139, 0, 0, 0.03) 75%),
      linear-gradient(-45deg, transparent 75%, rgba(139, 0, 0, 0.03) 75%);
    background-size: 40px 40px;
  }

  /* Pinselstrich-Divider (horizontal) */
  .brush-divider {
    width: 80px;
    height: 4px;
    background: #8B0000;
    clip-path: polygon(0 20%, 100% 0%, 100% 80%, 0% 100%);
    margin: 1rem 0 2rem;
  }

  .skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: #8B0000;
    color: #F8F6F2;
    padding: 0.75rem 1.5rem;
  }

  .skip-link:focus {
    left: 0.5rem;
    top: 0.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}