/* ==========================================================================
   Design tokens — Kipo Subsea
   Brand colour sampled from the Kipo logo: teal #51A8B1. Aqua highlight #35CBE2 from the site UI.
   NOTE: variable names (--red-*, --ink-*) are kept from the shared group design system so the
   shared components work unchanged; for Kipo "--red-*" = TEAL accent scale, "--ink-*" = NAVY scale.
   ========================================================================== */
:root {
  /* Brand accent (teal). 600 is darkened from the logo teal for AA contrast with white text. */
  --red-700: #155e66;
  --red-600: #1f7a84; /* Kipo Teal (accessible) — logo teal is #51A8B1 */
  --red-500: #35cbe2; /* Aqua highlight — used on dark backgrounds */
  --red-100: #d3f1f4;
  --red-50: #ecf8fa;
  --kipo-teal-logo: #51a8b1;
  --kipo-orange: #f7803b;

  /* Ink / neutrals (cool navy "seabed" scale) */
  --ink-950: #061520;
  --ink-900: #0b2233;
  --ink-800: #12304a;
  --ink-700: #234559;
  --ink-600: #3c5a6c;
  --ink-500: #5d7685;
  --ink-400: #8499a6;
  --ink-300: #b1c1ca;
  --ink-200: #d7e1e6;
  --ink-100: #e9eff2;
  --ink-50: #f4f8f9;
  --white: #ffffff;

  /* Semantic */
  --color-bg: var(--white);
  --color-bg-alt: var(--ink-50);
  --color-bg-dark: var(--ink-900);
  --color-text: var(--ink-800);
  --color-text-muted: var(--ink-500);
  --color-text-inverse: var(--white);
  --color-text-inverse-muted: #a9bfcc;
  --color-border: var(--ink-200);
  --color-border-dark: rgba(255, 255, 255, 0.12);
  --color-accent: var(--red-600);
  --color-accent-hover: var(--red-700);
  --color-focus: #2f7de1;
  --color-success: #1f8a4c;

  /* Typography */
  --font-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-xs: 0.8125rem;   /* 13 */
  --fs-sm: 0.9375rem;   /* 15 */
  --fs-base: 1.0625rem; /* 17 */
  --fs-lg: 1.25rem;     /* 20 */
  --fs-xl: clamp(1.375rem, 1.1rem + 0.9vw, 1.75rem);
  --fs-2xl: clamp(1.75rem, 1.3rem + 1.6vw, 2.25rem);
  --fs-3xl: clamp(2.125rem, 1.5rem + 2.4vw, 3rem);
  --fs-4xl: clamp(2.5rem, 1.6rem + 3.8vw, 4.25rem);

  --lh-tight: 1.05;
  --lh-snug: 1.25;
  --lh-body: 1.65;

  /* Spacing (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --section-y: clamp(4rem, 2.5rem + 5vw, 7rem);

  /* Layout */
  --container: 1240px;
  --container-narrow: 820px;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --header-h: 76px;
  --topbar-h: 38px;

  /* Shape & depth — tight radii for an industrial feel */
  --radius-sm: 3px;
  --radius: 6px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(6, 21, 32, 0.04), 0 2px 4px rgba(6, 21, 32, 0.04);
  --shadow: 0 8px 30px rgba(6, 21, 32, 0.08);
  --shadow-lg: 0 24px 60px rgba(6, 21, 32, 0.12);

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 220ms;

  /* Signature: the wave cut through the Kipo wordmark */
  --slant: -8deg;
}