@font-face { font-family: "Hanken Grotesk"; src: url("../assets/fonts/hanken-grotesk-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("../assets/fonts/hanken-grotesk-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("../assets/fonts/hanken-grotesk-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("../assets/fonts/courier-prime-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("../assets/fonts/courier-prime-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face {
  font-family: "Coolvetica";
  src: url("../assets/fonts/coolvetica-rg.woff2") format("woff2"), url("../assets/fonts/coolvetica-rg.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* ============================================================
   LIVE LIFE WRONG — design tokens
   Direction: quiet luxury. Ivory and near-black only. No accent
   color, no ornament. Authority comes from type, spacing, and
   tonal campaign imagery — the AMIRI register.
   ============================================================ */

:root {
  /* palette — monochrome, warm */
  --ivory: #f2f0ea;
  --ivory-2: #eae7df;
  --onyx: #131210;
  --onyx-2: #1d1b18;
  --mute: #8b8378;
  --mute-dark: #56514a;
  --greige: #cfc9c1;   /* the ready-to-wear tile ground */
  --black: #000;
  --red: #d5121e;      /* the brand's red: the prints, the monogram, one badge */

  --color-surface: var(--ivory);
  --color-surface-inverse: var(--onyx);
  --color-text: var(--onyx);
  --color-text-inverse: var(--ivory);
  --color-line: rgba(19, 18, 16, 0.14);
  --color-line-inverse: rgba(242, 240, 234, 0.16);

  /* type */
  --font-display: "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-grotesk: "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "Courier Prime", "Courier New", Courier, monospace;
  --font-title: "Coolvetica", "Helvetica Neue", Arial, sans-serif;

  --text-micro: 0.625rem;
  --text-small: 0.71875rem;
  --text-base: clamp(0.84375rem, 0.8rem + 0.2vw, 0.9375rem);
  --text-lead: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem);
  --text-h3: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  --text-h2: clamp(1.5rem, 1.15rem + 1.5vw, 2.4rem);
  --text-h1: clamp(2rem, 1.4rem + 2.6vw, 3.6rem);

  --track-wide: 0.34em;
  --track-mid: 0.16em;

  /* rhythm */
  --space-section: clamp(4rem, 3rem + 4vw, 7.5rem);
  --space-block: clamp(1.75rem, 1.5rem + 1.5vw, 3rem);
  --gutter: clamp(1.25rem, 1rem + 2vw, 3.5rem);
  --nav-h: clamp(3.75rem, 3.25rem + 1.5vw, 5rem);

  /* motion — slow and even */
  --duration-fast: 200ms;
  --duration-normal: 500ms;
  --duration-slow: 1100ms;
  --ease-luxe: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  /* The Hesitation — the house curve: rises, holds a breath, settles */
  --ease-hes: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* z */
  --z-nav: 100;
  --z-menu: 200;
  --z-cart: 300;
  --z-transition: 400;
  --z-preloader: 500;
}

/* where linear() easing is supported, the house curve gains its
   true shape: rise — hesitate — settle */
@supports (animation-timing-function: linear(0, 1)) {
  :root {
    --ease-hes: linear(0, 0.31 18%, 0.55 32%, 0.66 45%, 0.7 62%, 0.75 71%, 0.93 87%, 1);
  }
}