/*
 * RealLeaf Child-Theme — Design-Tokens (S1-02)
 * Quelle: design/prototype/assets/tokens.css (Source of Truth lt.
 * plans/s1-design/uebertragbarkeit.md Abschnitt 1.1), uebernommen 1:1.
 * Datum: 2026-06-10
 *
 * HINWEIS (ADR offen): Light-Grundflaeche Kraft-Beige #efe7d6 ist VORLAEUFIG -
 * ADR S1-17 (Beige vs. Off-White #faf9f6) offen; bei Entscheid Off-White nur
 * --surface, --surface-2, --surface-3, --text-muted, --border im Light-Block
 * tauschen, Komponenten bleiben unveraendert.
 *
 * Diese Datei enthaelt :root, [data-theme="dark"] und den globalen
 * reduced-motion-Block. AUSNAHME (2026-07-07): die eine globale Layout-
 * Primitive .rl-wrap (Content-Breiten-Wrapper) lebt bewusst hier, weil sie
 * seitenuebergreifend (Startseite, page-28901 Tabakersatz, page-22279
 * Ueber uns) gebraucht wird und exakt am --maxw/--rl-gutter-System haengt.
 * Sonst weiterhin keine Komponenten-Selektoren.
 */

/*
 * RealLeaf — Semantische Design-Tokens, zwei Themes
 * Quelle Markenfarben: brand/COLORS.svg (offizielles Sheet)
 *
 * Theme "Natural Light" (Standard): warmes Beige/Kraft, Gruen als Akzent.
 * Theme "Deep Green" (data-theme="dark"): viel Gruen, weisse Akzente.
 * Komponenten verwenden NUR semantische Tokens, niemals Hex direkt.
 */

:root {
  /* Markenfarben (fix, nicht theme-abhaengig) */
  --rl-green-leaf: #709c2f;
  --rl-green-mid: #2e4a2b;
  --rl-green-dark: #1c361d;
  --rl-green-deep: #112819;
  --rl-black: #231f20;
  --rl-white: #ffffff;

  /* ---- Theme: Natural Light (Beige/Kraft) ---- */
  --surface: #efe7d6;          /* Grundflaeche, warmes Kraft-Beige */
  --surface-2: #e6dac3;        /* Sektionen, tieferes Kraftpapier */
  --surface-3: #fffdf7;        /* Cards, Inputs (warmes Weiss) */
  --text: #231f20;
  --text-muted: #6b6457;
  --accent: #709c2f;           /* CTA, Preise, Badges, aktive Zustaende */
  --accent-hover: #5d8226;
  --accent-bright: #84b53a;    /* leuchtender Akzent auf Dunkel */
  --accent-soft: #eef3e2;      /* zarte Akzentflaeche (Light) */
  --accent-contrast: #ffffff;  /* Text auf Akzentflaechen */
  --accent-2: #2e4a2b;         /* sekundaere Akzente, Hover-Text */
  --border: #ddd1ba;
  --outline: #231f20;          /* kraeftige Bold-Outline (Brand-Signatur) */
  --badge-sale: #709c2f;
  --footer-bg: #112819;        /* dunkelgruener Kontrast-Anker */
  --footer-text: #faf9f6;
  --shadow: 0 2px 12px rgb(35 31 32 / 0.08);
  --shadow-md: 0 18px 44px -20px rgb(35 31 32 / 0.32);
  --focus-ring: 0 0 0 3px rgb(112 156 47 / 0.35);

  /* Intentional dark anchors (gleich in beiden Themes) */
  --dark-bg: #112819;
  --dark-bg-2: #1c361d;
  --on-dark: #faf9f6;
  --on-dark-muted: rgb(250 249 246 / 0.72);

  /* WP5 Einkaufswelten: Welt-Akzente (archive.css .rl-world--*).
     Semantisch statt Hex-in-Komponente; Dark-Werte im Block unten
     aufgehellt, damit der Akzent auf Deep Green lesbar bleibt. */
  --world-tube: #d97a2b;
  --world-papers: #b9884c;
  --world-filter: #7a5c3e;

  /* ---- Typo ---- */
  --display: 'Archivo', system-ui, sans-serif;
  --body: 'Hanken Grotesk', system-ui, sans-serif;

  /* ---- Spacing-Skala (8px-Basis) ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  /* ---- Radius ---- */
  --r-sm: 8px; --r-md: 16px; --r-lg: 26px; --r-pill: 999px;

  /* ---- Layout: Content-Breiten-System (Baustein 4, 2026-07-07) ----
     Ein zentraler Token-Satz; alle Container ziehen daraus (kein Doppel-Def).
     Kernregel Desktop: Content = 85 % der Viewport-Breite, hart bei
     --rl-content-max (2000px) gedeckelt und nach unten bei --rl-content-floor
     (1280px = alte --maxw) gehalten. Folge:
       - grosse Monitore (>=~1506px vw): Content waechst mit 85vw bis max 2000px
         -> nicht mehr schmal/fest;
       - Laptop/kleiner Desktop (1280..~1506px vw): bleibt bei 1280px
         -> nie schmaler als bisher (bewusste Breakpoint-Abstufung);
       - unter 1280px vw: max-width > Viewport, daher greift bei den Wrappern
         automatisch width:100% -> Full-Bleed mit --rl-gutter Seitenabstand.
     --maxw bleibt als Rueckwaerts-Alias bestehen: alle Bestandsregeln
     (home .rl-wrap, Archiv-Grid, Header-Inner, Mega-Menu ...) folgen dem
     System ohne Einzelaenderung. */
  --rl-gutter: 30px;                 /* Desktop-/Tablet-Seitenabstand */
  --rl-content-floor: 1280px;        /* Mindest-Contentbreite (= alte --maxw) */
  --rl-content-max: 2000px;          /* harte Obergrenze */
  --rl-content-w: min(max(85vw, var(--rl-content-floor)), var(--rl-content-max));
  --maxw: var(--rl-content-w);       /* Alias: Bestandsselektoren erben das System */
  --rl-modal-w: 920px;               /* Dialog-/Quickview-Breite, entkoppelt von Content-Breite */
  --header-h: 78px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: 150ms;
  --dur: 250ms;
  --dur-slow: 300ms;
  --dur-badge: 400ms;   /* Cart-Badge-Puls (S1-12) */
  --dur-reveal: 600ms;  /* Section-/Card-Reveal (S1-12) */
}

[data-theme="dark"] {
  /* ---- Theme: Deep Green ---- */
  --surface: #112819;
  --surface-2: #1c361d;
  --surface-3: #223a22;
  --text: #faf9f6;
  --text-muted: #b9c4b4;
  --accent: #709c2f;
  --accent-hover: #84b53a;
  --accent-bright: #84b53a;
  --accent-soft: rgb(132 181 58 / 0.14);
  --accent-contrast: #112819;
  --accent-2: #ffffff;
  --border: rgb(255 255 255 / 0.14);
  --outline: rgb(255 255 255 / 0.18);
  --badge-sale: #84b53a;
  --footer-bg: #0b1c11;
  --footer-text: #faf9f6;
  --shadow: 0 2px 16px rgb(0 0 0 / 0.35);
  --shadow-md: 0 22px 50px -20px rgb(0 0 0 / 0.6);
  --focus-ring: 0 0 0 3px rgb(112 156 47 / 0.5);

  /* WP5 Einkaufswelten-Akzente, aufgehellt fuer Deep Green */
  --world-tube: #e6944a;
  --world-papers: #cfa269;
  --world-filter: #a67c54;
}

/* Content-Breiten-System: kleinerer Seitenabstand auf Mobil (loest die fruehere
   home.css-720px-Sonderregel fuer .rl-wrap ab; reine :root-Redefinition, kein
   Komponenten-/Layout-Selektor). */
@media (max-width: 720px) {
  :root { --rl-gutter: 18px; }
}

/* Content-Breiten-Primitive (global, Baustein 4-System).
   Zentraler Wrapper fuer alle Custom-PHP-Flaechen (front-page.php,
   page-28901.php Tabakersatz, page-22279.php Ueber uns). Zieht Breite aus
   --maxw (= --rl-content-w) und Seitenabstand aus --rl-gutter (Mobil 18px via
   720px-Block oben). Frueher nur in home.css:13 definiert -> auf den Custom-
   Pages ungestylt (Full-Bleed x=0). Seit 2026-07-07 hier global, damit jede
   Seite mit geladenen Tokens die korrekte Content-Breite bekommt. */
.rl-wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--rl-gutter); }

/* Button-Primitive (global seit 2026-07-20, vorher nur home.css:42 -> auf
   Archiv-/Custom-Seiten ungestylt, sobald dort rl-btn-Markup rendert, z. B.
   das globale Newsletter-Modul rl_newsletter_section()). Die .rl-home-
   !important-Guards gegen Elementor-Globals bleiben in home.css. */
.rl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--display); font-weight: 700; font-size: 16px; padding: 15px 26px; border-radius: var(--r-pill);
  border: 1.5px solid var(--outline); background: var(--text); color: var(--surface);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.rl-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.rl-btn:active { transform: translateY(0); }
.rl-btn--leaf { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }
.rl-btn--leaf:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.rl-btn--ghost { background: transparent; color: var(--text); }
.rl-btn--ghost:hover { background: var(--text); color: var(--surface); }
.rl-btn--on-dark { color: var(--on-dark); border-color: color-mix(in srgb, var(--on-dark) 45%, transparent); background: transparent; }
.rl-btn--on-dark:hover { background: var(--on-dark); color: var(--rl-black); border-color: var(--on-dark); }
.rl-btn--sm { font-size: 14px; padding: 11px 18px; }

/* Querschnitts-Basisschicht: globales reduced-motion (uebertragbarkeit.md Abschnitt 1.2 + 5/Motion) */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .ticker__track { animation: none; }
}