/* ═══════════════════════════════════════════════════════════════
   Eggedal Turlag — designtokens
   Profilmanual v1.0, august 2026 · profil.nyg.as/eggedal-turlag

   ENESTE STED farger, fonter og typografi skal defineres.
   Endres profilen, endres den her — ikke i sidene.

   Fontene ligger lokalt som variable woff2. Én fil dekker hele
   vektspennet, så vi slipper både Google Fonts-avhengigheten og
   flere nedlastinger per side.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Fonter ─── */

/* Nunito — titler. Profilen tillater maks vekt 800, ikke Black 900. */
@font-face {
  font-family: 'Nunito';
  src: url('/assets/fonts/nunito-latin-wght-normal.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  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: 'Nunito';
  src: url('/assets/fonts/nunito-latin-ext-wght-normal.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  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;
}

/* Figtree — brødtekst og grensesnitt */
@font-face {
  font-family: 'Figtree';
  src: url('/assets/fonts/figtree-latin-wght-normal.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  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: 'Figtree';
  src: url('/assets/fonts/figtree-latin-ext-wght-normal.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  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;
}
@font-face {
  font-family: 'Figtree';
  src: url('/assets/fonts/figtree-latin-wght-italic.woff2') format('woff2');
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ─────────────────────────────────────────────
     PROFILFARGER — navnene fra profilmanualen
     ───────────────────────────────────────────── */
  --et-anorakk:       #ED5338;   /* signaturfargen */
  --et-vipps:         #FF5B24;   /* Vipps sin farge — bare på Vipps-knapper */
  --et-bark:          #4D2710;   /* konturlinjer, tekst på lyse flater */

  /* Støttefarger */
  --et-fjellbla:      #223462;
  --et-vinterhimmel:  #B2D0EC;
  --et-lys-stein:     #F2E5DA;   /* standard lys bakgrunn, varmere enn hvitt */

  /* Avledede nyanser — beregnet ut fra profilfargene, ikke egne profilfarger */
  --et-anorakk-dark:  #D8452C;   /* hover på knapper */
  --et-anorakk-tint:  #FDEDE9;   /* svak bakgrunn, merkelapper */
  --et-bark-tint:     #EFE4DC;
  --et-fjellbla-dark: #182648;
  --et-stein-dark:    #E6D5C7;   /* kantlinjer på Lys stein-flater */
  --et-lys-stein-lys:  #F8F1EB;   /* partnerstripa, skilt fra bunnteksten */
  --et-vinterhimmel-lys: #D9E8F6; /* kort på hvit bakgrunn (forsiden) */

  /* ─────────────────────────────────────────────
     SEMANTISKE ROLLER — dette bruker koden
     Kontrastforhold mot Lys stein i parentes.
     WCAG AA krever 4.5 for brødtekst, 3.0 for stor tekst.
     ───────────────────────────────────────────── */
  --et-primary:       var(--et-anorakk);      /* knapper, badge, aksent */
  --et-primary-hover: var(--et-anorakk-dark);
  --et-heading:       var(--et-bark);         /* overskrifter (10.5) */
  --et-link:          var(--et-fjellbla);     /* lenker (9.8) */
  --et-link-hover:    var(--et-fjellbla-dark); /* ikke Anorakk: for svak kontrast som tekst */

  --et-text:          #1A1A1A;                /* brødtekst (14.1) */
  --et-text-muted:    #575757;                /* sekundærtekst (5.9); #6B6B6B var for svak mot Lys stein */
  --et-text-on-dark:  #FFFFFF;

  --et-surface:       var(--et-lys-stein);    /* sidebakgrunn */
  --et-surface-card:  #FFFFFF;                /* kort og paneler */
  --et-surface-alt:   var(--et-anorakk-tint);
  --et-surface-dark:  var(--et-fjellbla);

  --et-border:        var(--et-stein-dark);
  --et-border-light:  #F0E6DE;

  /* MERK: Anorakk som tekstfarge gir 2.88 mot Lys stein og 3.56 mot hvitt.
     Den skal derfor IKKE brukes til brødtekst eller små etiketter.
     Hvit tekst på Anorakk-knapp krever minst 16px og vekt 600. */

  /* Tilstandsfarger — utenfor profilen, men nødvendige i grensesnittet.
     Valgt for å harmonere med paletten. */
  --et-success:       #1F6B4A;
  --et-success-bg:    #DCF3E7;
  --et-danger:        #9B2C1E;
  --et-danger-bg:     #FBE7E3;
  --et-warn:          #8A5A1B;
  --et-warn-bg:       #FBEFD8;

  /* ─────────────────────────────────────────────
     TYPOGRAFI
     ───────────────────────────────────────────── */
  --et-font-title: 'Nunito', system-ui, -apple-system, sans-serif;
  --et-font-body:  'Figtree', system-ui, -apple-system, sans-serif;

  --et-weight-title: 800;   /* profilens maksvekt for Nunito */
  --et-weight-bold:  700;
  --et-weight-med:   550;
  --et-weight-body:  400;

  /* Titler settes tett, per profilen (-1 til -2 %) */
  --et-tracking-title: -0.015em;
  --et-tracking-label:  0.08em;   /* versaler med sperring */

  --et-size-h1: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  --et-size-h2: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --et-size-h3: 1.3125rem;
  --et-size-body: 1rem;
  --et-size-sm: 0.875rem;
  --et-size-xs: 0.8125rem;
  /* Tekststiler for alle innholdssider (designkorrektur okt. 2026):
     brødtekst og liten tekst (metadata, ingresser på kort, datoer) */
  --et-tekst:       1.0625rem;  /* 17 px */
  --et-tekst-linje: 1.6;
  --et-tekst-liten: 0.9375rem;  /* 15 px */

  --et-leading-title: 1.15;
  --et-leading-body: 1.65;

  /* ─────────────────────────────────────────────
     FORM
     ───────────────────────────────────────────── */
  --et-radius-sm: 7px;
  --et-radius:    12px;
  --et-radius-lg: 18px;
  --et-radius-xl: 25px;
  --et-radius-pill: 999px;

  --et-shadow:    0 1px 2px rgba(77, 39, 16, .06);
  --et-shadow-md: 0 4px 18px rgba(77, 39, 16, .07);
  --et-shadow-lg: 0 12px 40px rgba(77, 39, 16, .10);

  /* ─────────────────────────────────────────────
     MOBIL
     Brytepunktet er 980px (kan ikke være variabel i @media).
     ───────────────────────────────────────────── */
  --et-touch:       44px;   /* minste trykkflate (Apple/WCAG) */
  --et-gutter:      16px;   /* sidemarg på mobil */
  --et-input-size:  16px;   /* under 16px zoomer iOS inn ved fokus */
}

/* ─────────────────────────────────────────────
   BASIS
   ───────────────────────────────────────────── */
body {
  font-family: var(--et-font-body);
  font-size: var(--et-size-body);
  line-height: var(--et-leading-body);
  color: var(--et-text);
  background: var(--et-surface);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--et-font-title);
  font-weight: var(--et-weight-title);
  letter-spacing: var(--et-tracking-title);
  line-height: var(--et-leading-title);
  color: var(--et-heading);
}
h1 { font-size: var(--et-size-h1); }
h2 { font-size: var(--et-size-h2); }
h3 { font-size: var(--et-size-h3); }

/* h4-h6 er grensesnittelementer, ikke titler — de bruker Figtree */
h4, h5, h6 {
  font-family: var(--et-font-body);
  font-weight: var(--et-weight-bold);
  color: var(--et-heading);
}

a { color: var(--et-link); }
a:hover { color: var(--et-link-hover); }

/* Etiketter og overtitler: versaler med sperring, per profilen */
.et-label {
  font-family: var(--et-font-body);
  font-weight: var(--et-weight-bold);
  font-size: var(--et-size-xs);
  text-transform: uppercase;
  letter-spacing: var(--et-tracking-label);
  color: var(--et-text-muted);
}

/* Slagordet */
.et-slagord {
  font-family: var(--et-font-title);
  font-weight: var(--et-weight-title);
  letter-spacing: var(--et-tracking-title);
}

/* Knapper er runde i hele løsningen (beslutning etter designkorrektur,
   okt. 2026: «alt annet er rundt»). Står her fordi tokens.css lastes på
   alle sider, også admin og løypekjører. !important fordi sidene setter
   radius selv, mange steder inline. Verktøylinja i redigeringsverktøyet
   (.rich-btn) og statusvalget til løypekjørerne (.status-btn) er flater,
   ikke knapper, og beholder hjørnene. */
.btn, .btn-primary, .btn-secondary, .btn-navy, .btn-danger, .btn-ghost,
.btn-full, .btn-small, .btn-submit, .btn-add, .btn-vipps, .btn-print,
.bm-cta, .hero-cta, .et-btn-primary, .et-btn-secondary, .newsletter-btn,
#et-cookie-banner button {
  border-radius: var(--et-radius-pill) !important;
}

/* Vipps-knapper følger Vipps sin standard: den offisielle komponenten
   <vipps-mobilepay-button> fra cdn.vippsmobilepay.com (se
   developer.vippsmobilepay.com/docs/knowledge-base/buttons). Knappen inni er
   reserve: den vises bare hvis Vipps-skriptet ikke lastes (komponenten har
   ingen <slot>, så innholdet skjules når den er på plass). Ikke endre farge,
   tekst eller logo på selve komponenten. */
vipps-mobilepay-button { display: block; cursor: pointer; }
vipps-mobilepay-button.vipps-inline { display: inline-block; }
.vipps-reserve {
  display: flex; align-items: center; justify-content: center; width: 100%;
  min-height: var(--et-touch); padding: 12px 20px; border: 0;
  border-radius: var(--et-radius-pill);
  background: var(--et-vipps); color: #fff;
  font-family: var(--et-font-body); font-weight: 700; font-size: 16px; cursor: pointer;
}