/* ==========================================================================
   Hangtime — design tokens.

   Colour and font-family tokens are not declared here: they are emitted into
   the document head from theme settings by `snippets/hangtime-variables.liquid`,
   so a merchant can change them without touching code. Everything that is
   structural rather than editorial lives in this file.

   Every token is prefixed `--ht-` so nothing an app injects can collide.
   ========================================================================== */

:root {
  /* --- Page rhythm ----------------------------------------------------- */
  --ht-gutter: clamp(16px, 3.2vw, 48px);
  --ht-maxw: 1440px;

  /* Vertical rhythm between major sections. Generous on purpose: the
     reference leans on whitespace rather than rules to separate content. */
  --ht-section-y: clamp(80px, 11vw, 150px);
  --ht-section-y-tight: clamp(56px, 7vw, 96px);
  --ht-head-gap: clamp(32px, 4vw, 56px);

  /* --- Type scale ------------------------------------------------------ */
  /* Display sizes are fluid and deliberately oversized; the condensed face
     carries the page, so these are the loudest thing on screen. */
  --ht-fs-hero: clamp(56px, 8.5vw, 132px);
  --ht-fs-display: clamp(44px, 4.6vw, 72px);
  --ht-fs-h3: clamp(26px, 3vw, 40px);
  --ht-fs-lead: clamp(24px, 2.4vw, 34px);
  --ht-fs-body: 16px;
  --ht-fs-small: 13px;
  --ht-fs-mono: 11.5px;
  --ht-fs-mono-sm: 10.5px;

  --ht-lh-display: 0.82;
  --ht-lh-body: 1.55;
  --ht-ls-mono: 0.06em;
  --ht-ls-display: -0.005em;

  /* --- Borders and surfaces -------------------------------------------- */
  --ht-border: 1px solid var(--ht-line);
  --ht-radius: 0px; /* The design is deliberately square. */
  --ht-radius-pill: 999px;
  --ht-shadow-tag: 0 10px 14px rgb(20 22 30 / 18%);
  --ht-shadow-rail: 0 8px 14px -8px rgb(20 22 30 / 45%);
  --ht-shadow-drawer: -24px 0 60px -30px rgb(20 22 30 / 35%);

  /* --- Controls -------------------------------------------------------- */
  --ht-control-h: 52px;
  --ht-control-h-sm: 42px;
  --ht-option-h: 56px;
  --ht-header-h: 60px;
  --ht-announce-h: 32px;
  --ht-focus-width: 2px;
  --ht-focus-offset: 3px;
  --ht-tap-min: 44px;

  /* --- Motion ---------------------------------------------------------- */
  /* One easing curve is used for everything that travels, so separate
     animations read as one system. */
  --ht-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ht-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ht-dur-fast: 0.2s;
  --ht-dur: 0.3s;
  --ht-dur-slow: 0.45s;
  --ht-dur-panel: 0.55s;
  --ht-dur-reveal: 0.8s;

  /* --- Layers ---------------------------------------------------------- */
  --ht-z-wall: 0;
  --ht-z-rail: 1;
  --ht-z-garment: 2;
  --ht-z-canvas: 3;
  --ht-z-railbar: 4;
  --ht-z-bracket: 5;
  --ht-z-header: 40;
  --ht-z-view: 60;
  --ht-z-scrim: 70;
  --ht-z-drawer: 75;
  --ht-z-search: 80;
  --ht-z-skip: 90;

  /* --- Rail geometry ---------------------------------------------------- */
  /* `--ht-rail-count` is written inline by sections/hangtime-rail.liquid.
     `--ht-hang` is the on-screen height of a garment; every other rail
     measurement is derived from it so the whole rail scales as one object.
     0.305 keeps a ten-piece rail at exactly three garment-heights wide,
     which is the proportion the reference rail uses. */
  --ht-rail-count: 10;
  --ht-hang: min(52vh, 470px, calc((100vw - 220px) / (0.305 * var(--ht-rail-count))));
  --ht-railw: calc(var(--ht-hang) * 0.3 * var(--ht-rail-count));
  --ht-slot: calc(var(--ht-railw) / var(--ht-rail-count));
  --ht-rail-bar-h: 10px;
  --ht-rail-overhang: 56px;
  --ht-rack-pt: 48px;
  --ht-rack-pb: 40px;
}

/* Tablet and below, the rail stops reserving wide side margins and takes the
   screen. Without this a 768px window divides the remaining width by ten and
   leaves garments under 200px tall — technically correct, and far too small
   to look at or press. */
@media screen and (max-width: 1024px) {
  :root {
    --ht-hang: min(46vh, 380px);
    --ht-railw: calc(100vw - 48px);
    --ht-rail-overhang: 20px;
  }
}

/* Phones: smaller again, and tight to the edges.

   The height is what sets how wide a garment draws, and the screen is what
   sets how much room each one has. Nine pieces across a phone leaves roughly
   38px a piece; at 190px a garment hanging side on is 47px wide, so four
   fifths of it clears its neighbour, and the one that turns to face you is
   just under half the screen rather than filling it. */
@media screen and (max-width: 760px) {
  :root {
    --ht-hang: min(26vh, 190px);
    --ht-railw: calc(100vw - 48px);
    --ht-rail-overhang: 14px;
    --ht-rack-pt: 40px;
    --ht-rack-pb: 24px;
    --ht-header-h: 56px;
    --ht-control-h: 48px;
  }
}