/* =========================================================
   Science Simulations: design tokens (see DESIGN.md)
   Link order on every page: tokens.css, then system.css.
   ========================================================= */

@font-face {
  font-family: "Cabinet Grotesk";
  src: url("../fonts/CabinetGrotesk-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cabinet Grotesk";
  src: url("../fonts/CabinetGrotesk-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("../fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Base: light paper, ink text. Contrast measured in DESIGN.md. */
  --paper: #eef1f4;
  --ink: #121722;
  --ink-2: #3a4253;
  --ink-3: #4f586a;
  --hairline: rgb(18 23 34 / 0.1);
  --hairline-2: rgb(18 23 34 / 0.2);
  --accent: #ffb437; /* marigold: a FILL only, always with --accent-ink on top */
  --accent-ink: #121722;
  --accent-soft: rgb(255 180 55 / 0.32);
  --accent-edge: rgb(214 140 10 / 0.7);
  --focus: #121722; /* ring is ink; the marigold halo is added in system.css */
  --specimen: #0d1420; /* the dark core every diagram and canvas sits in */
  --specimen-lift: #1c2a40; /* centre of its radial lift */
  --specimen-line: #dfe6f0; /* glass outlines and primary labels inside it */
  --specimen-muted: #9fb0c6; /* secondary labels inside it */

  /* Text aliases used by system.css and the simulations */
  --text: var(--ink);
  --text-2: var(--ink-2);
  --text-3: var(--ink-3);

  /* Glass (light). See DESIGN.md */
  --glass-fill: rgb(255 255 255 / 0.55);
  --glass-solid: #f7f9fb;
  --glass-edge: rgb(255 255 255 / 0.7);

  /* Type families */
  --font-display: "Cabinet Grotesk", "Geist", system-ui, sans-serif;
  --font-ui: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Type scale (fluid) */
  --fs-giant: clamp(6rem, 22vw, 20rem);
  --fs-d1: clamp(2.6rem, 5.4vw, 4.6rem);
  --fs-d2: clamp(2rem, 3.6vw, 3.1rem);
  --fs-d3: clamp(1.4rem, 2vw, 1.75rem);
  --fs-body-lg: 1.125rem;
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.78rem; /* labels on marketing pages only */
  --fs-ui-min: 0.82rem; /* floor for any text inside a simulation page */
  --measure: 62ch;

  /* Shape: pills for interactive, 28/22/14 for surfaces */
  --r-pill: 999px;
  --r-shell: 28px;
  --r-core: 22px; /* shell radius minus bezel padding */
  --r-sm: 14px;
  --bezel: 6px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --t-fast: 160ms;
  --t-med: 320ms;
  --t-slow: 800ms;

  /* Z-index scale: the only layers allowed on the site */
  --z-base: 0; /* page content */
  --z-raised: 10; /* floating chips, sticky sim panels, sim tab bar */
  --z-nav: 100; /* island nav */
  --z-sheet: 200; /* mobile nav sheet (below the nav bar's own toggle) */
  --z-modal: 300; /* modal and its backdrop */
  --z-toast: 400; /* toasts */
  --z-grain: 500; /* grain overlay, pointer-events none */

  /* Layout */
  --wrap-max: 1320px;
  --gutter: 16px;
  --nav-h: 64px;

  /* Default world is the lab */
  --world-0: #e6ebf1;
  --world-1: #cfd8e4;
  --world-2: #ffffff;
  --world-word: rgb(255 255 255 / 0.55);
}

@media (min-width: 768px) {
  :root { --gutter: 32px; }
}
@media (min-width: 1280px) {
  :root { --gutter: 48px; }
}

/* A world sets four variables: field (0), shade (1), glow (2), giant word. */
[data-world="lab"] {
  --world-0: #e6ebf1;
  --world-1: #cfd8e4;
  --world-2: #ffffff;
  --world-word: rgb(255 255 255 / 0.8); /* the lab field is already pale, so its word needs more white to read */
}
[data-world="heart"] {
  --world-0: #f2d6d3;
  --world-1: #e3aaa6;
  --world-2: #fbeeed;
  --world-word: rgb(255 255 255 / 0.55);
}
[data-world="acids"] {
  --world-0: #cfe7e2;
  --world-1: #97cdc3;
  --world-2: #ecf7f5;
  --world-word: rgb(255 255 255 / 0.55);
}
[data-world="halogen"] {
  --world-0: #e9e4bf;
  --world-1: #cfc68a;
  --world-2: #f7f4e2;
  --world-word: rgb(255 255 255 / 0.55);
}
[data-world="planned"] {
  --world-0: #e3e5e9;
  --world-1: #c9cdd5;
  --world-2: #f4f5f7;
  --world-word: rgb(255 255 255 / 0.55);
}