/* ============================================================
   Business Ocean — design tokens («Open Water»)
   The ONLY place where raw colors, sizes and magic numbers live.
   ============================================================ */

:root {
  color-scheme: light;

  /* -- color ------------------------------------------------ */
  --paper: #ffffff;          /* page background */
  --mist: #f2f5f8;           /* alternate section background */
  --foam: #e3eef7;           /* chip fills, hovers */
  --ink: #0b1b2b;            /* text; CTA button background (navy on buttons only) */
  --ocean: #1b66c9;          /* primary accent */
  --wave: #7c6ff2;           /* violet from the logo — gradients & hairlines only */
  --tide: #59a8e8;           /* light blue for depth gradients */

  --ink-70: rgba(11, 27, 43, 0.72);
  --ink-50: rgba(11, 27, 43, 0.52);
  --ink-30: rgba(11, 27, 43, 0.30);
  --line: rgba(11, 27, 43, 0.10);
  --line-strong: rgba(11, 27, 43, 0.18);
  --paper-glass: rgba(255, 255, 255, 0.72);

  /* light tile tints (bento, covers, review cards) */
  --tint-blue: #e7f0fa;
  --tint-violet: #edeafc;
  --sand: #f6efe4;

  /* state colours: pass / needs work / fail — used by the Core Web Vitals
     widget, form errors and any other verdict UI */
  --state-good: #157f4f;
  --state-warn: #b26a00;
  --state-bad: #c9341b;
  --state-good-bg: #e7f6ec;
  --state-warn-bg: #fdf3e2;
  --state-bad-bg: #fdecea;

  --wave-deep: #5b4ee0;      /* the violet dark enough to carry white text */

  --grad-metric: linear-gradient(96deg, var(--ocean) 8%, var(--wave) 92%);
  /* the fill version of the brand gradient: --wave is too light behind small
     white type, so anything text sits ON uses this one */
  --grad-deep: linear-gradient(148deg, var(--ocean), var(--wave-deep));
  --grad-depth-1: #f7fafc;
  --grad-depth-2: #eaf3fa;
  --grad-depth-3: #ddecf8;
  --grad-depth-4: #d0e5f6;

  /* -- typography ------------------------------------------- */
  --font-display: "Archivo", "Archivo-fallback", system-ui, sans-serif;
  --font-body: "Schibsted Grotesk", "Schibsted-fallback", system-ui, sans-serif;
  --font-mono: "Spline Sans Mono", ui-monospace, "Cascadia Mono", monospace;

  /* fluid scale 375px -> 1280px */
  --size--1: clamp(0.8125rem, 0.787rem + 0.11vw, 0.875rem);   /* 13 -> 14 */
  --size-0: clamp(1rem, 0.948rem + 0.22vw, 1.125rem);          /* 16 -> 18 */
  --size-1: clamp(1.125rem, 1.021rem + 0.44vw, 1.375rem);      /* 18 -> 22 */
  --size-2: clamp(1.375rem, 1.168rem + 0.88vw, 1.875rem);      /* 22 -> 30 */
  --size-3: clamp(1.5rem, 0.982rem + 2.21vw, 2.75rem);        /* 28 -> 44 */
  --size-4: clamp(1.875rem, 1.098rem + 3.32vw, 3.75rem);        /* 36 -> 60 */
  --size-5: clamp(2.125rem, 0.83rem + 5.52vw, 5.25rem);        /* 44 -> 84 */
  --size-6: clamp(2.25rem, 0.282rem + 8.4vw, 7rem);          /* 46 -> 112 */

  --track-tight: -0.02em;    /* large display */
  --track-mono: 0.08em;      /* uppercase mono labels */
  --leading-display: 1.02;
  --leading-tight: 1.15;
  --leading-body: 1.55;

  /* -- space (4px scale) ------------------------------------ */
  --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;
  --space-10: 8rem;
  --space-section: clamp(5rem, 11vh, 9.5rem);   /* vertical rhythm between sections */
  --space-block: clamp(2.5rem, 6vh, 4.5rem);    /* inside-section blocks */
  --gutter: clamp(1.25rem, 4vw, 4rem);

  /* -- shape & elevation ------------------------------------ */
  --radius-1: 10px;
  --radius-2: 18px;
  --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgba(11, 27, 43, 0.06);
  --shadow-2: 0 14px 36px -14px rgba(11, 27, 43, 0.16);
  --shadow-3: 0 24px 64px -24px rgba(11, 27, 43, 0.22);

  /* -- motion ----------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-1: 160ms;
  --dur-2: 320ms;
  --dur-3: 640ms;

  /* -- layout ----------------------------------------------- */
  --container: 1200px;           /* the one content width: sections, header pill, menu sheet */
  --container-wide: 1440px;      /* only the about-page collage */
  --container-read: 56rem;       /* reading pages: blog post, legal, split FAQ */
  --measure-read: 42rem;         /* an article body column */
  /* full-bleed rails (lentes, decks) line their first card up with the
     container edge; one formula, used everywhere a rail pads itself */
  --bleed-inset: max(var(--gutter), (100vw - var(--container)) / 2);

  /* floating pill header: offset + pill + breathing room under it */
  --header-top: 14px;
  --header-pill: 72px;
  --header-h: calc(var(--header-top) + var(--header-pill) + 14px);
  --size-nav: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);   /* 15 -> 17; five links + logo + button fit a 1024px pill */
}

/* Phone: the section rhythm was calibrated on a 1440px canvas, where it reads
   as editorial air. At 360px the same clamps bottom out at 80px per section —
   seven sections of pure whitespace — and the page reads as unfinished rather
   than spacious. */
@media (max-width: 639px) {
  :root {
    --space-section: clamp(3.5rem, 9vh, 5rem);
    --space-block: clamp(1.75rem, 5vh, 2.5rem);
    --header-top: 10px;
    --header-pill: 60px;
  }
}