/* ============================================================
   Euphoria Bygg: tokens.css
   Every colour, font, size and timing lives here. A full recolour
   must only touch this file.

   The palette is taken from Jarek's own jobs: black-stained timber
   (svartbeis), white painted cladding (kalk), fresh pine decking
   (furu). Mjøsa, the lake below Brøttum, and the pale sky over it
   are the second colour, greyed as in the photographs (Sverre
   31.10.2026: «bruk mer variasjon»).
   ============================================================ */

@font-face {
  font-family: "Geist";
  src: url("../assets/fonts/geist-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* surfaces */
  --svartbeis: #131211;          /* black-stained timber: the hero ground, dark rooms, text */
  --svartbeis-2: #1d1b19;        /* a raised dark surface */
  --kalk: #f4f1ec;               /* white painted cladding: the main ground */
  --kalk-2: #e9e3d9;             /* pale sand */
  --hvit: #ffffff;

  /* Mjøsa and the sky over it, greyed as they are in the photographs: the grounds that take turns down the page
     (honey, teak and a saturated navy were judged unnatural, Sverre 31.10.2026: «noe ble ganske unaturlig») */
  --mjosa: #1e3441;              /* the lake under an overcast sky: services, buttons */
  --mjosa-2: #2a4555;            /* a raised blue surface, button hover */
  --dis: #e4e9eb;                /* a pale winter sky: a light ground */
  --tekst-mjosa: #1e3441;        /* Jarek's sentence once the scroll has coloured it in */
  --natt-sterk: var(--skygge-sterk);  /* the dark land under the words on the map */
  --natt: var(--skygge);
  --natt-svak: var(--skygge-svak);

  /* which ground each section stands on (neighbours never share one) */
  --flate-prosjekter: var(--kalk);
  --flate-tjenester: var(--mjosa);
  --flate-om: var(--dis);
  --flate-vurderinger: var(--kalk-2);
  --flate-omrader: var(--svartbeis);
  --flate-kontakt: var(--dis);
  --flate-bunn: var(--svartbeis);
  --kort-1: var(--mjosa);        /* the three project cards, one ground each */
  --kort-2: var(--svartbeis-2);
  --kort-3: var(--svartbeis);
  --knapp-flate: var(--mjosa);
  --knapp-flate-hover: var(--mjosa-2);

  /* the one accent: fresh pine, in small details only, never a button */
  --furu: #d6a868;
  --furu-dyp: #87582a;           /* pine as text on a light ground (4.76:1 on sand, 02.11.2026: #8c5c2b gave 4.47) */

  /* text */
  --tekst: #131211;
  --tekst-2: #57524b;
  --tekst-lys: #f6f3ee;
  --tekst-lys-2: rgba(246, 243, 238, 0.78);
  --linje-lys: rgba(246, 243, 238, 0.34);
  --linje-mork: rgba(19, 18, 17, 0.12);
  --linje-mork-2: rgba(19, 18, 17, 0.28);
  --linje-lys-svak: rgba(246, 243, 238, 0.14);
  --felt: #fbf9f6;               /* form fields on sand */
  --feil: #a4402f;               /* a field that needs filling in */

  /* the shade that keeps text legible on a photograph (svartbeis at three strengths) */
  --skygge-sterk: rgba(19, 18, 17, 0.82);
  --skygge: rgba(19, 18, 17, 0.5);
  --skygge-svak: rgba(19, 18, 17, 0);
  --skygge-tekst: 0 1px 14px rgba(19, 18, 17, 0.5);
  --skygge-kart: 0 1px 8px rgba(19, 18, 17, 0.9);
  --skygge-knapp: 0 2px 14px rgba(19, 18, 17, 0.25);
  --skygge-liste: 0 22px 48px rgba(19, 18, 17, 0.22), 0 0 0 1px rgba(19, 18, 17, 0.08);

  /* pine as light on the map: the towns glow */
  --furu-ring: rgba(214, 168, 104, 0.3);
  --furu-glod: rgba(214, 168, 104, 0.7);
  --furu-tom: rgba(214, 168, 104, 0);
  --furu-linje: rgba(214, 168, 104, 0.45);

  /* the menu once it sits on the page instead of on the photographs */
  --meny-fast: rgba(244, 241, 236, 0.9);

  /* type: one family, Geist (SIL OFL), light and large for headings */
  --font: "Geist", "Helvetica Neue", Helvetica, sans-serif;
  --vekt-tittel: 300;
  --vekt-tekst: 400;
  --vekt-sterk: 520;
  --brod: 17px;                  /* body text on phones; 18px from 768 px (tokens below) */
  --liten: 15px;
  --tittel-hero: clamp(40px, 4.7vw, 80px);
  --tittel-side: clamp(38px, 4.4vw, 68px);       /* h1 on the other pages */
  --tittel-seksjon: clamp(34px, 4.2vw, 68px);    /* h2: large, so each section opens with a statement */
  --tittel-utsagn: clamp(30px, 4.3vw, 70px);     /* Jarek's sentence in about, coloured in by the scroll */
  --tittel-liten: clamp(22px, 1.9vw, 28px);      /* h3 */
  --ingress: clamp(18px, 1.45vw, 21px);
  --sporing-tittel: -0.04em;

  /* space */
  --side: clamp(16px, 4vw, 56px);       /* side gutter */
  --meny-h: 76px;
  --knapp-h: 52px;
  --runding: 999px;
  --rad: clamp(64px, 7vw, 104px);       /* section padding, kept tight */
  --maks: 1320px;                       /* widest content */
  --gap: clamp(16px, 2vw, 28px);

  /* the hero: light, the words on the left and the drawing that becomes the photograph on the right */
  --hero-grunn: var(--kalk-2);   /* the about section below it is kalk, so the two never share a ground */
  --hero-reise: 100svh;          /* how far the hero stays pinned while the deck is built and the photograph comes in */
  --hero-min-h: 560px;
  --hero-scene-h: max(100svh, var(--hero-min-h));
  --hero-bunn: clamp(16px, 3svh, 32px);  /* the frame's distance from the bottom of the screen */

  /* motion */
  --ease-ut: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-myk: cubic-bezier(0.33, 1, 0.68, 1);
  --tid-inn: 1.4s;
}

@media (min-width: 768px) {
  :root {
    --brod: 18px;
  }
}

@media (max-width: 767px) {
  :root {
    --meny-h: 64px;
    --knapp-h: 50px;
    --tittel-hero: clamp(36px, 10vw, 46px);
  }
}