@import 'tailwindcss';

@theme {
  --color-ink: #0a0a0a;
  --color-smoke: #181716;
  --color-bone: #f2ede7;
  --color-ash: #8f8a84;
  --color-champagne: #e5cfbb;

  --font-sans: 'Geist Variable', ui-sans-serif, system-ui, sans-serif;
  --font-serif: 'Instrument Serif', ui-serif, Georgia, serif;
  --font-mono: 'Geist Mono Variable', ui-monospace, SFMono-Regular, Menlo, monospace;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  --animate-spin-slow: spin-slow 22s linear infinite;
  @keyframes spin-slow {
    to {
      transform: rotate(360deg);
    }
  }
}

@layer base {
  html {
    color-scheme: dark;
    background-color: var(--color-ink);
    color: var(--color-bone);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
    scroll-behavior: smooth;
  }

  body {
    min-height: 100dvh;
    overflow-x: clip;
  }

  ::selection {
    background: var(--color-champagne);
    color: var(--color-ink);
  }

  :focus-visible {
    outline: 2px solid var(--color-champagne);
    outline-offset: 3px;
  }

  [id] {
    scroll-margin-top: 4rem;
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
  }
}

/* Chrom-Verlauf wie das Logo an der Salonwand */
@utility chrome-text {
  background-image: linear-gradient(
    180deg,
    #ffffff 0%,
    #efeae4 28%,
    #a8a29b 48%,
    #6f6a64 56%,
    #c9c3bc 72%,
    #fbf8f4 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Großer CTA: Kontur, die sich beim Hover von links füllt */
.cta-text {
  color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in oklab, var(--color-bone) 70%, transparent);
  background-image: linear-gradient(
    90deg,
    var(--color-bone) 50%,
    color-mix(in oklab, var(--color-bone) 6%, transparent) 50%
  );
  background-size: 200% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  transition: background-position 1s var(--ease-out-expo);
}

.group:hover .cta-text,
.group:focus-visible .cta-text {
  background-position: 0 0;
}

@media (hover: none) {
  .cta-text {
    background-position: 0 0;
  }
}

/* Feines Filmkorn über der ganzen Seite */
.grain {
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Rechtstexte (Impressum / Datenschutz) */
@layer components {
  .legal h2 {
    margin-top: 2.5rem;
    font-family: var(--font-serif);
    font-size: 1.875rem;
    line-height: 1.1;
    color: var(--color-bone);
  }

  .legal h3 {
    margin-top: 1.5rem;
    font-weight: 500;
    color: var(--color-bone);
  }

  .legal p,
  .legal ul {
    margin-top: 0.75rem;
    line-height: 1.7;
  }

  .legal ul {
    list-style: disc;
    padding-left: 1.25rem;
  }

  .legal a {
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .legal a:hover {
    color: var(--color-bone);
  }
}