/* Bygg & Håndverk Design: design tokens. Every colour, font and spacing value lives here; a full recolour only touches this file.
   Palette «Petrol og kalk», Sverre's choice 09.11.2026: deep petrol on the dark grounds, warm chalk on the light ones, the pale wood
   of the house model as the one warm tone. The logo's dark green and red are not used on the site. */

/* Instrument Sans (SIL OFL, fontsource 5.2.8), variable, weights 400 to 700. Chosen because it is sharp and calm like a joiner's
   line, and different from the other client sites (Geologica, General Sans, Albert Sans, Hanken Grotesk, Geist, Archivo, Schibsted, Mona Sans, Satoshi). */
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../assets/fonts/instrument-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../assets/fonts/instrument-sans-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --petrol: #1b4a57;          /* the dark ground, the one Sverre called «en veldig fin farge» on the XS site 08.11.2026 */
  --petrol-topp: #1a3f4c;     /* the hero's ground at the top of the screen; matches the light falloff in the film */
  --petrol-bunn: #1d4f5e;     /* and at the bottom */
  --petrol-midt: #1b4755;     /* one flat ground for phones, where the film fills only part of the screen */
  --petrol-dyp: #123640;      /* buttons on light ground */
  --natt: #16303d;            /* the flat night behind the hero film: what the sky of the film fades into (NATT in production/kilde/hero3/etter3.py) */
  --kalk: #f4f1ea;            /* the light ground */
  --kalk-2: #e9e4da;
  --eik: #d8bd93;             /* the pale timber of the house in the hero: small details only */
  --tekst: #17262b;
  --tekst-dempet: #4f5f64;
  --tekst-lys: #f4f1ea;
  --tekst-lys-dempet: rgba(244, 241, 234, 0.8);
  --linje-lys: rgba(244, 241, 234, 0.24);
  --linje: rgba(23, 38, 43, 0.14);
  --linje-sterk: rgba(23, 38, 43, 0.42);       /* the outline of a button on light ground */
  --linje-lys-sterk: rgba(244, 241, 234, 0.5);
  --tekst-lys-sterk: rgba(244, 241, 234, 0.9); /* running text on dark ground and on photos */
  --eik-dyp: #a98a5c;                          /* the timber tone where it has to be seen on light ground: small marks only */
  /* the veil that carries text on a photo, from clear at the top to deep petrol at the bottom */
  --slor-0: rgba(13, 38, 46, 0);
  --slor-1: rgba(13, 38, 46, 0.3);
  --slor-2: rgba(13, 38, 46, 0.72);
  --slor-3: rgba(11, 33, 40, 0.94);
  --skygge: 0 18px 50px rgba(8, 24, 32, 0.2);
  --radius: 3px;

  --skrift: "Instrument Sans", "Helvetica Neue", sans-serif;

  --kant: clamp(1.25rem, 4vw, 4rem);   /* the page's side margin */
  --rom: clamp(3.5rem, 2.4rem + 5vw, 6.75rem);   /* a section's air at the top and bottom */
  --bredde: 90rem;                     /* the widest the content of a section goes */
  --meny-h: 5rem;
  --hero-reise: 1.35;                  /* how many screens the film takes to build the house */
}

@media (pointer: coarse) { :root { --hero-reise: 1.15; } }
@media (max-width: 767px) { :root { --meny-h: 4rem; } }

/* KART-TOKENS: copied from production/kilde/kart/tokens-tillegg.css by production/tools/tokens-flett.py */
/* The area map («Her jobber vi», css/omrader.css, js/omrader.js). Paste this block into css/tokens.css. The map files in assets/kart/
   are toned by production/kilde/kart/lag_kart.py from --kart-land, --kart-land-lys, --kart-land-mork, --kart-by, --kart-vann and
   --kart-utland (it reads them from css/tokens.css, or from this file until they are there): change them there and run the script. */
:root {
  --kart-land: #3d4447;              /* Norway's land, the middle tone; the relief lifts and lowers it */
  --kart-land-lys: #5b6365;          /* slopes towards the light */
  --kart-land-mork: #252b2e;         /* slopes away from it */
  --kart-by: #4b5255;                /* the towns, a touch lighter than the land round them */
  --kart-vann: #16293a;              /* water, a muted blue: the only blue on the map */
  --kart-utland: #2b3235;            /* Sweden: Kartverket's map stops at the border, so it stands as a calm flat without relief */
  --kart-ark: #122a35;               /* the sheet round the map, a shade under the section's night */
  --kart-dyp: #22292c;               /* behind the map until it has loaded */
  --kart-blekk: #f4f1ea;             /* the frame, the lines, the dots and the names */
  --kart-blekk-demp: rgba(244, 241, 234, 0.72);   /* the coordinates and the caption */
  --kart-linje: rgba(244, 241, 234, 0.2);         /* the rules between the places in the list */
  --kart-linje-sterk: rgba(244, 241, 234, 0.34);  /* the frame of the sheet and the rings of the numbers */
  --kart-halo: rgba(20, 28, 32, 0.92);            /* behind the names on the map */
  --kart-aktiv: #d8bd93;             /* the number of the place being drawn: the pale timber, a small detail */
  --kart-aktiv-tekst: #16303d;
  --kart-reise: 2.2;                 /* the pinned scroll, in screen heights: the plan is drawn over the first three quarters, the rest is time to read */
  --kart-reise-smal: 1.9;            /* the same under 64rem */
  --kart-pre: 0.62;                  /* the plan starts drawing this share of a screen before the pin */
  --kart-innmarg: 0.5rem;            /* the margin inside the frame of the sheet */
  --kart-strip-h: 2rem;              /* the caption line under the map */
  --kart-band: 1.35rem;              /* the coordinate band above and left of the map */
  --kart-band-smal: 0.5rem;          /* the band below and right: ticks only */
  --kart-ark-andel: 0.63;            /* the sheet's share of the width beside the list */
  --kart-svak: 0.62;                 /* places the plan has not reached yet */
  --kart-navn-str: clamp(0.625rem, 0.58rem + 0.14vw, 0.71875rem);   /* the names on the map */
  --kart-hjem-str: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem);        /* Halden, where the lines start */
  --kart-mykt: cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* /KART-TOKENS */

/* SKJEMA-TOKENS: copied from production/kilde/kontakt/tokens-tillegg.css by production/tools/tokens-flett.py */
/* Tokens the contact form (css/kontakt.css) needs beyond css/tokens.css. To be pasted into the :root block of css/tokens.css.
   Contrast measured against --kalk #f4f1ea (the cards) and --skjema-flate (the fields and tiles). */
:root {
  --skjema-flate: #fbfaf6;                  /* fields and tiles: a touch lighter than the card's kalk */
  --skjema-kant: #748387;                   /* the line round fields and tiles: 3.5:1 on kalk, 3.8:1 on the field (WCAG 1.4.11) */
  --skjema-feil: #a3322a;                   /* error text and the line round a field with an error: 6.1:1 on kalk */
  --skjema-skygge: rgba(18, 54, 64, 0.22);  /* the cards' shadow, in deep petrol */
  --skjema-radius: 3px;                     /* the corners of the site's buttons */
}
/* /SKJEMA-TOKENS */

/* SLIK-TOKENS: the pinned scene «Slik jobber vi» (css/slik.css, js/slik.js) */
:root {
  --slik-reise: 2.3;                          /* the pinned scroll, in screen heights: four steps, a rest at each frame */
  --slik-reise-smal: 1.9;                     /* the same under 900 px */
  --slik-luft: clamp(0.75rem, 2.6vh, 2rem);   /* the air above and below the scene inside the screen */
  --slik-indeks-h: 4.5rem;                    /* the line and the four names under the film strip */
  --slik-gap: 1rem;                           /* between the frames of the strip */
  --slik-rutenett: rgba(244, 241, 234, 0.055);   /* the grid of the drawing board */
  --slik-rest: 29rem;                         /* under 900 px: the height the heading, the line, the step's text and the buttons need beside the frame */
  --slik-rest-lav: 17rem;                     /* the same on a phone, where the title, the names under the line and the buttons are left out */
}
/* /SLIK-TOKENS */