/* Mirello Carvani — design tokens */

:root {
  /* Surfaces */
  --color-void: #0a0908;
  --color-room: #14110e;

  /* Ink */
  --color-ivory: #ece7dd;
  --color-ivory-soft: rgb(236 231 221 / 0.74);
  --color-ivory-muted: rgb(236 231 221 / 0.52);
  --color-hairline: rgb(236 231 221 / 0.22);
  --color-hairline-soft: rgb(236 231 221 / 0.12);

  /* Type */
  --font-script: "Pinyon Script", "Snell Roundhand", "Apple Chancery", cursive;
  --font-ui: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --text-micro: 0.6875rem;
  --text-small: 0.75rem;
  --text-body: 0.8125rem;
  --text-wordmark: clamp(2.5rem, 1.8rem + 2.6vw, 3.5rem);

  --tracking-caps: 0.3em;
  --tracking-caps-tight: 0.18em;

  /* Space */
  --space-2xs: 0.4rem;
  --space-xs: 0.75rem;
  --space-sm: 1.15rem;
  --space-md: 1.75rem;
  --space-lg: 2.75rem;
  --space-gutter: clamp(1.75rem, 0.8rem + 4vw, 5.5rem);

  /* Motion */
  --duration-fast: 200ms;
  --duration-normal: 480ms;
  --duration-slow: 1100ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Narrow windows stack the footer and drop the second column, so the
   gate needs a little less air to still stand without scrolling. */
@media (max-width: 48rem) {
  :root {
    --space-lg: 2rem;
    --space-md: 1.4rem;
    --space-sm: 0.95rem;
  }
}

/* Short laptop and tablet windows get the same treatment as phones. */
@media (min-width: 48.01rem) and (max-height: 51rem) {
  :root {
    --space-lg: 2.3rem;
    --space-md: 1.5rem;
    --space-sm: 0.95rem;
  }
}