/* Perla Dental Studio — v2 web layer.
   Additive: load AFTER design-system/styles.css. Nothing here replaces a brand
   colour or typeface; it encodes the v2 web decisions (contrast, density, the
   3D object frame) as tokens so screens stop hand-rolling values. */
:root{
  /* --- Surface sequence -------------------------------------------------
     v2 opens and closes on matte black and alternates warm bands between.
     A page uses these IN ORDER; never two adjacent bands of the same tone. */
  --band-1:var(--matte-black);   /* hero */
  --band-2:var(--warm-white);    /* object / cases */
  --band-3:var(--soft-ivory);    /* method */
  --band-4:var(--cashmere);      /* statement */
  --band-5:var(--matte-black);   /* contact */

  /* --- Contrast corrections (v1 read as washed out) --------------------- */
  --eyebrow-on-light:var(--deep-taupe);   /* was --warm-taupe */
  --eyebrow-on-dark:var(--champagne-gold);
  --meta-on-light:var(--deep-taupe);
  --meta-on-dark:var(--warm-taupe);
  --line-on-dark-gold:rgba(198,164,112,.42); /* hairline on matte black */

  /* --- Type floor: nothing below 11px ships ---------------------------- */
  --text-furniture:11px;      /* every tracked-uppercase label, nav, caption */
  --weight-furniture:500;     /* tracked uppercase is 500, not 300 */
  --text-caption-lg:13px;

  /* Fluid display scale used by the web surfaces */
  --text-hero:clamp(40px,9.6vw,104px);
  --text-statement:clamp(30px,7vw,58px);
  --text-chapter:clamp(22px,5vw,34px);
  --text-figure:clamp(24px,5vw,34px);  /* turnaround numerals */

  /* --- Density: v1 sections were too tall for the content they held ---- */
  --section-y-web:clamp(52px,10vw,120px);
  --section-y-web-dark:clamp(56px,11vw,140px);
  --gutter-web:clamp(16px,4vw,56px);
  --grid-gap-web:clamp(18px,4vw,56px);
  --card-min:260px;   /* grid-template-columns: repeat(auto-fit,minmax(var(--card-min),1fr)) */

  /* --- Chapter head: ordinal / title / right-aligned meta -------------- */
  --chapter-rule:1px solid var(--line-rule);
  --chapter-pad-b:clamp(20px,4vw,32px);

  /* --- The 3D object frame --------------------------------------------- */
  --object-stage:radial-gradient(118% 88% at 50% 30%,#FFFFFF 0%,#F1E9DE 44%,#D6CEC2 100%);
  --object-frame-inset:14px;
  --object-frame:1px solid rgba(198,164,112,.34);
  --object-contact-shadow:radial-gradient(closest-side,rgba(94,79,70,.4),rgba(94,79,70,0));
  --object-min-h:clamp(340px,76vw,540px);

  /* --- Empty media frames read as material, not as holes --------------- */
  --media-fallback-1:linear-gradient(160deg,#E6E0D3,#AB9682);
  --media-fallback-2:linear-gradient(160deg,#D6CEC2,#78665D);
  --media-fallback-3:linear-gradient(160deg,#EFEAE3,#C6A470);

  /* --- Hero band scrims and fallback (matte-black derived) -------------- */
  --header-scrim:rgba(13,13,13,.92);
  --capability-strip-scrim:rgba(13,13,13,.72);
  --hero-photo-fallback:linear-gradient(150deg,#2A2723,#161513 60%,#0D0D0D);

  /* --- Reveal: the whole motion vocabulary ---------------------------- */
  --reveal-drift:10px;  /* v1 used 6px; 10px at these scales still reads as still */
  --reveal-duration:560ms;
  --reveal-ease:var(--ease-standard);
}
@media (prefers-reduced-motion:reduce){
  :root{--reveal-drift:0px;--reveal-duration:0ms}
}