/* ==========================================================================
   TOKENS: the design system in one place.
   Change a value here and it changes across the whole site.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- Colour: off-white and black only ---- */
  --paper: #EEEBE4;        /* page background: warm, not pure white */
  --ink: #000000;          /* type */
  --ink-soft: #57544E;     /* secondary text on light glass (passes WCAG AA) */
  --paper-soft: #BDB9B0;   /* secondary text on dark glass (passes WCAG AA) */

  /* ---- Glass: light panels ---- */
  --glass-fill: linear-gradient(180deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.40));
  --glass-edge: rgba(255, 255, 255, 0.85);       /* bright rim, like light on a glass edge */
  --glass-line: rgba(25, 20, 12, 0.07);          /* faint dark outline so it reads on off-white */
  --glass-blur: blur(22px) saturate(1.25);

  /* ---- Glass: dark ("smoked") panel ---- */
  --smoke-fill: linear-gradient(180deg, rgba(24, 23, 21, 0.90), rgba(8, 8, 7, 0.84));
  --smoke-edge: rgba(255, 255, 255, 0.16);

  /* ---- Depth: three stacked shadows = something floating, not stuck on ---- */
  --float-shadow:
    0 1px 2px rgba(40, 32, 20, 0.06),
    0 14px 34px -14px rgba(40, 32, 20, 0.20),
    0 60px 110px -40px rgba(40, 32, 20, 0.30);
  --soft-shadow:
    0 1px 2px rgba(40, 32, 20, 0.06),
    0 10px 26px -12px rgba(40, 32, 20, 0.22);

  /* ---- Shape ---- */
  --radius-panel: clamp(20px, 2.2vw, 32px);
  --radius-tile: 18px;
  --radius-pill: 999px;

  /* ---- Type ---- */
  --font: "Schibsted Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --fs-hero: clamp(2.5rem, 6.3vw, 7.75rem);
  --fs-cta: clamp(2.5rem, 7vw, 8rem);
  --fs-statement: clamp(1.6rem, 2.9vw, 3.1rem);
  --fs-case: clamp(2.2rem, 4.4vw, 4.6rem);
  --fs-card: clamp(1.15rem, 1.5vw, 1.45rem);
  --fs-lead: clamp(1.1rem, 1.35vw, 1.35rem);
  --fs-body: clamp(1rem, 1vw, 1.125rem);
  --fs-small: 0.875rem;

  --lh-tight: 0.92;
  --lh-snug: 1.1;
  --lh-body: 1.55;
  --track-display: -0.035em;

  /* ---- Space ---- */
  --gutter: clamp(16px, 3vw, 40px);
  --header-h: 64px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 0.8, 0.2, 1);        /* everyday UI */
  --ease-glide: cubic-bezier(0.65, 0, 0.15, 1);   /* panels: slow start, long soft landing */
  --dur-fast: 180ms;
  --dur: 420ms;
  --dur-slow: 900ms;
  --dur-glide: 950ms;

  /* How much page scroll moves the showcase on by one panel */
  --scroll-per-panel: 70vh;
}