/* =========================================================
   Vasis A/S — Theme (Warm Minimalism)
   ========================================================= */

body.theme-warm-minimalism {
  --bg: #F5F2EB;
  --bg-soft: #FAF8F2;
  --fg: #1A1F1B;
  --fg-soft: #4A524A;
  --accent: #D7E3A4;
  --accent-mid: #BFD180;
  --accent-strong: #7B8F4A;
  --dark: #2F4630;
  --dark-deep: #1F2F22;
  --line: rgba(26, 31, 27, 0.12);
  --line-dark: rgba(245, 242, 235, 0.18);

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --font-meta: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --display-weight: 400;
  --display-tracking: -0.015em;
  --hero-weight: 300;
  --radius: 999px;
  --radius-card: 0;

  --hero-fg: #F5F2EB;
  /* Hero-baggrund: AVIF foretrækkes (~44KB vs ~117KB webp), webp er
     fallback for ældre browsere. image-set() lader browseren selv vælge
     det første format den forstår — INGEN designforskel, kun mindre payload.
     Mobil får en 800px-crop (~13KB) via media-query nedenfor. */
  --hero-image: image-set(
    url('../assets/hero.avif') type('image/avif'),
    url('../assets/hero.webp') type('image/webp')
  );
  --hero-image-fallback: url('../assets/hero.webp');
  --hero-overlay: linear-gradient(180deg, rgba(31,47,34,0.55), rgba(31,47,34,0.85)),
                  linear-gradient(90deg, rgba(31,47,34,0.7) 0%, rgba(31,47,34,0.35) 60%);

  --header-scrolled-bg: rgba(31, 47, 34, 0.85);
  --cta-bg: #1F2F22;   --cta-fg: #F5F2EB;   --cta-btn-fg: #1F2F22;
  --footer-bg: #1F2F22; --footer-fg: #F5F2EB;
  --tag-bg: rgba(245,242,235,0.92); --tag-fg: #1A1F1B;
  --btn-primary-bg: #D7E3A4; --btn-primary-fg: #1F2F22; --btn-primary-bg-hover: #BFD180;
}

/* Subtle film-grain across the whole page (Editorial Luxury archetype).
   PERF: feTurbulence-grain er en dyr GPU-paint på mobil (genmales på hver
   scroll-composite). Vi wrapper den i min-width:769px så telefoner slipper
   for omkostningen. Desktop-design er 100% uændret — grain bevares dér. */
@media (min-width: 769px) {
  body.theme-warm-minimalism::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: var(--z-grain);
    opacity: 0.06;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  1 0 0 0 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    background-size: 280px 280px;
  }
}

/* Mobil hero-crop: 800px-bred AVIF (~13KB) i stedet for fuld 2400px-billede.
   Samme framing (center cover), bare en mindre kilde — INGEN synlig forskel.
   webp-fald-tilbage til samme lille... der findes ingen mobil-webp, så
   image-set falder tilbage til den fulde webp hvis browseren ikke kan AVIF
   (sjældent på mobil i 2026 — Chrome/Safari/Firefox understøtter alle AVIF). */
@media (max-width: 768px) {
  body.theme-warm-minimalism {
    --hero-image: image-set(
      url('../assets/hero-mobile.avif') type('image/avif'),
      url('../assets/hero.webp') type('image/webp')
    );
  }
}