/* ==========================================================================
   brand.css — de merkbasis van de site (Calor Lunch & Bar, Echt)
   Enige plek waar kleuren, fonts, spacing en radii gedefinieerd worden.
   Wijzig hier en de hele site volgt. Bevat GEEN component- of paginastijlen.

   Huisstijl Calor: donker, warm Spaans interieur — bordeaux/wijnrood als
   basis, zand/crème voor kaarten en tekst, goud als accent, felroze/neon
   voor de "Viva el Calor"-sfeer. Type: Playfair Display (kop) + Montserrat
   (body) + Monoton (neon-opschrift).
   ========================================================================== */

:root {
  color-scheme: dark;

  /* — Palette — */
  --wine-950:    #1e0909;
  --wine-900:    #2A0E0E;
  --wine-800:    #3D1414;
  --wine-700:    #4A1A1A;
  --wine-card:   #5B1C2B;
  --wine-card-d: #431320;
  --gold-600:    #d9b562;
  --gold-500:    #F1D68A;
  --sand-600:    #d8b986;
  --sand-500:    #EBCFA0;
  --sand-400:    #F3E0BC;
  --sand-dim:    rgba(235, 207, 160, 0.18);
  --hairline-soft: rgba(235, 207, 160, 0.13);
  --rose-500:    #FF3D78;
  --cream-050:   #FDF5E6;
  --muted-400:   #B8A89A;

  --bg: var(--wine-800);
  --surface: var(--wine-card);
  --surface-subtle: var(--wine-card-d);
  --surface-raised: var(--wine-700);
  --text: var(--muted-400);
  --text-muted: var(--muted-400);
  --border: rgba(235, 207, 160, 0.14);
  --accent: var(--gold-500);
  --accent-ink: var(--gold-500);
  --brand: var(--rose-500);

  /* — Rollen op de diepste ondergrond (header/footer/page-header/info-card) — */
  --inverse-bg: var(--wine-900);
  --inverse-bg-strong: var(--wine-950);
  --inverse-text: var(--cream-050);
  --inverse-text-emphasis: var(--cream-050);
  --inverse-text-muted: var(--sand-500);
  --inverse-text-soft: var(--muted-400);
  --inverse-text-dim: rgba(253, 245, 230, 0.6);
  --inverse-text-bright: rgba(253, 245, 230, 0.85);
  --accent-inverse: var(--gold-500);

  /* — Extra tekst-/decoratierol — */
  --text-strong: var(--cream-050);
  --muted-accent: var(--sand-500);

  /* — Status (formulier- en meldingsfeedback) — */
  --success: #6f8f5c;
  --success-strong: #8fae7a;
  --success-veil: rgba(111, 143, 92, 0.14);
  --danger: var(--rose-500);
  --danger-strong: #ff6d97;
  --danger-veil: rgba(255, 61, 120, 0.12);
  --danger-veil-soft: rgba(255, 61, 120, 0.07);
  --danger-ring: rgba(255, 61, 120, 0.35);

  /* — Doorschijnende laagjes op de donkere ondergrond (nav-blur, randjes, hover) — */
  --inverse-veil-nav: rgba(42, 14, 14, 0.94);
  --inverse-border-soft: rgba(235, 207, 160, 0.4);
  --inverse-underline: rgba(235, 207, 160, 0.35);
  --inverse-hover: rgba(235, 207, 160, 0.1);
  --inverse-hairline: rgba(235, 207, 160, 0.13);
  --hairline: rgba(235, 207, 160, 0.13);

  /* — Decoratieve gloed/schaduw rond de accentkleur — */
  --accent-veil: rgba(241, 214, 138, 0.28);
  --accent-veil-strong: rgba(255, 61, 120, 0.5);
  --accent-shadow: rgba(0, 0, 0, 0.45);
  --accent-shadow-strong: rgba(0, 0, 0, 0.55);
  --accent-ring: rgba(241, 214, 138, 0.35);
  --brand-veil: rgba(255, 61, 120, 0.4);
  --sheen: rgba(255, 255, 255, 0.35);

  /* — Type scale — */
  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-neon: "Monoton", "Playfair Display", cursive;

  --fs-eyebrow: 0.6875rem;
  --fs-small: 0.9375rem;
  --fs-body: 0.9375rem;
  --fs-lead: 1.0625rem;
  --fs-h3: clamp(1.375rem, 1.1rem + 1.1vw, 1.75rem);
  --fs-h2: clamp(2rem, 1.5rem + 2.2vw, 3.4rem);
  --fs-h1: clamp(2.75rem, 1.9rem + 3.8vw, 4.75rem);

  /* — Spacing scale — */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;
  --sp-9: 6.5rem;
  --sp-10: 9rem;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --shadow-soft: 0 20px 50px -25px rgba(20, 6, 6, 0.55);
  --shadow-lift: 0 28px 60px -20px rgba(20, 6, 6, 0.6);
  --ease: cubic-bezier(0.22, 0.8, 0.28, 1);

  --maxw: 1240px;
  --gut: clamp(20px, 5vw, 64px);
  --sec: clamp(72px, 9vw, 132px);
}

*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.85;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
picture { display: contents; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--cream-050);
  margin: 0;
  text-wrap: balance;
  font-weight: 500;
  line-height: 1.2;
}
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
ul { margin: 0; padding: 0; list-style: none; }
section { scroll-margin-top: 5.5rem; }