/* ==========================================================================
   Safe Step, Inc. design tokens

   Art direction: the client's own brand, pushed hard.
   White ground. Two colours only, both sampled from the real logo: the navy
   and the pale blue. No third accent exists in this system on purpose.
   One typeface, a neo-grotesque, set dense and Swiss with tabular figures.
   The logo's six-diamond lattice is the only graphic device, and it is also
   the shape of the anti-slip tread Safe Step actually applies.

   ACSS-mappable: every token maps 1:1 onto an Automatic.css variable when
   this comp graduates to Bricks. Keep the names stable.
   ========================================================================== */

:root {
  /* --- The two brand colours, sampled from Safe-Step-Logo.png ---------- */
  --navy: #01415f; /* exact logo navy */
  --navy-deep: #012a3e;
  --navy-black: #01161f;
  --navy-mid: #21688a;
  --blue: #bce4f7; /* exact logo pale blue */
  --blue-tint: #e2f2fb;
  --blue-wash: #f2f9fd;

  /* --- Neutrals. Cool, never warm. ------------------------------------- */
  --white: #ffffff;
  --off: #f4f6f8;
  --ink: #0b1a22;
  --ink-soft: #33454f;
  --muted: #5f7079;
  --rule: #dde4e9;
  --rule-mid: #c3ced5;
  --rule-dark: #9aa8b1;

  /* --- Type. One family. ----------------------------------------------- */
  --font: "Schibsted Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: var(--font);
  --font-body: var(--font);

  --text-2xs: 0.6875rem;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-md: 1rem;
  --text-lg: clamp(1.0625rem, 0.3vw + 1rem, 1.1875rem);
  --text-xl: clamp(1.25rem, 0.8vw + 1.05rem, 1.5rem);
  --text-2xl: clamp(1.625rem, 1.8vw + 1.15rem, 2.375rem);
  --text-3xl: clamp(2rem, 2.8vw + 1.3rem, 3.25rem);
  --text-4xl: clamp(2.5rem, 5vw + 1rem, 5.25rem);
  --text-stat: clamp(2.375rem, 3.4vw + 1.4rem, 3.75rem);

  --track-label: 0.16em;
  --track-tight: -0.03em;

  /* --- Space ----------------------------------------------------------- */
  --gutter: 1.25rem; /* THE single page gutter. Nothing else defines one. */
  --container: 1300px;
  --section-y: clamp(3rem, 5vw, 5rem);
  --section-y-lg: clamp(3.75rem, 6.5vw, 6.5rem);

  --radius: 0px; /* square throughout */
  --header-h: 72px;
}

@media (min-width: 720px) {
  :root {
    --gutter: 2rem;
  }
}
@media (min-width: 1100px) {
  :root {
    --gutter: 3rem;
  }
}

/* --------------------------------------------------------------------------
   The diamond lattice. The logo mark is six diamonds; the trademarked
   anti-slip tub tread is the same diamond pattern. Brand mark and product
   are literally the same shape, so it carries meaning, not decoration.
   -------------------------------------------------------------------------- */
:root {
  --lattice-navy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cpath d='M11 2.5 19.5 11 11 19.5 2.5 11z' fill='none' stroke='%2301415f' stroke-opacity='.16' stroke-width='1.2'/%3E%3C/svg%3E");
  --lattice-blue: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cpath d='M11 2.5 19.5 11 11 19.5 2.5 11z' fill='none' stroke='%23bce4f7' stroke-opacity='.2' stroke-width='1.2'/%3E%3C/svg%3E");
}