/* ══════════════════════════════════════════════════════════════════════════
   THE MATERIAL — glass, light and depth. The ONLY source for these tokens.

   Loaded by site_shared/master.php (every subpage + belevingen/) and by
   site/index.php (the homepage, which does not use the shell). One file, two
   <link>s — just like the loading curtain, and for the same reason: the
   alternative was a copy in index.css, and copies like that demonstrably drift
   apart in this project.

   This file holds ONLY tokens plus the single ambient layer. No component rules:
   those belong with the components themselves (master.css for the shell,
   index.css for the homepage). The moment a component lands in here this stops
   being a material layer and becomes a second stylesheet fighting the first —
   see the warning in apps/branding/surfaces.css, which contains only custom
   properties for precisely that reason.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── MATERIAL — glass, light and depth (2026-09-01) ─────────────────────
     The site was flat: plain ink, hairlines, cards with a border and a solid
     fill. The booking funnel already had glass, ambient light and shadow, and
     you saw that difference immediately — the owner: "site/ does not look as
     good as belevingen/". This is that same material layer, set here in the warm
     ink of the site.

     THE VOCABULARY COMES FROM apps/branding/surfaces.css — that file is the
     source of these names and of the house rules behind them (high glass alpha
     because of contrast; glow means something and is not decoration). We do NOT
     load it here: it lives in a different tree from site/, and those paths differ
     per deploy layout (the site can sit at the docroot, at /site or at
     /apps/site). One wrong path means a page with no material at all. The values
     below are therefore the site's own filling-in of those same names, equal to
     belevingen's so that site and funnel read as one product.

     THAT "EQUAL" IS A MECHANISM, NOT A PROMISE: apps/local/tests/material/
     compares these tokens with belevingen's and fails the moment they drift.
     That is exactly what went wrong with the loading curtain, where "keep in
     sync" sat above a copy and the two ended up two fix rounds apart. */
  --sbv-radius-sm: 8px;
  --sbv-radius-md: 12px;
  --sbv-radius-lg: 16px;
  --sbv-radius-pill: 999px;
  --sbv-blur: blur(18px) saturate(135%);

  --sbv-surface-0: var(--ink);                    /* page canvas            */
  --sbv-surface-1: rgba(29, 26, 20, 0.62);        /* panels, zones          */
  --sbv-surface-2: rgba(38, 34, 26, 0.66);        /* cards, raised          */
  --sbv-surface-3: rgba(22, 20, 16, 0.62);        /* rows, sunken           */
  --sbv-surface-strong: rgba(15, 14, 11, 0.82);   /* header, modal          */
  --sbv-surface-edge: rgba(244, 239, 227, 0.09);  /* 1px lit hairline       */
  --sbv-surface-sheen: inset 0 1px 0 rgba(244, 239, 227, 0.09);
  --sbv-panel-lit: rgba(244, 239, 227, 0.055);    /* light at a panel's top */
  --sbv-panel-border: rgba(244, 239, 227, 0.2);

  --sbv-elev-1: 0 2px 8px rgba(0, 0, 0, 0.35);
  --sbv-elev-2: 0 10px 30px rgba(0, 0, 0, 0.45);
  --sbv-elev-3: 0 24px 60px rgba(0, 0, 0, 0.65);

  /* Ambient in warm tones: gold where the house look is gold, amber/copper where
     it would otherwise be blue or green — blue over warm ink reads as dirt. */
  --sbv-ambient:
    radial-gradient(1000px 560px at 12% -8%, rgba(255, 217, 0, 0.10), transparent 62%),
    radial-gradient(820px 460px at 96% 4%, rgba(184, 115, 51, 0.09), transparent 60%),
    radial-gradient(900px 620px at 55% 108%, rgba(212, 165, 116, 0.06), transparent 62%);
}

/* ── ambient light behind everything — what makes the glass work ────────
   Without this layer glass is just a see-through card on a black field: there is
   nothing to shine through it. Fixed, so the light stays put while the page
   scrolls underneath — it is the SPACE, not the content.

   z-index -1 works because the body background propagates to the page canvas;
   body itself then paints no box for this layer to disappear behind. The moment
   someone gives body a background that does NOT propagate, this layer is
   invisible — that is the trap with this pattern. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--sbv-ambient);
}

/* The ambient ember layer (.ambient-embers, the field behind the page) has NO
   rules here on purpose. That layer is created by js/preloader.js and styles
   itself inline there — otherwise it would have to live in two stylesheets
   (master.css for the shell, index.css for the homepage), which is another copy
   that can drift. The reason for each declaration sits with that code. */