/* ==========================================================================
   PULS FØRDE — design tokens
   Single source of truth for colour, type, space, shape and motion.
   Extracted from the real logo; see docs/DESIGN-TOKENS.md for the reasoning.
   Nothing in this file is a magic number without a note.
   ========================================================================== */

/* --- Self-hosted variable fonts -------------------------------------------
   Latin subset only — it already covers æ ø å Æ Ø Å, so Norwegian needs no
   custom subsetting. Both files carry every weight (and for Archivo every
   width) the site uses: 137 KB total for the whole typographic system.       */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../fonts/archivo-latin-var.woff2') format('woff2-variations'),
       url('../fonts/archivo-latin-var.woff2') format('woff2');
}

@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/worksans-latin-var.woff2') format('woff2-variations'),
       url('../fonts/worksans-latin-var.woff2') format('woff2');
}

:root {
  /* --- Brand: straight from the logo ------------------------------------ */
  --puls-gul:     #F1DD2E;  /* P blob  — 25.5 % of the logo */
  --puls-oransje: #F3B02E;  /* L blob */
  --puls-gron:    #7EC356;  /* U blob */
  --puls-bla:     #57AECC;  /* S blob, upper */
  --puls-lilla:   #9A5AA4;  /* S blob, lower */
  --puls-glod:    #F47F33;  /* the small dot */

  /* --- Ink --------------------------------------------------------------- */
  --ink-900: #0B0D0E;  /* dark section ground */
  --ink-800: #101415;  /* logo ink; body text on light */
  --ink-600: #2A3032;
  --ink-400: #5C6467;  /* muted on light — 5.56:1 */
  --ink-300: #7D8182;  /* logo script grey; borders on dark */
  --ink-100: #D6D3CE;  /* hairlines on light */

  /* --- Paper ------------------------------------------------------------- */
  --paper:   #F8F5F0;
  --paper-2: #EFEAE2;
  --paper-3: #FFFFFF;  /* raised cards only, never a whole section */

  /* --- Semantic ---------------------------------------------------------- */
  --cta:        var(--puls-gul);
  --cta-hover:  var(--puls-oransje);
  --cta-ink:    var(--ink-900);   /* 14.03:1 on --cta */
  --on-dark:    var(--paper);
  --on-light:   var(--ink-800);
  --positive:   #3F6F26;
  --focus:      var(--puls-bla);

  /* --- Intensity: group classes -----------------------------------------
     Surface = the chip fill. Ink = the same idea as text on paper.
     Both directions pass AA — every value below is a ratio computed by
     /style-guide/, not an estimate. The blå and grøn inks were originally
     #2E7D99 and #4E8F32; those measured 4.28 and 3.64 and were darkened.    */
  --int-bla-surface:     #57AECC;  --int-bla-ink:     #276982;
  --int-gron-surface:    #7EC356;  --int-gron-ink:    #3F6F26;
  --int-gul-surface:     #F3B02E;  --int-gul-ink:     #8A5A00;
  --int-raud-surface:    #E04E2A;  --int-raud-ink:    #B23317;  /* DERIVED — not in the logo */

  /* Purple is deliberately not an intensity. It belongs to Tenester, the
     health layer the chains do not have, so that section reads as a
     different kind of offer rather than another training category.

     Purple follows the same rule as yellow, for the same reason: --puls-lilla
     is the only brand colour that fails as text on BOTH grounds (4.42:1 on
     paper, 4.06:1 on ink), so it is a surface only. Purple TEXT always uses
     --teneste-ink, which is 7.62:1 on paper.                                */
  --teneste:      var(--puls-lilla);
  --teneste-ink:  #6E3A77;

  /* --- Type -------------------------------------------------------------- */
  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Work Sans', 'Helvetica Neue', Arial, sans-serif;

  --fs-hero:    clamp(4rem, 16vw, 13rem);
  --fs-display: clamp(2.5rem, 6vw, 5rem);
  --fs-h1:      clamp(2.25rem, 5vw, 4rem);
  --fs-h2:      clamp(1.75rem, 3.5vw, 2.75rem);
  --fs-h3:      clamp(1.25rem, 2vw, 1.75rem);
  --fs-body:    clamp(1.0625rem, 0.4vw + 1rem, 1.125rem);
  --fs-small:   0.9375rem;
  --fs-label:   0.8125rem;

  --lh-display: 0.92;
  --lh-body:    1.65;
  --measure:    65ch;

  /* Display type runs slightly expanded so it echoes the logo wordmark's
     proportions instead of fighting them. See DESIGN-TOKENS.md §3.2.        */
  --wdth-display: 118;

  /* --- Space: 4 px base -------------------------------------------------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 128px; --s-11: 192px;

  --section-y:     var(--s-9);
  --gutter:        var(--s-5);
  --container:     1280px;
  --container-narrow: 860px;

  /* --- Shape ------------------------------------------------------------- */
  --r-sm:   6px;
  --r-md:   14px;
  --r-lg:   28px;
  --r-pill: 999px;
  /* The logo's letters are soft organic blobs. That shape becomes the site's
     corner language rather than a generic 8px radius.                       */
  --r-blob: 60% 40% 55% 45% / 50% 60% 40% 50%;

  --shadow-sm: 0 1px 2px rgba(11, 13, 14, .06), 0 2px 8px rgba(11, 13, 14, .04);
  --shadow-md: 0 4px 12px rgba(11, 13, 14, .07), 0 12px 32px rgba(11, 13, 14, .06);
  --shadow-lg: 0 8px 24px rgba(11, 13, 14, .08), 0 32px 64px rgba(11, 13, 14, .10);

  /* --- Motion ------------------------------------------------------------ */
  --ease:     cubic-bezier(0.16, 1, 0.3, 1);  /* expo-out */
  --dur-fast: 200ms;
  --dur-base: 500ms;
  --dur-slow: 700ms;
}

/* --- Aliases the component layer reads ---------------------------------
   These are the names the approved mockup (build/artifact/mockup.css) uses.
   components.css is a 1:1 port of that stylesheet, so it reads the mockup's
   names — and they resolve here, to the same values as the long-form tokens
   above. One place defines a colour; nothing in components.css has a :root. */
:root {
  --gul:     var(--puls-gul);
  --oransje: var(--puls-oransje);
  --gron:    var(--puls-gron);
  --bla:     var(--puls-bla);
  --lilla:   var(--puls-lilla);
  --glod:    var(--puls-glod);
  --raud:    #E04E2A;                 /* DERIVED from --puls-glod, see B2 */

  --ink-700: #171B1C;
  --grey:    var(--ink-300);          /* #7D8182 — passes only on ink */
  --grey-lo: #A6AAAB;                 /* 7.90:1 on ink at 12.5px */

  --int-bla:  var(--int-bla-surface);
  --int-gron: var(--int-gron-surface);
  --int-gul:  var(--int-gul-surface);
  --int-raud: var(--int-raud-surface);

  --fd: var(--font-display);
  --fb: var(--font-body);
  --wd: var(--wdth-display);

  --pad:  clamp(20px, 5vw, 64px);     /* page gutter */
  --band: clamp(64px, 8vw, 120px);    /* band padding-block */
  --hair-d: rgba(248, 245, 240, .14); /* hairline on ink */
  --hair-l: rgba(11, 13, 14, .13);    /* hairline on paper */
  --blob: var(--r-blob);
}

@media (min-width: 1024px) {
  :root {
    --section-y: var(--s-10);
    --gutter:    var(--s-7);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
  }
}