/* Uhrenatelier Vallembert: design tokens (single source for colour, type, space, radius, motion).
   Colour world: warm anthracite as the bench, brass only as material and hairline, rhodium porcelain for
   text, one signal colour (heat-blued steel, "Bläuung") reserved for the primary action. No cream surfaces.
   Contrast (WCAG, computed on --c-ground #15130F): ink 15.8:1, ink-2 7.9:1, ink-3 5.2:1, brass 6.5:1,
   button text on signal 5.5:1 (hover 4.6:1), signal against ground 3.05:1 (non-text boundary). */

@font-face {
  font-family: "Newsreader";
  src: url("../assets/fonts/newsreader-var-latinext.v1.woff2") format("woff2");
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Host Grotesk";
  src: url("../assets/fonts/host-grotesk-var-latinext.v1.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
/* metric-matched fallbacks keep the first paint from shifting when the web fonts arrive */
@font-face {
  font-family: "Newsreader Fallback";
  src: local("Georgia"), local("Times New Roman");
  size-adjust: 96%;
  ascent-override: 92%;
  descent-override: 26%;
}
@font-face {
  font-family: "Host Grotesk Fallback";
  src: local("Helvetica Neue"), local("Arial");
  size-adjust: 101%;
  ascent-override: 94%;
  descent-override: 24%;
}

:root {
  color-scheme: dark;

  /* colour */
  --c-ground: #15130f;          /* anthracite, the bench; also html background and theme-color */
  --c-ground-raise: #1c1a16;    /* panels that sit on the bench */
  --c-ground-deep: #100e0b;     /* stage falloff */
  --c-ink: #ededea;             /* rhodium porcelain, primary text */
  --c-ink-2: #aba9a3;           /* secondary text */
  --c-ink-3: #8a8882;           /* tertiary text, captions */
  --c-line: rgba(237, 237, 234, 0.12);
  --c-line-strong: rgba(237, 237, 234, 0.24);
  --c-brass: #b8925a;           /* material accent: hairlines, active marks, selection */
  --c-brass-soft: rgba(184, 146, 90, 0.42);
  --c-signal: #3556d6;          /* heat-blued steel: primary action only */
  --c-signal-hover: #4363e2;
  --c-signal-ink: #f3f4f7;

  /* type families */
  --f-display: "Newsreader", "Newsreader Fallback", Georgia, serif;
  --f-text: "Host Grotesk", "Host Grotesk Fallback", "Helvetica Neue", Arial, sans-serif;

  /* type scale: fluid, rem-anchored so browser zoom keeps working */
  --fs-display: clamp(2.375rem, min(1.2rem + 3.3vw, 10.5svh), 4.5rem);  /* hero H1, also bounded by the window height */
  --fs-h2: clamp(1.875rem, 1.2rem + 1.9vw, 3rem);
  --fs-h3: clamp(1.375rem, 1.1rem + 0.7vw, 1.875rem);
  --fs-say: clamp(1.625rem, 1.1rem + 1.55vw, 2.5rem);   /* the four process sentences */
  --fs-lead: clamp(1.1875rem, 1.05rem + 0.45vw, 1.4375rem);
  --fs-body: clamp(1.0625rem, 1rem + 0.18vw, 1.1875rem);
  --fs-small: 0.9375rem;
  --fs-micro: 0.8125rem;

  --lh-display: 1.03;
  --lh-h2: 1.07;
  --lh-h3: 1.18;
  --lh-lead: 1.45;
  --lh-body: 1.62;
  --lh-ui: 1.2;

  --tr-display: -0.025em;
  --tr-h2: -0.02em;
  --tr-h3: -0.01em;
  --tr-micro: 0.02em;

  --w-display: 380;   /* Newsreader, large sizes read best light-regular with optical sizing */
  --w-h3: 430;
  --w-text: 400;
  --w-ui: 500;
  --w-strong: 560;

  /* space: 4 px base */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;
  --sec: clamp(6rem, 4rem + 8vw, 11rem);       /* section rhythm */
  --gut: clamp(1rem, 0.4rem + 3.2vw, 3.25rem);  /* side gutter, 16 px minimum on phones */
  --wrap: 84rem;
  --edge: max(var(--gut), calc(50% - var(--wrap) / 2 + var(--gut)));   /* text edge of every full-width block */
  --measure: 34rem;                             /* text column, about 65 characters at body size */
  --nav-h: 4.5rem;

  /* radius: three values only */
  --r-s: 6px;      /* inputs, small chips */
  --r-m: 14px;     /* panels, plates */
  --r-pill: 999px; /* buttons */

  /* motion: one house curve for every entrance and state change */
  --ease-house: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-move: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-press: 140ms;
  --dur-ui: 200ms;
  --dur-state: 600ms;      /* bistable text and hairline toggles in the stage */
  --dur-state-out: 380ms;  /* exit faster than entry */
  --dur-reveal: 1100ms;
  --stagger: 70ms;

  /* layers */
  --z-stage: 0;
  --z-copy: 2;
  --z-menu: 35;   /* the sheet sits under the navigation, so the close control stays visible */
  --z-nav: 40;
  --z-skip: 60;
}