/* ==========================================================================
   PTS Pool & Teichservice — Design Tokens
   :root = Pool (hell) Standardwerte. html[data-mode="teich"] überschreibt
   auf die dunkle Teich-Palette. Alle anderen Stylesheets referenzieren
   ausschließlich diese Custom Properties, nie feste Hex-Werte.
   ========================================================================== */

:root {
  /* ---- Farben: Pool (hell) ---- */
  --color-bg: #F5FBFD;
  --color-bg-alt: #E7F6FA;
  --color-surface: #FFFFFF;
  --color-surface-raised: #FFFFFF;
  --color-text: #163238;
  --color-heading: #0B2530;
  --color-text-muted: #4B6B72;
  --color-accent: #006E93;
  --color-accent-bright: #00A8D6;
  --color-accent-strong: #00688C;
  --color-accent-contrast: #FFFFFF;
  --color-border: #CFE9F0;
  --color-border-strong: #8FC4D6;
  --color-success: #1F8A4C;
  --color-success-bg: #E4F5EA;
  --color-error: #C62828;
  --color-error-bg: #FCEAEA;
  --color-warning-bg: #FFF6E0;
  --color-warning-text: #7A5B00;
  --color-focus-ring: #00A8D6;
  --color-overlay: rgba(11, 37, 48, 0.55);
  --color-badge-pool-bg: #E1F4FA;
  --color-badge-pool-text: #00688C;
  --color-badge-teich-bg: #E9F3EA;
  --color-badge-teich-text: #2F6B3D;

  /* WhatsApp-Grün (Markenfarbe) — gilt in beiden Modi, wird nicht überschrieben.
     Dunkle Schrift statt Weiß: Weiß auf diesem Grün hätte nur 2:1 Kontrast. */
  --color-whatsapp: #25D366;
  --color-whatsapp-hover: #1EBE5A;
  --color-whatsapp-text: #073B2F;

  /* Verlauf für Hero/Deko-Flächen */
  --gradient-hero: linear-gradient(160deg, #EAF8FC 0%, #CFF0F7 45%, #9FE0EE 100%);
  --gradient-accent: linear-gradient(135deg, #00A8D6 0%, #006E93 100%);

  /* ---- Typografie ---- */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --heading-style: normal;
  --heading-weight: 700;
  --heading-tracking: -0.02em;

  --fs-900: clamp(2.5rem, 1.9rem + 2.6vw, 4rem);
  --fs-800: clamp(2rem, 1.6rem + 1.8vw, 3rem);
  --fs-700: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
  --fs-600: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  --fs-500: 1.125rem;
  --fs-400: 1rem;
  --fs-300: 0.9375rem;
  --fs-200: 0.8125rem;

  --line-tight: 1.15;
  --line-snug: 1.35;
  --line-normal: 1.6;

  /* ---- Abstände ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* ---- Layout ---- */
  --container-max: 1200px;
  --container-pad: clamp(1.25rem, 4vw, 2.5rem);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-full: 999px;

  /* ---- Schatten (hell: weich/bläulich) ---- */
  --shadow-sm: 0 1px 2px rgba(11, 37, 48, 0.06), 0 1px 1px rgba(11, 37, 48, 0.04);
  --shadow-md: 0 8px 24px rgba(0, 110, 147, 0.12);
  --shadow-lg: 0 20px 48px rgba(0, 110, 147, 0.16);

  /* ---- Bewegung ---- */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-mode: 420ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- Teich (dunkel) — Overrides ----
   Bewusst als generisches Attribut-Selektor (nicht auf html beschränkt): so kann
   data-mode="teich" auch auf einem verschachtelten Wrapper (z.B. im Preisrechner-Tab)
   ein lokal abgedunkeltes Farbschema erzeugen, ohne die ganze Seite umzuschalten. */
[data-mode="teich"] {
  --color-bg: #0B1512;
  --color-bg-alt: #101F1A;
  --color-surface: #12211C;
  --color-surface-raised: #16281F;
  --color-text: #E8F0EC;
  --color-heading: #F4EFE0;
  --color-text-muted: #9FB3AA;
  --color-accent: #E3B94D;
  --color-accent-bright: #F0C955;
  --color-accent-strong: #C9A227;
  --color-accent-contrast: #0B1512;
  --color-border: #2A3F36;
  --color-border-strong: #4A6357;
  --color-success: #4CAF6D;
  --color-success-bg: #16281F;
  --color-error: #E2665A;
  --color-error-bg: #241716;
  --color-warning-bg: #241C0F;
  --color-warning-text: #E3B94D;
  --color-focus-ring: #F0C955;
  --color-overlay: rgba(4, 10, 8, 0.65);
  --color-badge-pool-bg: #16281F;
  --color-badge-pool-text: #7FD3EE;
  --color-badge-teich-bg: #24361E;
  --color-badge-teich-text: #E3B94D;

  --gradient-hero: linear-gradient(160deg, #0B1512 0%, #10241B 45%, #1B3324 100%);
  --gradient-accent: linear-gradient(135deg, #E3B94D 0%, #C9A227 100%);

  /* Teich-Überschriften: kursiv/serif = organisch, weicher Kontrast zum knappen Pool-Sans */
  --font-heading: ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif;
  --heading-style: italic;
  --heading-weight: 600;
  --heading-tracking: 0em;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 56px rgba(0, 0, 0, 0.55);
}

/* ---- Pool (hell) — explizite Re-Assertion für verschachtelte Wrapper ----
   :root deckt den Normalfall ab; dieser Block erlaubt zusätzlich data-mode="pool"
   auf einem Element INNERHALB einer dunklen (Teich-)Seite, z.B. im Preisrechner-Tab. */
[data-mode="pool"] {
  --color-bg: #F5FBFD;
  --color-bg-alt: #E7F6FA;
  --color-surface: #FFFFFF;
  --color-surface-raised: #FFFFFF;
  --color-text: #163238;
  --color-heading: #0B2530;
  --color-text-muted: #4B6B72;
  --color-accent: #006E93;
  --color-accent-bright: #00A8D6;
  --color-accent-strong: #00688C;
  --color-accent-contrast: #FFFFFF;
  --color-border: #CFE9F0;
  --color-border-strong: #8FC4D6;
  --color-success: #1F8A4C;
  --color-success-bg: #E4F5EA;
  --color-error: #C62828;
  --color-error-bg: #FCEAEA;
  --color-warning-bg: #FFF6E0;
  --color-warning-text: #7A5B00;
  --color-focus-ring: #00A8D6;
  --color-overlay: rgba(11, 37, 48, 0.55);
  --color-badge-pool-bg: #E1F4FA;
  --color-badge-pool-text: #00688C;
  --color-badge-teich-bg: #E9F3EA;
  --color-badge-teich-text: #2F6B3D;

  --gradient-hero: linear-gradient(160deg, #EAF8FC 0%, #CFF0F7 45%, #9FE0EE 100%);
  --gradient-accent: linear-gradient(135deg, #00A8D6 0%, #006E93 100%);

  --font-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --heading-style: normal;
  --heading-weight: 700;
  --heading-tracking: -0.02em;

  --shadow-sm: 0 1px 2px rgba(11, 37, 48, 0.06), 0 1px 1px rgba(11, 37, 48, 0.04);
  --shadow-md: 0 8px 24px rgba(0, 110, 147, 0.12);
  --shadow-lg: 0 20px 48px rgba(0, 110, 147, 0.16);
}