/* HERIO design tokens. The ONLY place where colours, type and spacing are set.
   Every HERIO page and the logo read these variables. Change a value here and the whole site follows.
   Website v5 (16 Oct 2026): the original HERIO colours. Logo gold and charcoal on white and soft cream;
   the Technology chapter turns dark charcoal with a gold glow.

   TO CHANGE THE BRAND COLOUR: change the one --accent line below. Buttons, glows, the compass in the logo,
   the big numbers and the accent words on dark and on white all follow from it.
   To go back to red or bordeaux: put that line in place of the gold line. */
:root{
  /* ---- colour: the brand colour is the next line ---- */
  --accent: #B29760;
  /* --accent: #FF2442; */  /* red, the v5 dark draft */
  /* --accent: #E6B545; */  /* bright gold, the v4 colour */
  /* --accent: #6E1E2E; */  /* bordeaux, the v3 colour */

  /* derived from --accent: leave these alone */
  --accent-light: var(--accent);       /* accent words, numbers and the compass on dark */
  --accent-amber: var(--accent);     /* deeper amber: the warm end of numbers and glows */
  --accent-text: oklch(from var(--accent) min(l, 0.47) c h);                    /* accent words and small text on white and paper (4.5:1 or better) */
  --accent-deep: oklch(from var(--accent) calc(l - 0.08) c h);        /* lower edge of the button gradient */
  --accent-glow: oklch(from var(--accent) 0.62 c h / 0.42);       /* the soft glow behind heroes and frames */
  --accent-glow-soft: oklch(from var(--accent) 0.55 c h / 0.18);
  --accent-line: color-mix(in srgb, var(--accent) 40%, transparent);  /* thin accent outlines on dark */
  --on-accent: oklch(from var(--accent) clamp(0.17, (0.64 - l) * 1000, 0.99) 0.01 h); /* text on accent buttons: dark on gold, white on bordeaux */

  /* ---- dark look: the main grounds ---- */
  --ink-0: #262626;           /* dark charcoal ground */
  --ink-1: #2B2B2B;
  --ink-2: #333333;
  --ink-3: #3D3D3D;
  --band: #474747;            /* dark warm grey bands */
  --text: #F6F3F1;            /* type on dark */
  --text-soft: #D2D2D7;       /* lead paragraphs on dark */
  --text-muted: #ABA9A4;      /* labels on dark (6:1 on charcoal) */
  --line-dark: rgba(255,240,235,.10);
  --line-dark-2: rgba(255,240,235,.18);
  --glass: rgba(255,250,248,.05);
  --glass-2: rgba(255,250,248,.09);
  --shade: rgba(0,0,0,.6);    /* deep drop shadows on dark */

  /* ---- light look: paper bands ---- */
  --ground: #FFFFFF;          /* page */
  --surface: #F5F5F4;         /* light neutral grey band (no cream, his ask 16 Oct) */
  --ink: #2B2B2B;             /* headlines and body on light (14:1) */
  --charcoal: #4D4D4D;        /* the logo charcoal */
  --muted: #5E5A54;           /* secondary text on light (6:1 on cream) */
  --line: #E6E0D5;            /* hairlines */
  --line-strong: #CFC7B8;
  --on-band: #FFFFFF;
  --on-band-muted: #D3CDC9;
  --footer: #2B2B2B;
  --frame: #141313;           /* phone and device frames */
  --frame-edge: #2C2C31;
  --frame-bar: #1F1C1C;       /* browser bar */
  --white: #FFFFFF;

  /* ---- light site (v5, 16 Oct 2026): white and cream grounds, charcoal ink, deep gold for small text ---- */
  --accent-ink: oklch(from var(--accent) min(l, 0.50) min(c, 0.2) h);       /* small text, links and accent words on white and cream (4.5:1 or better) */
  --accent-ink-deep: oklch(from var(--accent) min(l, 0.42) min(c, 0.17) h); /* hover on white */
  --accent-wash: color-mix(in srgb, var(--accent) 6%, var(--ground));      /* faint red tint behind ticks and the key card */
  --accent-line-soft: color-mix(in srgb, var(--accent-ink) 30%, transparent); /* thin red outlines on white */
  --warm: #F5F5F4;            /* light neutral grey band (no cream) */
  --warm-2: #ECECEA;          /* deeper neutral grey: hover and wells */
  --line-warm: #E2E2DF;       /* hairlines */
  --ink-soft: #45433F;        /* lead paragraphs on light (9:1) */

  --shadow: 0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent), 0 30px 60px -32px color-mix(in srgb, var(--ink) 40%, transparent);

  /* ---- type ---- */
  --font: "Schibsted Grotesk", system-ui, sans-serif;
  --fs-hero: 76px; --fs-h1: 64px; --fs-h2: 46px; --fs-h3: 25px; --fs-lead: 20px; --fs-body: 18px; --fs-small: 14px; --fs-label: 13px;
  --fs-display: 104px;        /* v3 hero */
  --fs-section: 76px;         /* v3 section headlines */
  --track-tight: -0.045em;

  /* ---- measure (4 px step) ---- */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px; --s11: 160px;
  --radius: 6px; --radius-s: 4px; --radius-card: 24px; --radius-big: 32px;
  --max: 1280px; --gutter: 56px;
}