/* ============================================================
   SHARED PREMIUM PALETTE — Services, Projects, Contact, Footer
   ----------------------------------------------------------
   Everything after the Hero shares ONE light "warm stone/beige"
   room so scrolling reads as one continuous interior instead of
   a different website per section. Hero is intentionally left
   out of this — it keeps its own dark tokens (tokens.css) exactly
   as approved; its "premium beige" feeling comes from the video
   content itself, not the page chrome around it.

   Scoped to .room (a class every post-Hero <section> carries)
   rather than :root, so it never touches Hero's dark theme.
============================================================ */
.room{
  --room-bg-1: #F6F1EA; /* primary background */
  --room-bg-2: #EFE8DE; /* secondary */
  --room-bg-3: #E7DDD1; /* section accent / deepest step */
  --room-card: rgba(255,255,255,0.45);
  --room-card-solid: #FBF8F2; /* for surfaces that need real text contrast, e.g. form inputs */
  --room-border: rgba(120,95,70,0.15);
  --room-text: #2F241B;
  --room-text-muted: #766A5E;
  --room-text-faint: rgba(47,36,27,0.42);
  --room-accent: #8C6239;
  --room-accent-dim: rgba(140,98,57,0.14);

  color:var(--room-text);
}

/* ============================================================
   SITE CANVAS — the ONE continuous background for everything
   after the Hero (Services, Projects, About, Contact, Footer —
   see the .site-canvas wrapper in index.html).
   ----------------------------------------------------------
   Previously each section painted its own step of a beige
   gradient (bg-1 -> bg-2 -> bg-3), which read as several distinct
   "different backgrounds" stacked in sequence. Now there is a
   single background-image layer sized to the wrapper's full
   combined height (position:absolute + inset:0 on a
   position:relative parent whose own height is just the natural
   sum of its section children) so the exact same backdrop is
   visible no matter which section you're scrolled to — no seams,
   no color steps, one continuous room.
   background-size:cover guarantees full edge-to-edge coverage
   with no gaps at any viewport width/height (the source image is
   an even, texture-light beige tone, so scaling it up for a very
   tall page introduces no visible artifacts).
   Every section inside stays transparent (no background of its
   own) and only sets position:relative + z-index:1 so its own
   content/cards still paint above this shared layer. */
.site-canvas{
  position:relative;
  isolation:isolate;
  /* Matches the background image's own tone — a same-color fallback so
     there's never a flash of body's dark Hero-matching background
     showing through on the rare chance the image hasn't painted yet. */
  background-color:#F6F1EA;
}
.site-canvas::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background-image:url('../assets/images/section-background.webp');
  background-size:cover;
  background-position:center top;
  background-repeat:no-repeat;
  pointer-events:none;
}
.site-canvas > section,
.site-canvas > footer{
  position:relative;
  z-index:1;
}

/* Shared glass-card language: same radius, border, shadow and
   tint everywhere a "card" appears (project cards, contact form
   panel) so nothing suddenly reads as a plain white box.
   No backdrop-filter by default — it's an expensive paint for
   very little payoff once the backdrop is a near-solid color.
   Add it per-component only over a genuinely textured backdrop. */
.room-card{
  background:var(--room-card);
  border:1px solid var(--room-border);
  box-shadow:
    0 30px 60px -30px rgba(60,45,30,0.22),
    0 8px 20px -12px rgba(60,45,30,0.10),
    0 1px 0 rgba(255,255,255,0.5) inset;
}

/* A very soft radial highlight — the "daylight" every room shares
   instead of a hard technical grid. Extremely subtle by design. */
.room-glow{
  content:"";
  position:absolute;
  pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(140,98,57,0.06) 0%, rgba(140,98,57,0) 70%);
}