/* ============================================================
   Mackelijk — THEMA "Licht & luchtig met subtiele texturen"
   Variant-stylesheet: laadt ná site.css en hertint de hele site.
   Door tokens te herdefiniëren krijgen ook de design-system-
   componenten (Card, Badge, Button) automatisch deze look.
   ============================================================ */

:root {
  /* Luchtige, licht-warme oppervlakken */
  --surface-page:   #faf9f7;
  --surface-subtle: rgba(108, 118, 125, 0.06);   /* doorschijnend, zodat textuur doorschemert */
  --surface-sunken: rgba(108, 118, 125, 0.10);
  --surface-card:   #ffffff;

  /* Zachtere, iets warmere randen */
  --border-subtle:  #ece8e1;
  --border-default: #e1dcd3;

  /* Zachtere, meer diffuse schaduwen (airy float) */
  --shadow-xs:  0 1px 2px rgba(40, 38, 34, 0.05);
  --shadow-sm:  0 1px 2px rgba(40, 38, 34, 0.04), 0 6px 16px rgba(40, 38, 34, 0.05);
  --shadow-md:  0 4px 10px rgba(40, 38, 34, 0.05), 0 18px 42px rgba(40, 38, 34, 0.07);
  --shadow-lg:  0 10px 26px rgba(40, 38, 34, 0.06), 0 34px 74px rgba(40, 38, 34, 0.09);
  --shadow-xl:  0 18px 46px rgba(40, 38, 34, 0.08), 0 56px 110px rgba(40, 38, 34, 0.12);

  /* Iets zachtere, rondere hoeken */
  --radius-xl:  24px;
  --radius-2xl: 32px;

  /* Extra, rustige kleurtint binnen de huisstijl (koel blauwgrijs) */
  --tint-cool:  #e9f0f3;
  --tint-warm:  var(--crimson-50);
}

/* ---- Pagina-achtergrond: zachte pastel kleurwolken (à la de Synology-foto) + fijne textuur ---- */
body {
  background-color: var(--surface-page);
  background-image:
    radial-gradient(1100px 560px at 6% -8%, rgba(58, 110, 170, 0.18), transparent 60%),
    radial-gradient(900px 520px at 50% -12%, rgba(132, 110, 184, 0.15), transparent 62%),
    radial-gradient(1000px 560px at 100% 0%, rgba(214, 120, 148, 0.17), transparent 62%),
    radial-gradient(900px 640px at 78% 108%, rgba(58, 110, 170, 0.14), transparent 60%),
    radial-gradient(820px 600px at 14% 112%, rgba(214, 120, 148, 0.12), transparent 60%);
  background-attachment: fixed;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(35, 39, 42, 0.05) 1px, transparent 1.6px);
  background-size: 22px 22px;
  opacity: 0.5;
}
#root { position: relative; z-index: 1; }

/* ---- Navigatie: lichter en luchtiger ---- */
.nav { background: rgba(250, 249, 247, 0.72); }
.nav--scrolled { box-shadow: 0 1px 0 rgba(40, 38, 34, 0.04); }

/* ---- Heroes: zachte meerkleurige gloed + textuur ---- */
.hero, .page-hero, .article-hero, .contact-cta { position: relative; }
.hero {
  background:
    radial-gradient(680px 420px at 88% -20%, rgba(195, 7, 48, 0.10), transparent 60%),
    radial-gradient(620px 480px at 4% 8%, rgba(58, 110, 140, 0.09), transparent 60%);
}
.page-hero {
  background:
    radial-gradient(620px 320px at 92% -30%, rgba(195, 7, 48, 0.10), transparent 62%),
    radial-gradient(560px 360px at 0% 0%, rgba(58, 110, 140, 0.08), transparent 60%),
    linear-gradient(180deg, rgba(244, 242, 238, 0.7), transparent);
  border-bottom-color: var(--border-subtle);
}
.article-hero {
  background:
    radial-gradient(560px 280px at 90% -30%, rgba(195, 7, 48, 0.10), transparent 62%),
    radial-gradient(460px 320px at 2% 0%, rgba(58, 110, 140, 0.07), transparent 60%),
    linear-gradient(180deg, rgba(244, 242, 238, 0.6), transparent);
}

/* ---- Eyebrow-accentstreep iets zachter ---- */
.eyebrow::before { opacity: 0.9; }

/* ---- Kaarten/oppervlakken: subtiele glasrand + diepte ---- */
.price-card, .news-card, .partner-card, .module-row, .spec-wrap, .faq,
.news-feature, .contact-map, .service-img, .product-tile__img,
.founder__img, .hero-product, .article-cover__img, .prose-figure__img {
  border-color: var(--border-subtle);
}
.price-card:not(.price-card--dark) { background: rgba(255, 255, 255, 0.86); backdrop-filter: saturate(120%) blur(6px); -webkit-backdrop-filter: saturate(120%) blur(6px); }
.price-card--featured:not(.price-card--dark) { background: #ffffff; }
/* Donkere kaarten (MDM-spotlight) houden hun donkere achtergrond */
.price-card--dark { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.12); }
.price-card--dark.price-card--featured { background: rgba(195, 7, 48, 0.10); border-color: var(--crimson-400); }

/* ---- Trustbar: doorschijnend zodat textuur doorschemert ---- */
.trustbar { background: rgba(255, 255, 255, 0.6); }

/* ---- "Subtiele" secties: zachte diagonale pastelwas i.p.v. vlak grijs (à la Synology-foto) ---- */
[style*="surface-subtle"] {
  background:
    linear-gradient(125deg, rgba(58, 110, 170, 0.16) 0%, rgba(132, 110, 184, 0.12) 45%, rgba(214, 120, 148, 0.16) 100%),
    var(--surface-subtle) !important;
}

/* ---- Diensten: zachte tint op alternerende rijen ---- */
.service-row:nth-child(even of .service-row),
.service-row.service-row--flip {
  background: linear-gradient(180deg, rgba(58, 110, 140, 0.05), rgba(58, 110, 140, 0.02)) !important;
}

/* ---- MackPack-kop: luchtig kaartje eronder ---- */
.fact-pill { background: rgba(255, 255, 255, 0.8); }

/* ---- Tip/citaat in artikelen: iets warmer ---- */
.prose-tip { background: linear-gradient(180deg, var(--crimson-50), rgba(251, 233, 237, 0.4)); }

/* ---- Donkere secties houden hun diepe slate, maar iets zachter randwerk ---- */
.cta-band, .mdm-spotlight__inner { box-shadow: var(--shadow-lg); }

/* ---- Sectie-ritme: nét iets ruimer voor lucht ---- */
.section { padding-block: clamp(4.5rem, 9vw, 8.5rem); }

/* ---- Footer: zachte overgang vanaf de lichte pagina ---- */
.footer { background: linear-gradient(180deg, var(--slate-800), var(--slate-900)); }