/* Tid Bolig: design tokens. Every colour, font and spacing value lives here. */

@font-face {
  font-family: "Albert Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../assets/fonts/albert-sans-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Albert Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../assets/fonts/albert-sans-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* palette: Tid Bolig's own logo colours on a warm lime white */
  --kalk: #f6f4f0;
  --sand: #ebe6de;
  --hvit: #ffffff;
  --marine: #17202a;
  --marine-2: #1e2934;
  --marine-3: #2a3744;
  --skifer: #5b6573;
  --kobber: #db6b42;
  --kobber-tekst: #a14826;   /* copper as small text: 4.8:1 on sand, 5.5:1 on kalk */
  --kobber-lys: #ef9a74;
  --himmel: #e0ecf6;          /* the top of the hero render's sky */

  /* text on light ground */
  --tekst: var(--marine);
  --tekst-dempet: #4c5664;
  --linje: rgba(23, 32, 42, 0.14);
  --linje-sterk: rgba(23, 32, 42, 0.32);

  /* text on dark ground */
  --tekst-lys: #f6f4f0;
  --tekst-lys-dempet: rgba(246, 244, 240, 0.74);
  --linje-lys: rgba(246, 244, 240, 0.18);

  /* veils, shadows and the form's error colour */
  --slor: rgba(23, 32, 42, 0.72);   /* under small white labels on photos: 4.5:1 or better */
  --skygge: rgba(23, 32, 42, 0.28);
  --feil: #a3341b;
  --meny-matt: rgba(246, 244, 240, 0.92);   /* the menu's ground once the hero has gone */
  --merknad: rgba(255, 255, 255, 0.86);      /* the caption on the hero picture */
  --merknad-skygge: rgba(0, 0, 0, 0.35);
  --fokus: var(--kobber-tekst);     /* focus ring on light grounds (3:1); dark sections switch it to --kobber-lys */

  /* drawing */
  --strek: #17202a;
  --strek-mal: var(--kobber);

  /* type */
  --font: "Albert Sans", "Helvetica Neue", Helvetica, sans-serif;
  --vekt-tittel: 300;
  --vekt-tekst: 400;
  --vekt-merke: 600;
  --sporing-tittel: -0.035em;
  --sporing-merke: 0.14em;
  --str-hero: clamp(2.3rem, 1.2rem + 3.6vw, 4.6rem);
  --str-h2: clamp(2.1rem, 1.2rem + 3vw, 4.1rem);
  --str-h3: clamp(1.3rem, 1.1rem + 0.6vw, 1.6rem);
  --str-ingress: clamp(1.125rem, 1.05rem + 0.35vw, 1.3rem);
  --str-tekst: 1.0625rem;
  --str-merke: 0.78rem;
  --linjehoyde: 1.55;

  /* space */
  --marg: clamp(1.25rem, 0.6rem + 3vw, 3.5rem);
  --maks: 1360px;
  --seksjon-luft: clamp(3.5rem, 2.2rem + 3.6vw, 6rem);
  --rad-luft: clamp(1.25rem, 0.8rem + 1.6vw, 2.25rem);
  --meny-h: 76px;
  --radius: 2px;

  /* motion */
  --mykt: cubic-bezier(0.22, 0.61, 0.36, 1);
  --hero-reise: 1;          /* scroll travel of the hero build, 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: 0.85; }
}

/* behind the picture viewer on the projects page. Set on ::backdrop itself: before Chrome 122 and Safari 17.4 it did
   not inherit custom properties from :root */
::backdrop { --lysboks: rgba(14, 19, 25, 0.94); }