/* ============================================================
   NALA & FRIENDS — DESIGN TOKENS
   Grün als flächiges Strukturelement (nicht nur Akzent), Hafer statt
   Bäckerei-Creme, Hundekeks-Amber statt Terrakotta. Grün + Beige sind
   echte Markenfarben (aus dem Logo gesampelt, im Laden/Café als Wand-
   und Sesselfarbe wiederzufinden). Schrift folgt dem echten Online-Shop
   (nalaandfriends.de, Shopify-Theme: Playfair Display / Lato).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Lato:wght@400;700;900&display=swap');

:root {
  /* ---- Farben ---- */
  --forest: #243025;       /* Tannengrün — Primärfarbe, aus dem echten Logo gesampelt */
  --forest-dark: #1a241b;  /* für Verläufe/Hover auf Grün */
  --paper: #EFE6D6;        /* Hafer — Haupt-Hintergrund */
  --surface: #FBF7EF;      /* Lichtweiß — Karten, Formulare, Text-auf-Dunkel-Flächen */
  --biscuit: #C88A3D;      /* Hundekeks — Akzent, NIE als Fließtext auf --paper */
  --biscuit-dark: #a86f2c;
  --moss: #DDE4D2;         /* Helles Moos — abwechselnde Sektionshintergründe */
  --ink: #1B2118;          /* Tinte — Fließtext */
  --ink-soft: rgba(27,33,24,0.68);
  --ink-faint: rgba(27,33,24,0.5);
  --line: rgba(27,33,24,0.12);
  --line-on-forest: rgba(255,255,255,0.16);
  --cream-text: rgba(251,247,239,0.88);
  --cream-text-soft: rgba(251,247,239,0.68);

  /* ---- Typografie ---- */
  --font-body: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Playfair Display', Georgia, serif;
  --font-voice: 'Playfair Display', Georgia, serif;

  /* ---- Radius / Schatten ---- */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 26px;
  --shadow-soft: 0 20px 50px -28px rgba(20,25,17,0.35);
  --shadow-lift: 0 30px 70px -20px rgba(20,25,17,0.45);

  /* ---- Layout ---- */
  --maxw: 1220px;
  --pad: clamp(1.25rem, 4vw, 3.5rem);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

.font-display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.font-voice {
  font-family: var(--font-voice);
  font-style: italic;
  font-weight: 400;
}