/* LICHTCOUTURE — Design-Tokens (art-direction.md) */

:root {
  /* Farbe */
  --nacht:      #0E0A07;
  --samt:       #191309;
  --kreide:     #F3ECDF;
  --champagner: #E8CF9E;
  --gold:       #BE8F3C;
  --linie:      rgba(232, 207, 158, .24);
  --schatten:   rgba(0, 0, 0, .55);

  /* Typo-Skala */
  --d1: clamp(3.2rem, 10vw, 9rem);
  --d2: clamp(2.2rem, 5.5vw, 4.5rem);
  --d3: clamp(1.5rem, 3vw, 2.4rem);
  --t1: clamp(1.06rem, 1.4vw, 1.25rem);
  --m1: clamp(.72rem, 1vw, .82rem);

  /* Easing-Familie (die einzigen drei Kurven) */
  --ease-fall:  cubic-bezier(.16,.84,.26,1);
  --ease-zug:   cubic-bezier(.70,.00,.16,1);
  --ease-stich: cubic-bezier(.45,.05,.20,1);

  /* Raum */
  --rand: clamp(1.5rem, 6vw, 6rem);
  --inhalt-breite: 72rem;
  --text-breite: 34rem;
}

/* Basis */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--nacht);
  color: var(--kreide);
  font-family: 'Switzer', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 300;
  font-size: var(--t1);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img, video { max-width: 100%; display: block; }
::selection { background: var(--gold); color: var(--nacht); }

.display { font-family: 'Bodoni Moda', 'Didot', serif; font-weight: 460; line-height: 1.02; }
.mono {
  font-family: 'IBM Plex Mono', 'SF Mono', monospace;
  font-size: var(--m1);
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.hairline { border-top: 1px solid var(--linie); }

:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }