/* Garten-Papeterie — Design Tokens v3.3
   Die Hochzeit als Briefpapier aus dem Sommergarten: Creme-Papier, Holz und Sand, Koralle als einzige Signalfarbe, Aquarell-Zweige an den Kanten.
   Quelle der Wahrheit; tokens.json spiegelt diese Werte. Kontraste in Klammern (WCAG, Text auf Seite/Karte). */

:root {
  color-scheme: light;

  /* Papier */
  --ff-cream: #F7F1E6;       /* Seite */
  --ff-paper: #FFFCF6;       /* Karte, Briefpapier, Foto-Rand */
  --ff-sand: #EFE4D1;        /* abgesetzter Abschnitt, Navigationsleiste */
  --ff-blush: #F7E3DA;       /* Rosé-Tönung */
  --ff-sand-light: #F3EADA;  /* heller Sand: Eckdaten, Hinweise, Antwort-Chip */
  --ff-line: #DCCFB8;        /* feine Papierlinie, Trennstriche */
  --ff-twine: #B98A62;       /* Kordel (Anhänger, Danke-Kachel) */

  /* Tinte */
  --ff-ink: #3F3A36;         /* Text (10:1 auf Seite) */
  --ff-ink-soft: #675E57;    /* Sekundärtext (5.6:1 auf Seite) */

  /* Gartenfarben: Koralle ist die einzige Signalfarbe, alles andere bleibt in Holz, Sand und Braun */
  --ff-coral: #E06A5E;       /* Blüte: nur Schmuck und große Flächen */
  --ff-coral-deep: #B94A40;  /* Aktion, kleiner Akzenttext (4.5:1 auf Seite, Weiß darauf 5.1:1) */
  --ff-coral-deeper: #9E3D35;
  --ff-wood: #A8835F;        /* Holz: Linien, Ränder, Eingabelinien, Pfad (3.4:1 auf Papier) */
  --ff-brown-deep: #5C4334;  /* Dunkelbraun: Flächen mit heller Schrift (Papier darauf 8.9:1) */
  --ff-caramel: #B98A62;     /* Sand/Holz: Linien, Schmuck */
  --ff-brown: #7A5A44;       /* Braun: Namen in Script, Akzenttext (5.5:1 auf Seite, 5.2:1 auf hellem Sand) */

  /* Semantik */
  --ff-bg: var(--ff-cream);
  --ff-text: var(--ff-ink);
  --ff-text-muted: var(--ff-ink-soft);
  --ff-accent: var(--ff-coral-deep);
  --ff-accent-hover: var(--ff-coral-deeper);
  --ff-focus: var(--ff-brown-deep);

  /* Tönung des aktuellen Abschnitts (wird per .ff-tone--* gesetzt) */
  --tone: var(--ff-wood);          /* Linien, Rahmen, Punkte */
  --tone-deep: var(--ff-brown);    /* Akzenttext */
  --tone-wash: var(--ff-sand-light);/* Flächen */

  /* Schrift: feine Serif für Überschriften, Script nur für Namen, Buchschrift als Lesetext */
  --ff-font-display: "Cormorant Garamond", "Garamond", "Georgia", serif;
  --ff-font-script: "Allura", "Snell Roundhand", "Brush Script MT", cursive;
  --ff-font-body: "Lora", "Georgia", "Times New Roman", serif;

  --ff-text-xs: .9375rem;    /* 15px: nur gesperrte Zierzeilen (Cormorant läuft klein) */
  --ff-text-sm: 1rem;
  --ff-text-base: 1.0625rem; /* 17px Lora: wirkt wie 18px, gemischtes Alter */
  --ff-text-lg: 1.3125rem;
  --ff-text-xl: 1.75rem;
  --ff-text-2xl: clamp(1.875rem, 1.5rem + 1.6vw, 2.5rem);
  --ff-text-3xl: clamp(2.6rem, 1.9rem + 2.8vw, 4rem);         /* Abschnittstitel (Cormorant braucht Größe) */
  --ff-text-4xl: clamp(4.25rem, 2.6rem + 6.8vw, 8.5rem);     /* Namen (Allura läuft klein) */
  --ff-track-caps: .22em;    /* gesperrte Versal-Zierzeile */

  /* Abstände (4px-Raster) */
  --ff-space-1: .25rem;
  --ff-space-2: .5rem;
  --ff-space-3: .75rem;
  --ff-space-4: 1rem;
  --ff-space-6: 1.5rem;
  --ff-space-8: 2rem;
  --ff-space-12: 3rem;
  --ff-space-16: 4rem;
  --ff-space-24: 6rem;

  /* Papier-Formen */
  --ff-radius-card: 6px;
  --ff-radius-sm: 6px;
  --ff-radius-input: 6px;
  --ff-radius-pill: 999px;
  --ff-frame-gap: 7px;           /* Abstand Außenkante → innere Zierlinie */
  --ff-shadow-card: 0 1px 2px rgba(63, 58, 54, .06), 0 22px 44px -30px rgba(63, 58, 54, .5);
  --ff-shadow-lift: 0 1px 2px rgba(63, 58, 54, .08), 0 26px 46px -28px rgba(63, 58, 54, .55);
  /* Papierstruktur: sehr leise Körnung, nie stark genug, um Schrift zu stören */
  --ff-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .3 .14 0 0 0 -.04'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* Layout */
  --ff-container: 1160px;
  --ff-container-narrow: 760px;
  --ff-gutter: 1rem;
  --ff-section: clamp(3rem, 6vw, 5.5rem);
  --ff-header-h: 72px;

  /* Bewegung */
  --ff-ease: cubic-bezier(.2, .7, .2, 1);
  --ff-ease-swing: cubic-bezier(.34, 1.4, .64, 1);
  --ff-dur-fast: 140ms;
  --ff-dur: 240ms;
  --ff-dur-slow: 600ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --ff-dur-fast: 0ms; --ff-dur: 0ms; --ff-dur-slow: 0ms; }
}