/* Design tokens: the only file allowed to hold raw colour, size, spacing and timing values. */
:root {
  /* Brand (the three colours) */
  --brand-primary: #01ABFD;        /* fills and accents; never as text on white (2.6:1) */
  --brand-primary-hover: #009BE6;  /* ink text on it still 4.8:1 */
  --brand-ink: #0B2A45;            /* all text; 14.7:1 on white */
  --surface: #FFFFFF;

  /* Supporting shades, derived from the three */
  --link: #0073AD;                 /* text links on white, 5.2:1 */
  --text-muted: #4A6078;           /* secondary text on white, 6.5:1 */
  --text-on-ink: #FFFFFF;
  --text-muted-on-ink: #C9D8E6;
  --surface-tint: #E8F7FF;         /* diagram panel, photo placeholders */
  --surface-alt: #F2FAFF;          /* platforms strip, contact section */
  --line: #D5E3EE;
  --line-on-ink: #2E4D6B;
  --field-border: #B7CCDC;
  --error: #B42318;

  /* Component supporting colors */
  --btn-disabled-bg: #E3EAF0;
  --btn-disabled-text: #6B7F93;
  --diagram-box-border: #C6E8F9;

  /* Type: Schibsted Grotesk, scale ratio 1.25 on 16px */
  --font-sans: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-small: 0.8125rem;                                   /* 13 */
  --fs-caption: 0.875rem;                                  /* 14 */
  --fs-body: 1rem;                                         /* 16 */
  --fs-body-lg: 1.125rem;                                  /* 18 */
  --fs-lead: 1.25rem;                                      /* 20 */
  --fs-h3: clamp(1.25rem, 1rem + 0.8vw, 1.5625rem);        /* 20 -> 25 */
  --fs-h2: clamp(1.9375rem, 1.6rem + 1vw, 2.4375rem);      /* 31 -> 39 */
  --fs-h1: clamp(2.4375rem, 1.7rem + 2.6vw, 3.8125rem);    /* 39 -> 61 */
  --lh-tight: 1.06;
  --lh-heading: 1.15;
  --lh-body: 1.6;
  --tracking-tight: -0.025em;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Space: 8px base */
  --space-1: 0.5rem;                                       /* 8 */
  --space-2: 1rem;                                         /* 16 */
  --space-3: 1.5rem;                                       /* 24 */
  --space-4: 2.5rem;                                       /* 40 */
  --space-5: 4rem;                                         /* 64 */
  --space-section: clamp(4.5rem, 3rem + 5vw, 7rem);        /* 72 -> 112 */
  --container: 75rem;                                      /* 1200 */
  --gutter: clamp(1.5rem, 4vw, 2.5rem);                    /* 24 -> 40 */

  /* Shape */
  --radius-sm: 8px;    /* buttons, fields */
  --radius-md: 12px;   /* photos */
  --radius-lg: 16px;   /* form panel */
  --radius-xl: 20px;   /* hero diagram panel */

  /* Motion & Elevation */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-press: 160ms;
  --duration-hover: 150ms;
  --duration-flow: 2.8s;
  --press-scale: 0.97;
  --card-shadow: 0 12px 28px -6px rgba(11, 42, 69, 0.08);
  --card-hover-shadow: 0 16px 36px -8px rgba(1, 171, 253, 0.16);
  --hero-glow: 0 20px 48px -12px rgba(1, 171, 253, 0.22);
  --border: var(--line);

  /* Hit area */
  --tap-min: 48px;
}