/* =====================================================================
   TrueSkin — shared design tokens
   Loaded by the landing page and by the wholesale portal so the two
   cannot drift. Ground tones sampled from the product photography.
   ===================================================================== */
:root{
  --skin:        #E2BFA7;
  --skin-lit:    #F0D6C1;
  --skin-mid:    #D6B29C;
  --skin-deep:   #C39C84;
  --skin-edge:   #B08C74;

  --ink:         #14100E;
  --ink-soft:    #1F1815;
  --ink-line:    #2E2521;

  --bone:        #F5EFE7;
  --bone-dim:    #A2938A;

  /* thermal transfer violet. Darkened from #6B4FA6 so small labels clear 4.5:1
     against the skin ground (#6B4FA6 only reached 3.72:1). */
  --stencil:     #553C86;
  --stencil-lt:  #A98BE0;   /* violet — on dark */

  --on-skin:     #14100E;
  --on-skin-dim: #5A4839;

  --f-disp: "Big Shoulders Display", "Archivo Narrow", "Haettenschweiler", Impact, sans-serif;
  --f-body: "Archivo", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --f-mono: "Martian Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --gut: clamp(20px, 5vw, 76px);
  --rail: 0px;               /* left depth-rule width, set at >=1180px */
  --ease: cubic-bezier(.22,1,.36,1);
}

@media (min-width: 1180px){ :root{ --rail: 64px; } }