/* =========================================================================
   Jaktia – grunnmuren fra designsystemet «Jaktia» (merkeboken v1.0)
   Kilde: https://claude.ai/artifact/9zWd1hmroUVTtuKNBYyaab  (project/tokens.json)
   Verdiene her er kopiert, ikke tolket. Endres de, endres de i systemet først.

   Det systemet sier nei til, og som derfor ikke finnes her:
   ingen mørk modus, ingen skygger, ingen nye farger (heller ikke grønn/gul
   for status), og rødt tones, blandes eller gjøres gjennomsiktig aldri.
   ========================================================================= */

@font-face { font-family: "DIN OT"; src: url("../fonts/DINOT-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DIN OT"; src: url("../fonts/DINOT-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "DIN OT"; src: url("../fonts/DINOT-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "DIN OT"; src: url("../fonts/DINOT-Black.woff2") format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Replay Pro Headline"; src: url("../fonts/ReplayPro-Headline.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Replay Pro"; src: url("../fonts/ReplayPro-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  color-scheme: light;

  /* ---- Farger: merkets verdier --------------------------------------- */
  --jaktia-red: #840f00;   /* PMS 1815 C · 10,2:1 mot hvitt */
  --white:      #ffffff;
  --black:      #000000;
  --grey-02:    #e9e8e7;   /* flater ved siden av hvitt */
  --grey-03:    #d8d6d5;   /* flater og linjer */
  --grey-05:    #bdbcbb;   /* bare grafisk – 1,9:1, aldri tekst */
  --grey-06:    #8c8a87;   /* tekst bare 24px+ eller fet 19px+ – 3,4:1 */
  --grey-09:    #292828;   /* sekundær tekst i alle størrelser – 14,7:1 */

  /* ---- Farger: roller ------------------------------------------------ */
  --surface:        var(--white);
  --surface-tint:   var(--grey-02);
  --surface-brand:  var(--jaktia-red);
  --surface-dark:   var(--grey-09);
  --ink:            var(--black);
  --ink-secondary:  var(--grey-09);
  --ink-muted:      var(--grey-06);
  --ink-inverse:    var(--white);
  --ink-emphasis:   var(--jaktia-red);
  --border:         var(--grey-05);
  --border-strong:  var(--black);
  --focus-ring:     var(--jaktia-red);

  /* ---- Skrift -------------------------------------------------------- */
  --font-display: "Replay Pro Headline", "Replay Pro", Georgia, serif;
  --font-serif:   "Replay Pro", Georgia, serif;
  --font-sans:    "DIN OT", "DIN Next", "Helvetica Neue", Arial, sans-serif;
  --cap-height:   0.712;   /* DIN OT: versalhøyde i em – grunnlaget for Square og bobler */

  /* ---- Avstand (4px-base) -------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ---- Radius: 0,4 · høyden, ellers skarpt --------------------------- */
  --radius-none: 0;
  --radius-bubble-s: 16px;
  --radius-bubble-m: 22px;
  --radius-bubble-l: 32px;

  /* ---- Linjer -------------------------------------------------------- */
  --border-hairline: 1px;
  --border-thin: 2px;
  --border-medium: 3px;

  --opacity-disabled: 0.4;
}

/* ---- Tekststiler (navnene er systemets) ------------------------------ */
.t-brand-headline-xl { font: 400 64px/1.2 var(--font-display); letter-spacing: -0.01em; }
.t-brand-headline-l  { font: 400 48px/1.2 var(--font-display); letter-spacing: -0.01em; }
.t-brand-headline-m  { font: 400 36px/1.2 var(--font-display); }
.t-brand-intro       { font: 400 24px/1.4 var(--font-serif); }
.t-brand-body        { font: 400 18px/1.4 var(--font-serif); }
.t-headline-l        { font: 700 40px/1.2 var(--font-sans); }
.t-headline-m        { font: 700 28px/1.2 var(--font-sans); }
.t-subheading        { font: 700 18px/1.4 var(--font-sans); }
.t-subheading-caps   { font: 700 14px/1.4 var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; }
.t-structural        { font: 900 12px/1.4 var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase; }
.t-product-name      { font: 700 16px/1.3 var(--font-sans); letter-spacing: 0.04em; text-transform: uppercase; }
.t-body              { font: 400 16px/1.4 var(--font-sans); }
.t-body-small        { font: 400 14px/1.4 var(--font-sans); }
.t-caption           { font: 400 12px/1.4 var(--font-sans); }
.t-price             { font: 900 36px/1.05 var(--font-sans); color: var(--ink-emphasis); font-variant-numeric: tabular-nums; }
.t-button            { font: 700 14px/1 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; }

::selection { background: var(--jaktia-red); color: var(--white); }