/* ==========================================================================
   Bilfoto 2026 – designtokens
   Verdier hentet direkte fra Adobe XD (artboards 1920 px).
   Typografien skalerer flytende og treffer designstørrelsen eksakt ved 1920 px.
   ========================================================================== */

:root {
  /* Farger */
  --bf-black:        #111111;
  --bf-black-soft:   #1a1a1a;
  --bf-white:        #ffffff;
  --bf-gold:         #c5b99e;
  --bf-gold-dim:     #a2977d;
  --bf-grey-dark:    #313435;
  --bf-grey-blue:    #8e9d9f;

  --bf-text:              var(--bf-white);
  --bf-text-muted:        rgba(255, 255, 255, .5);
  --bf-text-on-light:     var(--bf-black);
  --bf-surface:           var(--bf-black);
  --bf-surface-light:     var(--bf-white);
  --bf-pill-bg:           rgba(255, 255, 255, .5);
  --bf-hairline:          rgba(255, 255, 255, .18);
  --bf-hairline-on-light: rgba(17, 17, 17, .14);

  /* Overlays – holder tekst lesbar over foto (jf. møtereferat) */
  /* Nedre del må holde hvit tekst lesbar også over lyse studiobilder */
  /* Hero-scrim er parametrisert med tre alfaverdier (topp / midt / bunn).
     Settes per side, og blir et felt i ACF-blokken, fordi bildene varierer
     sterkt i lyshet. Verdiene brukes direkte – ingen multiplikator, som ville
     kunne gi alpha > 1 og dermed helt dekket bilde. */
  --scrim-top: .55;
  --scrim-mid: .16;
  --scrim-bottom: .82;
  --bf-overlay-header: linear-gradient(180deg, rgba(17,17,17,.75) 0%, rgba(17,17,17,0) 100%);
  /* Tittel og knapp ligger øverst i kortet, så scrimen må mørkne toppen */
  --bf-overlay-card: linear-gradient(180deg,
      rgba(17,17,17,.78) 0%, rgba(17,17,17,.42) 26%,
      rgba(17,17,17,.06) 52%, rgba(17,17,17,.34) 100%);
  --bf-overlay-media: linear-gradient(180deg, rgba(17,17,17,.15) 0%, rgba(17,17,17,.55) 100%);

  /* Typografi */
  --bf-font: 'Hanken Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --fs-stat:      clamp(3.25rem,  6.25vw, 7.5rem);      /* 120 */
  --fs-page-h1:   clamp(2.5rem,   5.21vw, 6.25rem);     /* 100 */
  --fs-section:   clamp(2rem,     3.13vw, 3.75rem);     /*  60 */
  --fs-statement: clamp(1.75rem,  3.02vw, 3.625rem);    /*  58 */
  --fs-display:   clamp(1.625rem, 2.60vw, 3.125rem);    /*  50 – CTA og sitat */
  --fs-h3:        clamp(1.5rem,   2.45vw, 2.9375rem);   /*  47 */
  --fs-menu:      clamp(1.75rem,  2.34vw, 2.8125rem);   /*  45 */
  --fs-hero-h1:   clamp(1.5rem,   1.98vw, 2.375rem);    /*  38 */
  --fs-card:      clamp(1.375rem, 1.82vw, 2.1875rem);   /*  35 */
  --fs-lead:      clamp(1.0625rem,1.56vw, 1.875rem);    /*  30 */
  --fs-label:     clamp(1rem,     1.41vw, 1.6875rem);   /*  27 */
  --fs-body:      clamp(1rem,     1.30vw, 1.5625rem);   /*  25 */
  --fs-name:      clamp(1rem,     1.25vw, 1.5rem);      /*  24 */
  --fs-source:    clamp(.9375rem, 1.15vw, 1.375rem);    /*  22 */
  --fs-ui:        clamp(.875rem,  1.04vw, 1.25rem);     /*  20 */
  --fs-micro:     clamp(.75rem,   .78vw,  .9375rem);    /*  15 */

  --lh-tight: 1.14;
  --lh-snug:  1.28;
  --lh-body:  1.4;
  --lh-loose: 1.55;

  /* Layout – XD: 1920 bred, 30 px ytre marg => 1860 container */
  --bf-gutter:    clamp(1.25rem, 1.5625vw, 1.875rem);
  --bf-container: 1860px;
  --bf-measure:   58ch;

  /* Vertikal rytme */
  --space-2xs: clamp(.5rem,  .52vw, .625rem);
  --space-xs:  clamp(.75rem, 1.04vw, 1.25rem);
  --space-sm:  clamp(1.25rem, 1.56vw, 1.875rem);
  --space-md:  clamp(2rem,   2.60vw, 3.125rem);
  --space-lg:  clamp(3rem,   4.17vw, 5rem);
  --space-xl:  clamp(4rem,   6.25vw, 7.5rem);
  --space-2xl: clamp(5rem,   8.33vw, 10rem);

  /* Form og bevegelse */
  --bf-radius: 0;                 /* flater og bilder er skarpkantede */
  --bf-pill-radius: 999px;        /* XD: pill 212x29 med r=15 => helt avrundet */
  --bf-pill-h: clamp(1.5rem, 1.51vw, 1.8125rem);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --ease-inout:cubic-bezier(.65, .05, .36, 1);
  --dur-fast:  .28s;
  --dur-med:   .6s;
  --dur-slow:  1.1s;
  --dur-hero:  1.6s;

  --z-header: 100;
  --z-menu:   200;
  --z-lightbox: 300;
}