/* ZK Tools — jetons de design. Noir absolu, blanc pur, et des gris obtenus uniquement par opacité. */
@font-face {
  font-family: "Mona Sans";
  src: url("../assets/fonts/MonaSansVF.woff2") format("woff2-variations"), url("../assets/fonts/MonaSansVF.woff2") format("woff2");
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Mona Sans Mono";
  src: url("../assets/fonts/MonaSansMonoVF.woff2") format("woff2-variations"), url("../assets/fonts/MonaSansMonoVF.woff2") format("woff2");
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: #000;
  --fg: #fff;
  --fg-2: rgba(255, 255, 255, 0.68);
  --fg-3: rgba(255, 255, 255, 0.46);
  --fg-4: rgba(255, 255, 255, 0.28);
  --line: rgba(255, 255, 255, 0.13);
  --line-2: rgba(255, 255, 255, 0.24);
  --line-3: rgba(255, 255, 255, 0.55);
  --haze: rgba(255, 255, 255, 0.045);
  --haze-2: rgba(255, 255, 255, 0.085);
  --haze-3: rgba(255, 255, 255, 0.14);
  --inv-bg: #fff;
  --inv-fg: #000;
  --glow: rgba(255, 255, 255, 0.55);
  --shadow: 0 40px 120px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.12);
  --scrim: rgba(0, 0, 0, 0.62);

  --font: "Mona Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Mona Sans Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --r-pill: 999px;
  --r-input: 10px;
  --r-panel: 3px;
  --r-sheet: 18px;

  --top-h: 52px;
  --rail-w: 68px;
  --rail-open: 236px;
  --foot-h: 30px;

  --t-11: 11px;
  --t-12: 12px;
  --t-13: 13px;
  --t-14: 14px;
  --t-16: 16px;
  --t-18: 18px;
  --t-21: 21px;
  --t-24: 24px;
  --t-30: 30px;
  --t-36: 36px;
  --t-48: 48px;
  --t-60: 60px;
  --t-72: 72px;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #fff;
  --fg: #000;
  --fg-2: rgba(0, 0, 0, 0.68);
  --fg-3: rgba(0, 0, 0, 0.48);
  --fg-4: rgba(0, 0, 0, 0.3);
  --line: rgba(0, 0, 0, 0.14);
  --line-2: rgba(0, 0, 0, 0.26);
  --line-3: rgba(0, 0, 0, 0.6);
  --haze: rgba(0, 0, 0, 0.035);
  --haze-2: rgba(0, 0, 0, 0.07);
  --haze-3: rgba(0, 0, 0, 0.12);
  --inv-bg: #000;
  --inv-fg: #fff;
  --glow: rgba(0, 0, 0, 0.35);
  --shadow: 0 40px 120px rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.14);
  --scrim: rgba(255, 255, 255, 0.6);
}