/* ============================================================
   AMU TURNHOUT — DESIGN TOKENS
   ============================================================
   Pas hier kleuren, fonts en spacing aan.
   Beide thema's (Intimate Elegance & Dark Luxe) erven hiervan.
   ============================================================ */

/* ── GEDEELDE TOKENS (beide thema's) ──────────────────────── */
:root {
  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 100px;

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.1);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.15);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.2);

  /* Max widths */
  --max-width-content: 1000px;
  --max-width-wide: 1200px;
  --max-width-narrow: 700px;

  /* Breakpoints (for reference — use in @media) */
  /* --bp-mobile: 480px; */
  /* --bp-tablet: 768px; */
  /* --bp-desktop: 1024px; */
}


/* ── THEMA: INTIMATE ELEGANCE ─────────────────────────────── */
/* Warm, uitnodigend, klassiek-elegant                        */
/* Fonts: Playfair Display + Lato                              */
/* Navigatie: Fullscreen overlay                               */

[data-theme="intimate-elegance"] {
  /* ─ Primaire kleuren ─ */
  --color-primary: #2D4A4A;          /* Teal/petrol — hoofdkleur */
  --color-primary-dark: #1E3535;     /* Donkerder teal */
  --color-primary-deep: #152828;     /* Diepste teal (achtergrond) */

  /* ─ Accent kleuren ─ */
  --color-accent: #B07840;           /* Cognac — accent/CTA */
  --color-accent-light: #C8944E;     /* Lichter cognac */
  --color-accent-muted: rgba(176, 120, 64, 0.3);

  /* ─ Neutrale kleuren ─ */
  --color-cream: #F5F0E8;            /* Crèmewit */
  --color-warm-white: #EDE8DF;

  /* ─ Achtergrond ─ */
  --bg-body: var(--color-primary-deep);
  --bg-card: rgba(255, 255, 255, 0.015);
  --bg-card-hover: rgba(255, 255, 255, 0.03);
  --bg-nav: rgba(21, 40, 40, 0.95);
  --bg-glass-border: rgba(255, 255, 255, 0.02);

  /* ─ Tekst ─ */
  --text-primary: #E8E0D4;           /* Hoofdtekst */
  --text-secondary: #9A9080;         /* Subtekst */
  --text-muted: #6A6258;             /* Zachte tekst */
  --text-heading: var(--color-cream);
  --text-accent: var(--color-accent);

  /* ─ Typografie ─ */
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body: 'Playfair Display', Georgia, serif;
  --font-weight-heading: 400;
  --font-weight-heading-bold: 600;

  /* ─ Font sizes ─ */
  --text-xs: 0.72rem;
  --text-sm: 0.82rem;
  --text-base: 0.92rem;
  --text-lg: 1.05rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 2.8rem;
  --text-4xl: 4rem;
  --text-hero: 7rem;

  /* ─ Component-specifiek ─ */
  --nav-bg: rgba(21, 40, 40, 0.95);
  --nav-border: var(--bg-glass-border);
  --btn-radius: 2px;
  --card-radius: var(--radius-lg);
  --card-border: var(--bg-glass-border);
  --card-bg: var(--bg-card);
  --accent-line: linear-gradient(to right, transparent, var(--color-accent), transparent);
  --section-divider: rgba(176, 120, 64, 0.1);

  /* ─ Formuletkaart ─ */
  --formula-badge-bg: var(--color-accent);
  --formula-badge-color: white;
  --formula-price-color: var(--color-accent);

  /* ─ Wijnkaart ─ */
  --wine-grape-color: var(--color-accent);
  --wine-origin-color: var(--text-secondary);
  --wine-price-color: var(--color-accent);
}


/* ── THEMA: DARK LUXE ─────────────────────────────────────── */
/* Strak, modern-luxe, mysterieus met glassmorphism            */
/* Fonts: Cormorant Garamond + Inter                           */
/* Navigatie: Split-brand navbar                               */

[data-theme="dark-luxe"] {
  /* ─ Primaire kleuren ─ */
  --color-primary: #1E3030;           /* Donker teal */
  --color-primary-dark: #162020;
  --color-primary-deep: #0C0F0F;     /* Bijna zwart */

  /* ─ Accent kleuren ─ */
  --color-accent: #B07840;            /* Cognac */
  --color-accent-light: #C8944E;
  --color-accent-muted: rgba(176, 120, 64, 0.3);

  /* ─ Neutrale kleuren ─ */
  --color-cream: #F0ECE3;
  --color-warm-white: #E8E2D8;

  /* ─ Achtergrond ─ */
  --bg-body: var(--color-primary-deep);
  --bg-card: rgba(255, 255, 255, 0.015);
  --bg-card-hover: rgba(255, 255, 255, 0.03);
  --bg-nav: rgba(12, 15, 15, 0.85);
  --bg-glass-border: rgba(255, 255, 255, 0.02);

  /* ─ Tekst ─ */
  --text-primary: #D5CFC4;
  --text-secondary: #8A8378;
  --text-muted: #5C564E;
  --text-heading: var(--color-cream);
  --text-accent: var(--color-accent);

  /* ─ Typografie ─ */
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body: 'Playfair Display', Georgia, serif;
  --font-weight-heading: 400;
  --font-weight-heading-bold: 500;

  /* ─ Font sizes ─ */
  --text-xs: 0.72rem;
  --text-sm: 0.82rem;
  --text-base: 0.92rem;
  --text-lg: 1.05rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 3rem;
  --text-4xl: 4rem;
  --text-hero: 8rem;

  /* ─ Component-specifiek ─ */
  --nav-bg: rgba(12, 15, 15, 0.85);
  --nav-border: var(--bg-glass-border);
  --btn-radius: 4px;
  --card-radius: var(--radius-xl);
  --card-border: var(--bg-glass-border);
  --card-bg: var(--bg-card);
  --accent-line: linear-gradient(to right, transparent, var(--color-accent), transparent);
  --section-divider: rgba(255, 255, 255, 0.03);

  /* ─ Glassmorphism ─ */
  --glass-blur: 10px;
  --glass-bg: rgba(255, 255, 255, 0.035);
  --glass-border: rgba(255, 255, 255, 0.07);
  --glass-shadow: 0 8px 40px rgba(184, 134, 11, 0.08);

  /* ─ Formuletkaart ─ */
  --formula-badge-bg: var(--color-accent);
  --formula-badge-color: white;
  --formula-price-color: var(--color-accent);

  /* ─ Wijnkaart ─ */
  --wine-grape-color: var(--color-accent-light);
  --wine-origin-color: var(--text-secondary);
  --wine-price-color: var(--color-accent);
}


/* ── RESPONSIVE OVERRIDES ─────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --text-hero: 4rem;
    --text-4xl: 2.8rem;
    --text-3xl: 2rem;
    --space-3xl: 4rem;
  }
}

@media (max-width: 480px) {
  :root {
    --text-hero: 3rem;
    --text-4xl: 2.2rem;
    --text-3xl: 1.8rem;
  }
}