/* NINA tokens for the pre-launch site. Values from DESIGN.md; do not invent new ones here. */

@font-face {
  font-family: "DM Sans";
  src: url("/fonts/dm-sans-latin.woff2") format("woff2-variations");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}

/* Founder signature only (DESIGN.md §4). Herr Von Muellerhoff, SIL OFL, from
   Google Fonts, subset to the letters of "Eden Brosztein Levi". Re-download
   with a new &text= list if the name changes. */
@font-face {
  font-family: "NINA Signature";
  src: url("/fonts/signature.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand palette (brand book p.7) */
  --c-beige: #FAF4E7;
  --c-cream: #DDC6B5;
  --c-powder: #E7CBC3;
  --c-sage: #DBDDCA;
  --c-taupe: #B8A291;

  /* Ink. --c-ink-soft is allowed on beige only (DESIGN.md §3 rule 1). */
  --c-ink: #5C5148;
  --c-ink-deep: #4A4139;
  --c-ink-soft: #7B6D61;
  --c-line: var(--c-cream);

  --ff-latin: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ff-signature: "NINA Signature", "Snell Roundhand", cursive;
  --fw-light: 300;
  --fw-regular: 400;

  /* Type scale, ratio ~1.333 (perfect fourth) */
  --fs-xs: 0.8125rem;                                  /* 13 */
  --fs-sm: 0.9375rem;                                  /* 15 */
  --fs-base: 1.0625rem;                                /* 17 */
  --fs-lg: 1.375rem;                                   /* 22 */
  --fs-xl: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);      /* 24-30 */
  --fs-2xl: clamp(1.875rem, 1.4rem + 1.6vw, 2.5rem);   /* 30-40 */
  --fs-3xl: clamp(2.25rem, 1.4rem + 3.2vw, 4.25rem);   /* 36-68 */
  --fs-4xl: clamp(2.5rem, 1.2rem + 5vw, 5.5rem);       /* 40-88 */
  --lh-tight: 1.08;
  --lh-snug: 1.3;
  --lh-relaxed: 1.65;
  --ls-display: -0.025em;
  --ls-heading: -0.012em;
  --ls-latin: 0.08em;

  --sp-3xs: 0.25rem;
  --sp-2xs: 0.5rem;
  --sp-xs: 0.75rem;
  --sp-sm: 1rem;
  --sp-md: 1.5rem;
  --sp-lg: 2rem;
  --sp-xl: 3rem;
  --sp-2xl: 4.5rem;
  --container: 1352px;
  --gutter: clamp(20px, 4.5vw, 64px);
  --section-y: clamp(72px, 10vw, 160px);
  --section-y-tight: clamp(48px, 6vw, 96px);

  --dur-fast: 160ms;
  --dur-reveal: 1800ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);

  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-reveal: 1ms;
  }
}