/* Designsystem San Sebastian Café & Gelato. Einzige Quelle aller Werte (siehe DESIGN.md) */
@font-face {
  font-family: "Outfit";
  src: url("../fonts/outfit-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Farben aus dem Logo-Nachbau */
  --schoko: #3D2C1C;
  --schoko-tief: #2B1F14;
  --mint: #A0B99D;
  --mint-hell: #DCE6D7;
  --mint-text: #4F6A4C;
  --creme: #F7F3EC;
  --creme-tief: #EFE7DA;
  --text-leise: #6E5D4C;
  --linie: #DED4C6;
  --weiss-warm: #FBF8F3;
  --linie-dunkel: rgba(160, 185, 157, 0.3);
  --abdunkeln: rgba(43, 31, 20, 0.6);
  /* Creme-Schleier ueber dem Hero-Bild, damit der Text mindestens 4,5:1 hat */
  --schleier-quer: linear-gradient(90deg, rgba(247, 243, 236, 0.95) 0%, rgba(247, 243, 236, 0.9) 36%, rgba(247, 243, 236, 0.5) 50%, rgba(247, 243, 236, 0) 62%);
  --schleier-hoch: linear-gradient(180deg, rgba(247, 243, 236, 0) 0%, rgba(247, 243, 236, 0) 50%, rgba(247, 243, 236, 0.88) 74%, rgba(247, 243, 236, 1) 90%);
  /* Markierung fehlender Angaben, verschwindet vor dem Livegang */
  --luecke-grund: #FFF1A8;
  --luecke-rand: #B59A00;

  /* Schrift */
  --schrift: "Outfit", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --gr-display: clamp(3rem, 1.4rem + 4.6vw, 5.75rem);
  --gr-h2: clamp(2.25rem, 1.4rem + 3.2vw, 4.75rem);
  --gr-h3: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
  --gr-text: 1.125rem;
  --gr-klein: 1rem;
  --gr-etikett: 0.8125rem;
  --gr-band: clamp(3rem, 2rem + 5vw, 7rem);
  --laufweite-etikett: 0.24em;

  /* Abstaende 4 8 12 16 24 32 48 64 96 128 160 */
  --a1: 4px; --a2: 8px; --a3: 12px; --a4: 16px; --a5: 24px; --a6: 32px;
  --a7: 48px; --a8: 64px; --a9: 96px; --a10: 128px; --a11: 160px;
  --sektion: var(--a11);
  --breite: 1240px;
  --rand: clamp(20px, 5vw, 56px);

  /* Radien und Schatten */
  --r-klein: 14px;
  --r-gross: 28px;
  --r-pille: 999px;
  --schatten: 0 24px 60px -24px rgba(61, 44, 28, 0.28);
  --schatten-stark: 0 32px 80px -28px rgba(61, 44, 28, 0.38);
  --schatten-klein: 0 10px 28px -14px rgba(61, 44, 28, 0.3);

  /* Bewegung: weich, nie federnd */
  --kurve: cubic-bezier(.22, .61, .36, 1);
  --dauer-hover: 300ms;
  --dauer-ein: 1000ms;
  --dauer-wort: 900ms;

  --kopf-hoehe: 132px;
}

@media (max-width: 760px) {
  :root {
    --sektion: var(--a9);
    --kopf-hoehe: 88px;
  }
}