/* Cru Cleaning Services: site tokens (v2, 2026-10-19).
   Design language measured from nateherk.com (see design-notes.md); colours and font chosen by Rawlings.
   The brand master in assets/brand/tokens.css (navy/teal, Archivo) is unchanged and still used by the logo,
   brand guide and email signature.

   Contrast (WCAG AA):
   --ink on --canvas 18.0:1 · --slate on white 6.0:1, on --canvas 5.5:1 · --accent on white 4.9:1, on --canvas 4.5:1
   white on --accent 4.9:1. Never put --accent-hi behind text. */

:root {
  /* Colour */
  --canvas: #F5F6F8;
  --ink: #0B0D10;
  --ink-2: #2A2F3A;
  --slate: #5A6472;
  --accent: #0B72CC;
  --accent-hi: #3BAAFF;
  --accent-dark: #0A66B8;     /* button hover */
  --error: #B42318;
  --cursor: #053256;          /* brand navy (logo), used for the custom cursor */
  --white: #FFFFFF;
  --hair: rgba(11, 13, 16, .1);
  --hair-soft: rgba(11, 13, 16, .08);
  --row-hover: rgba(11, 114, 204, .05);

  /* Surfaces */
  --plane: rgba(255, 255, 255, .8);
  --plane-soft: rgba(245, 246, 248, .58);
  --glass: rgba(255, 255, 255, .62);
  --shadow-plane: inset 0 1px 0 rgba(255, 255, 255, .9), 0 0 0 1px rgba(255, 255, 255, .65), 0 2px 4px rgba(49, 68, 94, .07), 0 12px 28px -8px rgba(49, 68, 94, .14);
  --shadow-pill: inset 0 1px 0 rgba(255, 255, 255, .9), 0 0 0 1px rgba(255, 255, 255, .7), 0 10px 30px -12px rgba(49, 68, 94, .35), 0 1px 3px rgba(11, 13, 16, .06);
  --shadow-photo: 0 4px 10px rgba(49, 68, 94, .08), 0 26px 56px -14px rgba(49, 68, 94, .2), 0 60px 110px -40px rgba(49, 68, 94, .18);
  --shadow-btn: inset 0 1px 0 rgba(255, 255, 255, .25), 0 8px 22px -8px rgba(11, 114, 204, .55), 0 1px 2px rgba(11, 13, 16, .12);

  /* Radius */
  --r-plane: 22px;
  --r-photo: 16px;
  --r-btn: 14px;
  --r-row: 10px;
  --r-pill: 999px;

  /* Type */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-body: 1.125rem;          /* 18px */
  --lh-body: 1.62;
  --track-body: -0.005em;
  --fs-h1: clamp(2.5rem, 1.2rem + 5.4vw, 5.5rem);    /* 40 to 88px */
  --fs-h2: clamp(2.25rem, 1.1rem + 4.4vw, 5rem);     /* 36 to 80px */
  --fs-h2-sm: clamp(2rem, 1.2rem + 3vw, 3.75rem);    /* 32 to 60px */
  --fs-close: clamp(2.5rem, 1.1rem + 5vw, 5.6rem);   /* 40 to 90px */
  --lh-display: .94;
  --track-display: -0.035em;
  --fs-lead: clamp(1.1875rem, 1rem + .6vw, 1.5rem);  /* 19 to 24px */
  --fs-num: clamp(2rem, 1.4rem + 1.8vw, 2.7rem);     /* 32 to 43px */
  --fs-row: .95rem;             /* 15.2px */
  --fs-small: .8rem;            /* 12.8px */
  --fs-label: .72rem;           /* 11.5px */

  /* Space */
  --gutter: clamp(1.25rem, .4rem + 3.6vw, 4.5rem);   /* 20 to 72px */
  --plane-pad-y: clamp(2.5rem, 1.2rem + 4vw, 4.95rem);
  --plane-pad-x: clamp(1.5rem, .4rem + 4.5vw, 4.5rem);
  --col-gap: clamp(1.5rem, .8rem + 3vw, 3.6rem);
  --max: 1296px;

  /* Motion */
  --ease: cubic-bezier(.23, 1, .32, 1);

  /* ScrollCraft engine theme (css/scrollcraft.css + js/scrollcraft.js, used for the dynamic stats) */
  --sc-canvas: var(--canvas);
  --sc-surface: var(--white);
  --sc-ink: var(--ink);
  --sc-ink-soft: var(--slate);
  --sc-accent: var(--accent);
  --sc-accent-ink: var(--white);
  --sc-font-display: var(--font);
  --sc-font-text: var(--font);
}