/* Hatch Sanitary — design tokens.
   Imported verbatim from the Hatch Sanitary design system (fonts, colors,
   typography, spacing, effects). Edit the design system, not this file. */

/* ---------------------------------------------------------------- fonts --- */
@font-face{font-family:"Gilroy";font-weight:800;font-style:normal;font-display:swap;src:url("../assets/fonts/gilroy-extrabold.otf") format("opentype")}
@font-face{font-family:"Gilroy";font-weight:300;font-style:normal;font-display:swap;src:url("../assets/fonts/gilroy-light.otf") format("opentype")}

/* --------------------------------------------------------------- colors --- */
:root{
  /* Base — pure */
  --white:#ffffff;
  --black:#000000;

  /* Neutral scale — cool, faint chrome/blue undertone */
  --neutral-0:#ffffff;
  --neutral-25:#fafbfb;
  --neutral-50:#f4f6f6;
  --neutral-100:#eaeded;
  --neutral-200:#d8dddd;
  --neutral-300:#bcc3c4;
  --neutral-400:#949d9f;
  --neutral-500:#6f797b;
  --neutral-600:#525b5d;
  --neutral-700:#3a4143;
  --neutral-800:#22282a;
  --neutral-900:#14181a;
  --ink:#111516;              /* primary text / brand black */

  /* Accent — monochrome. The system is strictly grey & black. */
  --accent-50:#f4f6f6;
  --accent-100:#eaeded;
  --accent-300:#949d9f;
  --accent:#111516;
  --accent-600:#22282a;
  --accent-700:#000000;

  /* Semantic status */
  --success:#2f7d5b;
  --warning:#b7791f;
  --danger:#b23b3b;
  --info:var(--accent);

  /* Semantic aliases */
  --bg-page:var(--white);
  --bg-subtle:var(--neutral-50);
  --bg-muted:var(--neutral-100);
  --surface-card:var(--white);
  --surface-inverse:var(--ink);

  --text-primary:var(--ink);
  --text-secondary:var(--neutral-600);
  --text-muted:var(--neutral-500);
  --text-inverse:var(--white);
  --text-on-accent:var(--white);

  --border-subtle:var(--neutral-200);
  --border-strong:var(--neutral-300);
  --border-inverse:rgba(255,255,255,.16);

  --link:var(--accent);
  --link-hover:var(--accent-600);

  --focus-ring:var(--accent);
}

/* ----------------------------------------------------------- typography --- */
:root{
  --font-display:"Gilroy","Helvetica Neue",Arial,sans-serif;
  --font-text:"Gilroy","Helvetica Neue",Arial,sans-serif;
  /* The page markup refers to --font-body; keep it aliased to --font-text. */
  --font-body:var(--font-text);
  --font-mono:"SFMono-Regular",ui-monospace,"Menlo",monospace;

  --weight-text:300;      /* body */
  --weight-display:800;   /* headings, labels, buttons */

  /* Type scale */
  --fs-display:clamp(48px,7vw,88px);
  --fs-h1:clamp(38px,5vw,60px);
  --fs-h2:clamp(30px,3.4vw,42px);
  --fs-h3:28px;
  --fs-h4:22px;
  --fs-title:18px;
  --fs-body-lg:19px;
  --fs-body:16px;
  --fs-body-sm:14px;
  --fs-caption:13px;
  --fs-overline:12px;

  /* Line heights */
  --lh-tight:1.02;
  --lh-heading:1.12;
  --lh-snug:1.35;
  --lh-body:1.65;

  /* Letter spacing — ExtraBold display runs tight; overlines wide. */
  --ls-display:-0.02em;
  --ls-heading:-0.01em;
  --ls-body:0;
  --ls-overline:0.22em;
  --ls-label:0.06em;
}

/* -------------------------------------------------------------- spacing --- */
:root{
  --space-0:0;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --space-16:64px;
  --space-20:80px;
  --space-24:96px;
  --space-32:128px;

  --container-max:1280px;
  --container-wide:1440px;
  --gutter:clamp(20px,5vw,64px);
  --section-y:clamp(64px,9vw,128px);
  /* The recurring vertical rhythm used by nearly every section. */
  --section-pad:clamp(56px,8vw,104px);
}

/* -------------------------------------------------------------- effects --- */
:root{
  /* Radius — sharp by default */
  --radius-none:0;
  --radius-sm:2px;
  --radius-md:4px;
  --radius-lg:8px;
  --radius-xl:16px;
  --radius-pill:999px;
  --radius-circle:50%;

  /* Elevation — soft, cool-tinted, used sparingly */
  --shadow-none:none;
  --shadow-xs:0 1px 2px rgba(20,24,26,.05);
  --shadow-sm:0 2px 8px rgba(20,24,26,.06);
  --shadow-md:0 10px 24px -8px rgba(20,24,26,.12);
  --shadow-lg:0 24px 60px -16px rgba(20,24,26,.18);
  --shadow-focus:0 0 0 3px var(--accent-100);

  /* Motion */
  --ease-standard:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in:cubic-bezier(.4,0,1,1);
  --dur-fast:120ms;
  --dur-base:220ms;
  --dur-slow:420ms;
}