/* Chase Parker — design tokens, DEMO DIRECTION E: "Maison"
   SINGLE SOURCE OF TRUTH for Concept E. Self-contained: defines the full brand
   skin plus the shared SYSTEM scale, so base.css + maison.css carry zero literals.

   HARD RULE (per BUILD-BRIEF): zero hardcoded colors, fonts, spacing, or motion
   values anywhere outside a token file. Swap this block to re-skin Concept E.

   ── DIRECTION E — Crisp gallery white + architectural black ──
   The reference is the maison .com (Louis Vuitton) and a blue-chip white-cube
   gallery: pure white, enormous air, the work floating with a soft real shadow,
   cinematic full-bleed motion. The art is loud, so the room is silent and bright.
   Type is the only ornament. No accent color competes with the work. */

@import url("https://fonts.googleapis.com/css2?family=Marcellus&family=Jost:wght@300;400;500;600&display=swap");

:root {
  /* ============================================================
     BRAND — swap this block per demo direction (A / B / C / D / E)
     ============================================================ */

  /* Neutrals — white-cube gallery walls */
  --ink:        #ffffff;   /* pure white page */
  --ink-2:      #f6f4f0;   /* warm off-white raised panel */
  --ink-3:      #efece6;   /* hover surface */
  --stone:      #16140f;   /* near-black ink text (19:1 on white) */
  --stone-mute: #57534b;   /* captions / body-muted (>6:1) */
  --stone-dim:  #726c61;   /* faint small labels (AA: ~4.6:1 on white) */
  --hairline:   rgba(22, 20, 15, 0.12);
  --hairline-2: rgba(22, 20, 15, 0.06);

  /* Accent — architectural near-black. No gold, no color: the maison register is
     black on white. CTAs fill black; lines are a faint black hairline. */
  --accent:      #16140f;
  --accent-soft: rgba(22, 20, 15, 0.05);
  --accent-line: rgba(22, 20, 15, 0.22);

  /* Light + shadow for the white room. Shadows are soft, long, and pale: the
     work sits off a white wall in even gallery light, never a hard drop. */
  --glow:  rgba(22, 20, 15, 0.06);
  --light: rgba(255, 255, 255, 0.5);   /* the moving highlight in a cinemagraph */
  --cast:  rgba(20, 18, 12, 0.16);      /* soft cast shadow under floated work */

  /* Type — a classical maison roman for display, a geometric grotesque for
     labels and body. Distinct from A (Cormorant), B (Newsreader), C (Fraunces). */
  --font-display: "Marcellus", "Times New Roman", Georgia, serif;
  --font-body:    "Jost", system-ui, -apple-system, "Helvetica Neue", sans-serif;

  /* ============================================================
     SYSTEM — shared structure across directions (scale, not skin)
     ============================================================ */

  /* Layout */
  --maxw:      1320px;
  --maxw-text: 54ch;
  --gutter:    clamp(1.25rem, 5vw, 6.5rem);
  --space:     clamp(6rem, 14vw, 14rem);  /* extravagant vertical rhythm */

  /* Spacing scale */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.5rem;
  --s-6:  2rem;
  --s-7:  3rem;
  --s-8:  4rem;
  --s-9:  6rem;
  --s-10: 8rem;

  /* Fluid type scale */
  --text-xs:      0.75rem;
  --text-sm:      0.875rem;
  --text-base:    1.0625rem;
  --text-lg:      clamp(1.2rem, 1.6vw, 1.5rem);
  --text-xl:      clamp(1.5rem, 2.4vw, 2.25rem);
  --text-2xl:     clamp(2rem, 4vw, 3.5rem);
  --text-3xl:     clamp(2.75rem, 6vw, 5.25rem);
  --text-display: clamp(2.9rem, 10vw, 10rem);

  /* Tracking — maison caps run a touch open; display runs tight */
  --track-tight:  -0.01em;
  --track-normal: 0;
  --track-wide:   0.14em;
  --track-wider:  0.34em;

  /* Line height */
  --leading-tight: 1.04;
  --leading-snug:  1.2;
  --leading-body:  1.72;

  /* Borders / radius — the maison is square-cornered and crisp */
  --radius:    0px;
  --radius-lg: 0px;
  --border:    1px solid var(--hairline);

  /* Motion — slow, weighted, cinematic. Reveals, never bounce. */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur:       0.7s;
  --dur-fast:  0.32s;
  --dur-slow:  1.4s;
  --dur-cue:   2.8s;  /* the breathing scroll-cue line */
  --dur-film:  26s;   /* the slow cinemagraph drift, near-imperceptible */

  /* Elevation */
  --shadow:            0 50px 90px -50px var(--cast);
  --shadow-mount:      0 60px 90px -46px rgba(20, 18, 12, 0.26),
                       0 24px 44px -30px rgba(20, 18, 12, 0.16);
  --shadow-mount-soft: 0 44px 76px -44px rgba(20, 18, 12, 0.2);

  /* film grain on the wall — a faint paper tooth, barely there on white */
  --grain-opacity: 0.022;

  /* far-plane ghost numerals (the catalogue index behind the work) */
  --ghost:        rgba(22, 20, 15, 0.045);
  --ghost-strong: rgba(22, 20, 15, 0.06);

  /* black inset shadows so base.css loupe references resolve (loupe unused in E) */
  --ink-shadow:      rgba(20, 18, 12, 0.5);
  --ink-shadow-soft: rgba(20, 18, 12, 0.3);

  /* editorial grade for any image that carries text + its directional scrim */
  --art-grade: saturate(1.02) contrast(1.02);
  --vignette:  rgba(20, 18, 12, 0.42);

  /* SEMANTIC: text/cues bedded over the hero + surface imagery. Kept separate
     from --ink (the page surface) so a dark skin can flip the page without
     flipping image-bedded type. In this white skin it equals pure white. */
  --on-film: #ffffff;
  /* SEMANTIC: modal / overlay dim. Always a dark wash, independent of skin. */
  --scrim:   rgba(22, 20, 15, 0.46);

  /* loupe — the Surface-band magnifier (collector leans into the craft) */
  --loupe-size: 220px;
  --loupe-zoom: 2.6;
  --loupe-ring: rgba(22, 20, 15, 0.4);

  /* vitrine focus-pull: a soft feather on all four edges of the floated piece so
     it melts into the white room. Small = subtle, per Chase's note. */
  --vitrine-feather: 5%;

  /* Z-index */
  --z-rail:  40;
  --z-nav:   100;
  --z-loupe: 120;
}