/* Frekvens Digital: design tokens. Warm lime white, deep night ink and one signal orange (the "frekvens":
   the line, the pulses and small marks; never a button fill). Every colour, font and spacing value lives here;
   a full recolour only touches this file. */

@font-face { font-family: "Satoshi"; src: url("../assets/fonts/satoshi-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("../assets/fonts/satoshi-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("../assets/fonts/satoshi-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../assets/fonts/jetbrainsmono.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }

:root {
  /* palette */
  --kalk: #f4f2ee;
  --papir: #fbfaf8;
  --sand: #ebe6de;
  --hvit: #ffffff;
  --natt: #0f1520;
  --natt-2: #182030;
  --signal: #ff5a1f;          /* the frekvens: lines, pulses, marks */
  --signal-tekst: #b03d12;    /* the orange as small text on light grounds (5.5:1 on kalk) */
  --signal-glod: rgba(255, 90, 31, 0.45);
  --signal-lys: #ff8a5c;      /* the orange as text on night grounds (6.9:1 on natt) */
  --natt-linje: rgba(244, 242, 238, 0.14);
  --natt-svak: rgba(244, 242, 238, 0.52);
  --stjerne: #f2a33a;
  --natt-flate: rgba(244, 242, 238, 0.06);        /* small panels inside a night room */
  --natt-flate-sterk: rgba(244, 242, 238, 0.13);
  --signal-flate: rgba(255, 90, 31, 0.12);
  --varsel-flate: rgba(26, 30, 38, 0.94);         /* a phone notification lying on a photo */
  --feil: #b0301f;                                /* a form field that needs fixing */

  /* text on light ground */
  --tekst: #10151d;
  --tekst-dempet: #4b5462;
  --tekst-svak: #7a828e;
  --linje: rgba(16, 21, 29, 0.13);
  --linje-sterk: rgba(16, 21, 29, 0.3);

  /* text on dark ground */
  --tekst-lys: #f4f2ee;
  --tekst-lys-dempet: rgba(244, 242, 238, 0.72);

  /* devices in the hero */
  --tlf-kropp: #0d0e11;
  --tlf-kant: #2c2f36;
  --skjerm: #ffffff;
  --skjerm-flate: #f3f2ee;
  --skjerm-linje: rgba(16, 21, 29, 0.09);
  --kart-land: #e8ece4;
  --kart-vann: #d7e3ea;
  --kart-vei: #ffffff;
  --varsel: rgba(38, 42, 50, 0.78);
  --skygge-tlf: rgba(16, 21, 29, 0.22);

  /* veils and states */
  --meny-matt: rgba(244, 242, 238, 0.9);
  --fokus: var(--signal-tekst);

  /* drawing */
  --strek: #10151d;
  --strek-mal: var(--signal);

  /* type */
  --font: "Satoshi", "Helvetica Neue", Helvetica, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --vekt-tittel: 300;
  --vekt-tekst: 400;
  --vekt-merke: 500;
  --sporing-tittel: -0.035em;
  --sporing-merke: 0.14em;
  --str-h2: clamp(2.1rem, 1.2rem + 3vw, 4.1rem);
  --str-ingress: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --str-tekst: 1.0625rem;
  --str-merke: 0.75rem;
  --linjehoyde: 1.55;

  /* space */
  --marg: clamp(1.25rem, 0.6rem + 3vw, 3.5rem);
  --maks: 1400px;
  --meny-h: 76px;
  --luft: clamp(3.75rem, 2.6rem + 3.6vw, 6.5rem);   /* room above and below a section */
  --radius: 999px;

  /* motion */
  --mykt: cubic-bezier(0.22, 0.61, 0.36, 1);
  --hero-reise: 1.25;         /* scroll travel of the hero film, in scene heights */
}

@media (min-width: 1024px) {
  :root { --str-tekst: 1.125rem; }
}
@media (max-width: 767px) {
  :root { --meny-h: 64px; }
}
@media (pointer: coarse) {
  :root { --hero-reise: 1.1; }
}