/* Fluid Marketing, design tokens. One light theme: warm paper, deep blue-black ink, Fluid blue, sun yellow.
   Neutrals are tinted toward the brand blue. Change values here only. */

:root {
  color-scheme: light;

  /* Colour */
  --paper: oklch(96.8% 0.014 88);
  --paper-2: oklch(92.6% 0.024 88);
  --ink: oklch(21% 0.045 266);
  --ink-2: oklch(41% 0.04 266);
  --blue: oklch(52.4% 0.238 263.7); /* = logo blue #1a56f0 */
  --on-blue: oklch(98.6% 0.01 88);
  --on-ink: oklch(96.8% 0.014 88);
  --sun: oklch(87.9% 0.162 90.9); /* = logo sun #ffd23f */
  --line: color-mix(in oklch, var(--ink) 18%, transparent);

  /* Type */
  --font-display: "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Schibsted Grotesk", system-ui, sans-serif;
  --fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --fs-lead: clamp(1.2rem, 1.02rem + 0.8vw, 1.6rem);
  --fs-label: 0.8125rem;
  --fs-h2: clamp(2.3rem, 1.1rem + 4.6vw, 5rem);
  --fs-h1: clamp(2.5rem, 0.8rem + 7vw, 6.75rem);
  --fs-big: clamp(5rem, 1rem + 18vw, 17rem);

  /* Space */
  --gutter: clamp(1.25rem, 4.2vw, 3.25rem);
  --section: clamp(3.5rem, 6.5vw, 6rem);   /* space above AND below every section: the same everywhere */
  --head-gap: clamp(1.75rem, 3.6vw, 3rem); /* space between a section heading and its content */
  --maxw: 84rem;

  /* Shape + motion */
  --radius: 10px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

@supports not (color: oklch(0% 0 0)) {
  :root {
    --paper: #f7f4ec;
    --paper-2: #ece6d8;
    --ink: #0f1630;
    --ink-2: #4a5068;
    --blue: #1a56f0;
    --on-blue: #fbfaf6;
    --on-ink: #f7f4ec;
    --sun: #ffd23f;
    --line: #0f163029;
  }
}