/* ==========================================================================
   Design tokens. Every colour, font, size and timing used by the other
   stylesheets is defined here. To restyle the site, change this file.
   ========================================================================== */

:root {
  /* Brand blue, read from the logo artwork (brand/tis/tis.ai). */
  --color-brand: #076e92;
  --color-brand-strong: #05556f;

  /* Dark surfaces: hero, product showcase, call to action, footer. */
  --color-night: #041a22;
  --color-night-raised: #082a36;
  --color-on-night: #eef6f8;
  --color-on-night-muted: #9db8c3;
  --color-on-night-line: rgba(238, 246, 248, 0.14);

  /* Highlights. Aqua is the logo blue lifted for use on dark surfaces.
     Resin is the pale green of cured GRP; it marks the primary action. */
  --color-aqua: #5fd4f4;
  --color-resin: #d6e35a;
  --color-on-resin: #10210a;

  /* Light surfaces and text. */
  --color-paper: #ffffff;
  --color-tint: #f0f5f6;
  --color-ink: #071c25;
  --color-text: #36525e;
  --color-muted: #63808c;
  --color-line: #d9e3e7;

  /* Typography */
  --font-display: "Sora", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;

  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: clamp(1.35rem, 1.1rem + 0.9vw, 1.75rem);
  --text-h2: clamp(2rem, 1.1rem + 3.2vw, 3.5rem);
  --text-h1: clamp(2.5rem, 1rem + 6vw, 6rem);
  --text-statement: clamp(1.7rem, 0.9rem + 3.2vw, 3.4rem);

  /* Layout */
  --page-max: 1320px;
  --page-gutter: clamp(20px, 4.5vw, 64px);
  --section-space: clamp(72px, 10vw, 160px);
  --header-height: 80px;

  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --shadow-card: 0 24px 60px -30px rgba(7, 28, 37, 0.35);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration: 0.5s;
}