/* ============================================
   THELENSHOF – Design System Variables
   Bio Bauernhof · Ferienwohnungen · Eifel
   ============================================ */

:root {

  /* ──────────────────────────────────────────
     1. FARBEN – Primär
     ────────────────────────────────────────── */
  --color-primary: #2D5016;
  --color-primary-dark: #1A3009;
  --color-primary-light: #4A7A2E;
  --color-primary-rgb: 45, 80, 22;

  /* ──────────────────────────────────────────
     2. FARBEN – Sekundär & Akzent
     ────────────────────────────────────────── */
  --color-secondary: #8B6914;
  --color-secondary-light: #A8842A;
  --color-secondary-rgb: 139, 105, 20;

  --color-accent: #D4940A;
  --color-accent-light: #E8B44A;
  --color-accent-rgb: 212, 148, 10;

  /* ──────────────────────────────────────────
     3. FARBEN – Hintergrund & Oberflächen
     ────────────────────────────────────────── */
  --color-bg: #F5F0E8;
  --color-surface: #FAF8F4;
  --color-white: #FFFFFF;
  --color-divider: #E0D8CC;
  --color-border: #D4CCBB;

  /* ──────────────────────────────────────────
     4. FARBEN – Text
     ────────────────────────────────────────── */
  --color-text: #333333;
  --color-text-secondary: #595959;
  --color-text-on-dark: #F5F0E8;
  --color-text-on-primary: #F5F0E8;
  --color-text-on-accent: #FFFFFF;

  /* ──────────────────────────────────────────
     5. FARBEN – Status
     ────────────────────────────────────────── */
  --color-success: #3A7D2E;
  --color-error: #C0392B;
  --color-warning: #D4940A;
  --color-info: #2C6BAC;

  /* ──────────────────────────────────────────
     6. TYPOGRAFIE – Schriftfamilien
     ────────────────────────────────────────── */
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif;

  /* ──────────────────────────────────────────
     7. TYPOGRAFIE – Schriftgrößen
     ────────────────────────────────────────── */
  --text-h1: 56px;
  --text-h2: 42px;
  --text-h3: 32px;
  --text-h4: 24px;
  --text-h5: 20px;
  --text-body: 16px;
  --text-lg: 18px;
  --text-small: 14px;
  --text-caption: 12px;

  /* ──────────────────────────────────────────
     8. TYPOGRAFIE – Zeilenhöhen
     ────────────────────────────────────────── */
  --leading-h1: 1.15;
  --leading-h2: 1.2;
  --leading-h3: 1.25;
  --leading-h4: 1.3;
  --leading-h5: 1.35;
  --leading-body: 1.6;
  --leading-small: 1.5;
  --leading-caption: 1.4;

  /* ──────────────────────────────────────────
     9. TYPOGRAFIE – Schriftgewichte
     ────────────────────────────────────────── */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ──────────────────────────────────────────
     10. TYPOGRAFIE – Buchstabenabstand
     ────────────────────────────────────────── */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.01em;
  --tracking-wider: 0.02em;
  --tracking-widest: 0.1em;

  /* ──────────────────────────────────────────
     11. SPACING – 8px Basis-System
     ────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 80px;
  --space-9: 120px;

  /* ──────────────────────────────────────────
     12. LAYOUT – Container & Grid
     ────────────────────────────────────────── */
  --container-max: 1140px;
  --container-tablet: 720px;
  --container-padding: 16px;
  --grid-columns: 12;
  --grid-gutter: 24px;
  --content-max-width: 680px;

  /* ──────────────────────────────────────────
     13. SCHATTEN
     ────────────────────────────────────────── */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16);

  /* ──────────────────────────────────────────
     14. BORDER-RADIUS
     ────────────────────────────────────────── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 50%;

  /* ──────────────────────────────────────────
     15. TRANSITIONS
     ────────────────────────────────────────── */
  --transition-fast: all 0.15s ease;
  --transition-base: all 0.2s ease;
  --transition-slow: all 0.3s ease-in-out;

  /* ──────────────────────────────────────────
     16. Z-INDEX Skala
     ────────────────────────────────────────── */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-overlay: 400;
  --z-modal: 500;
  --z-lightbox: 600;
  --z-nav: 1000;

  /* ──────────────────────────────────────────
     17. NAVIGATION
     ────────────────────────────────────────── */
  --nav-height: 80px;
  --nav-bg-transparent: transparent;
  --nav-bg-scrolled: rgba(26, 48, 9, 0.95);
  --nav-bg-solid: var(--color-surface);

  /* ──────────────────────────────────────────
     18. HERO
     ────────────────────────────────────────── */
  --hero-height-desktop: 90vh;
  --hero-height-tablet: 70vh;
  --hero-height-mobile: 60vh;
  --hero-overlay: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);

  /* ──────────────────────────────────────────
     19. FOOTER
     ────────────────────────────────────────── */
  --footer-bg: var(--color-primary-dark);
  --footer-text: var(--color-text-on-dark);
  --footer-divider: rgba(245, 240, 232, 0.15);

  /* ──────────────────────────────────────────
     20. ICONS
     ────────────────────────────────────────── */
  --icon-xs: 16px;
  --icon-sm: 24px;
  --icon-md: 32px;
  --icon-lg: 48px;
  --icon-stroke: 2px;
  --icon-color: var(--color-primary);
  --icon-color-hover: var(--color-accent);
  --icon-color-on-dark: var(--color-text-on-dark);

  /* ──────────────────────────────────────────
     21. BUTTONS
     ────────────────────────────────────────── */
  --btn-radius: var(--radius-md);
  --btn-font-weight: var(--weight-semibold);
  --btn-font-family: var(--font-body);
  --btn-transition: var(--transition-base);
  --btn-disabled-opacity: 0.5;

  --btn-sm-padding: 8px 16px;
  --btn-sm-font: 14px;
  --btn-sm-height: 44px;

  --btn-md-padding: 12px 24px;
  --btn-md-font: 16px;
  --btn-md-height: 44px;

  --btn-lg-padding: 16px 32px;
  --btn-lg-font: 18px;
  --btn-lg-height: 52px;

  /* ──────────────────────────────────────────
     22. CARDS
     ────────────────────────────────────────── */
  --card-bg: var(--color-surface);
  --card-radius: var(--radius-md);
  --card-shadow: var(--shadow-md);
  --card-shadow-hover: var(--shadow-lg);
  --card-padding: 24px;
  --card-hover-transform: translateY(-4px);

  /* ──────────────────────────────────────────
     23. FORMULARE
     ────────────────────────────────────────── */
  --input-bg: var(--color-white);
  --input-border: 1px solid var(--color-border);
  --input-radius: var(--radius-md);
  --input-padding: 12px 16px;
  --input-font: var(--text-body);
  --input-min-height: 44px;
  --input-focus-border: var(--color-primary);
  --input-focus-shadow: 0 0 0 3px rgba(45, 80, 22, 0.15);
  --input-error-border: var(--color-error);

  /* ──────────────────────────────────────────
     24. LIGHTBOX
     ────────────────────────────────────────── */
  --lightbox-overlay: rgba(0, 0, 0, 0.90);
  --lightbox-img-max-w: 90vw;
  --lightbox-img-max-h: 80vh;
  --lightbox-thumb-size: 60px;
  --lightbox-ui-color: var(--color-text-on-dark);
  --lightbox-active-border: var(--color-accent);

  /* ──────────────────────────────────────────
     25. GALERIE
     ────────────────────────────────────────── */
  --gallery-gutter: var(--space-4);
  --gallery-gutter-mobile: var(--space-3);
  --gallery-columns: 3;
  --gallery-columns-tablet: 2;
  --gallery-columns-mobile: 1;
  --gallery-hover-scale: 1.05;
  --gallery-img-radius: var(--radius-md);

  /* ──────────────────────────────────────────
     26. BREAKPOINTS (als Referenz)
     CSS Custom Properties können nicht in
     @media Queries genutzt werden.
     ────────────────────────────────────────── */
  /* Mobile:   < 768px   (4 Spalten)  */
  /* Tablet:   768px+    (8 Spalten)  */
  /* Desktop:  1200px+   (12 Spalten) */

  /* ──────────────────────────────────────────
     27. TOUCH & ACCESSIBILITY
     ────────────────────────────────────────── */
  --touch-target-min: 44px;
  --touch-target-gap: 8px;
  --focus-outline: 3px solid var(--color-accent);
  --focus-offset: 2px;
}


/* ============================================
   RESPONSIVE OVERRIDES
   ============================================ */

/* ── Tablet (768px – 1199px) ─────────────── */
@media (max-width: 1199px) {
  :root {
    --text-h1: 44px;
    --text-h2: 34px;
    --text-h3: 26px;
    --text-h4: 22px;
    --text-h5: 18px;
    --grid-columns: 8;
    --space-8: 64px;
  }
}

/* ── Mobile (< 768px) ────────────────────── */
@media (max-width: 767px) {
  :root {
    --text-h1: 36px;
    --text-h2: 28px;
    --text-h3: 22px;
    --text-h4: 20px;
    --text-h5: 18px;
    --grid-columns: 4;
    --grid-gutter: 16px;
    --space-8: 48px;
    --gallery-gutter: var(--space-3);
  }
}