/* AXIA design system v3 · "Point Precision" identity (logo kit, 22 Oct 2026).
   Canonical tokens: website/build.py copies this file to website/assets/tokens.css.
   Rules (contrast-checked, WCAG AA):
   - Electric blue #064CFF: text, links, buttons on light backgrounds (6.0:1 on white).
   - Sensor cyan #00E2ED: accents and text on navy only (10.3:1). Never text on white (1.6:1).
   - Sky #009CFA and the sensor gradient: graphics, illustrations, data viz; never body text.
   - Navy #071F3C is the brand colour: dark sections, primary buttons, headings on light. */
:root {
  /* brand anchors (from the logo kit) */
  --navy: #071F3C;
  --ivory: #F7F8FA;
  --cyan: #00E2ED;
  --sky: #009CFA;
  --electric: #064CFF;
  --sensor: linear-gradient(135deg, #00E4ED 0%, #009CFA 48%, #064CFF 100%);

  /* navy scale (dark surfaces) */
  --navy-950: #04152B;
  --navy-900: #071F3C;
  --navy-800: #0D2C52;
  --navy-700: #163C6B;
  --navy-600: #24518A;

  /* blue scale (interactive, light tints for surfaces) */
  --blue-700: #0039C7;
  --blue-600: #064CFF;
  --blue-500: #2F6BFF;
  --blue-400: #5C8EFF;
  --blue-300: #93B5FF;
  --blue-200: #C2D6FF;
  --blue-100: #E1EBFF;
  --blue-50:  #F0F5FF;

  /* sky and cyan scales (sensor accents, light washes) */
  --sky-500: #009CFA;
  --sky-300: #7FD3FF;
  --sky-100: #D6F1FF;
  --sky-50:  #EEF9FF;
  --cyan-400: #00E2ED;
  --cyan-200: #8FF3F7;
  --cyan-50:  #E6FCFD;

  /* neutrals (slightly blue-tinted to sit with the navy) */
  --ink: #0B1626;
  --ink-2: #4A5B73;
  --muted: #5B6B82;          /* 4.7:1 on #EBEEF3, 5.4:1 on white */
  --line: #DDE3EC;
  --line-strong: #C3CDDA;
  --page: #FFFFFF;
  --surface: #F2F5F9;
  --cool: #EBEEF3;           /* studio-photo background: product cards blend into it */

  /* semantic roles (names used across the site) */
  --band: var(--navy-900);   /* dark sections */
  --band-2: var(--navy-800);
  --deep: var(--navy-950);   /* darkest product sections */
  --on-band: #B9C6D8;        /* secondary text on navy (9.5:1) */
  --accent: var(--blue-600); /* accent on light backgrounds */
  --accent-light: var(--cyan-400); /* accent on dark backgrounds */
  --accent-wash: var(--blue-50);
  --info: var(--blue-600);
  --ok: #2E7D4F;  --ok-bg: #E7F4EC;
  --bad: #B3261E; --bad-bg: #FBE9E7;
  --warn: #9A6400; --warn-bg: #FFF4D6;
  --info-bg: var(--blue-50);

  /* type: one grotesque family echoing the wordmark, mono for data */
  --sans: 'Inter Tight', 'Inter', 'Noto Sans Arabic', 'Noto Sans SC', system-ui, sans-serif;
  --display: var(--sans);    /* headlines: weight 700, tight tracking */
  --serif: var(--sans);      /* retired in v3; kept as an alias so old rules still render */
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --fs-display: clamp(44px, 6vw, 80px);
  --fs-h1: clamp(38px, 4.6vw, 64px);
  --fs-h2: clamp(32px, 3.8vw, 52px);
  --fs-h3: clamp(22px, 2.2vw, 30px);
  --fs-h4: 20px;
  --fs-lead: 19px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-label: 12px;
  --track-display: -0.025em;

  /* layout */
  --container: 1200px;
  --gutter: 24px;
  --section: 128px;
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --pill: 999px;
  --shadow: 0 1px 2px rgba(7,31,60,.06), 0 8px 24px rgba(7,31,60,.07);
  --shadow-lg: 0 24px 60px rgba(7,31,60,.18);
  --glow: 0 0 0 1px rgba(0,226,237,.35), 0 0 24px rgba(0,156,250,.35);

  /* motion */
  --ease: cubic-bezier(.2,.7,.2,1);
  --dur: 300ms;
}
@media (max-width: 900px) { :root { --section: 88px; --gutter: 20px; } }
@media (max-width: 560px) { :root { --section: 64px; --gutter: 16px; } }