/* ==========================================================================
   webstoree — showcase build · design tokens

   The palette is the canonical brand triad (ink / marigold / paper) taken
   from the production site, extended with a dark "housing" ramp so the whole
   piece can sit on near-black without going flat.

   ONE easing curve is used across the entire site. Everything that moves
   moves on the same curve — that is what makes unrelated transitions read
   as a single continuous surface rather than a pile of effects.
   ========================================================================== */

:root {
  /* --- canonical brand triad --- */
  --ink:      #171310;
  --marigold: #e8a33d;
  --paper:    #faf7f2;

  /* --- the dark housing --- */
  --ground:  #0c0a09;
  --house-1: #14100e;
  --house-2: #1e1916;
  --house-3: #2e2722;
  --house-4: #453b33;

  /* --- signal: the one light source --- */
  --signal:     #e8a33d;
  --signal-hot: #ff8a1f;
  --signal-dim: #8a6428;

  /* --- text on dark --- */
  --fg:      #faf7f2;
  --fg-2:    rgba(250, 247, 242, 0.62);
  --fg-3:    rgba(250, 247, 242, 0.38);
  --fg-4:    rgba(250, 247, 242, 0.18);

  /* --- hairlines --- */
  --line:        rgba(250, 247, 242, 0.10);
  --line-strong: rgba(250, 247, 242, 0.20);

  /* --- type --- */
  --f-display: "Instrument Serif", ui-serif, Georgia, serif;
  --f-sans:    "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --f-mono:    "Geist Mono", ui-monospace, "SFMono-Regular", monospace;
  --f-deva:    "Noto Sans Devanagari", "Geist", sans-serif;

  /* --- fluid type scale (clamped, viewport-driven) --- */
  /* --t-hero is sized so the four-line headline, its supporting line, the
     scroll cue and the stat row all clear a 900px-tall viewport. Bigger type
     looked better in isolation and pushed half the hero below the fold. */
  --t-hero:  clamp(2.7rem, 8.6vw, 9.5rem);
  --t-h2:    clamp(2.4rem, 6.4vw, 6.5rem);
  --t-h3:    clamp(1.4rem, 2.3vw, 2.3rem);
  --t-lead:  clamp(1.05rem, 1.5vw, 1.5rem);
  --t-body:  clamp(0.95rem, 1.05vw, 1.075rem);
  --t-meta:  clamp(0.66rem, 0.78vw, 0.78rem);

  /* --- rhythm --- */
  --gut:     clamp(1.25rem, 5vw, 5.5rem);
  --stack:   clamp(5rem, 14vh, 11rem);
  --radius:  2px;

  /* --- motion: ONE curve --- */
  --ease:      cubic-bezier(0.16, 1, 0.30, 1);
  --ease-move: cubic-bezier(0.76, 0, 0.24, 1);
  --d-fast:    0.28s;
  --d-base:    0.55s;
  --d-slow:    1.05s;

  /* --- depth --- */
  --persp: 1400px;

  /* Fractal-noise grain, inlined — ~350 bytes instead of a request. */
  --grain-src: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}