/* ==========================================================================
   WEBBMAKARN — 01 TOKENS
   Designsystemets enda sanning. Ändra här, aldrig i komponenterna.
   ========================================================================== */

/* -- Typsnitt, självhostade. Inga externa anrop. OFL 1.1. ----------------- */
@font-face{font-family:'Familjen Grotesk';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/familjen-grotesk-400_700-normal-latin.woff2') format('woff2');
  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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Familjen Grotesk';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/familjen-grotesk-400_700-normal-latin-ext.woff2') format('woff2');
  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:'Schibsted Grotesk';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/schibsted-grotesk-400_700-normal-latin.woff2') format('woff2');
  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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/schibsted-grotesk-400_700-normal-latin-ext.woff2') format('woff2');
  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 {
  /* -- Färg -------------------------------------------------------------- */
  --vit:#FFFFFF;
  --ljus:#F5F4F1;          /* sektionsbotten, mycket ljus varmgrå */
  --ljus-2:#EDEBE6;
  --black:#0D0D0C;         /* 19,6:1 mot vitt */
  --grafit:#3A3A37;        /* 10,6:1 */
  --gra:#5E5E59;           /*  6,4:1 */
  --gra-svag:#6E6E66;      /*  5,1:1 vitt · 4,7:1 ljus botten */
  --linje:#E2E1DC;
  --linje-stark:#8A8A83;   /*  3,5:1  gränser på fält och knappar */

  /* Accent — bränd orange. Distinkt mot allt blått i branschen.
     Vill du ha blått i stället: byt de tre raderna nedan mot
     #1D4ED8 / #1739A8 / rgba(29,78,216,.07)                              */
  --accent:#BE4A17;        /*  5,4:1 mot vitt — godkänt även för brödtext */
  --accent-mork:#93380F;
  --accent-dis:rgba(190,74,23,.07);

  /* Mörk sektion */
  --mork:#0D0D0C;
  --mork-2:#191917;
  --mork-text:#F3F2EF;
  --mork-gra:#A3A39C;
  --mork-linje:#3A3A35;        /* dekorativ kortram */
  --mork-linje-stark:#6A6A63;  /*  3,6:1  knappar och diagram */
  --mork-accent:#F2793D;

  /* Roller */
  --botten:var(--vit); --yta:var(--ljus); --text:var(--black);
  --text-2:var(--grafit); --text-3:var(--gra); --text-4:var(--gra-svag);
  --regel:var(--linje); --regel-stark:var(--linje-stark);

  /* -- Typografi --------------------------------------------------------- */
  --f-display:'Familjen Grotesk','Segoe UI',system-ui,sans-serif;
  --f-text:'Schibsted Grotesk','Segoe UI',system-ui,sans-serif;
  --f-mono:ui-monospace,'Cascadia Mono','SF Mono',Consolas,monospace;

  --t-hero:clamp(3rem,1.6rem + 6.4vw,7.5rem);
  --t-h2:clamp(2.2rem,1.5rem + 3.2vw,4.25rem);
  --t-h3:clamp(1.35rem,1.2rem + .6vw,1.75rem);
  --t-h4:1.0625rem;
  --t-stor:clamp(1.2rem,1.05rem + .7vw,1.6rem);
  --t-brod:1.0625rem;
  --t-liten:.9375rem;
  --t-mikro:.75rem;

  /* -- Rum. Skala på 8, generös i toppen — luften bär premiumkänslan. ---- */
  --r-1:8px;   --r-2:16px;  --r-3:24px;  --r-4:32px;
  --r-5:48px;  --r-6:64px;  --r-7:96px;  --r-8:128px;
  --r-9:180px; --r-10:240px;

  /* -- Mått -------------------------------------------------------------- */
  --behallare:1360px;
  --kant:clamp(24px,5vw,72px);
  --matt:34rem;
  --huvud:76px;

  /* -- Form -------------------------------------------------------------- */
  --radie:0px;             /* skarpt. Radie är mall-signalen. */
  --radie-mjuk:2px;
  --kurva:cubic-bezier(.22,.61,.36,1);
  --snabb:180ms; --medel:280ms; --lugn:520ms;
}

@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
    --botten:#0B0B0A; --yta:#131311; --vit:#0B0B0A; --ljus:#131311; --ljus-2:#1B1B18;
    --text:#F2F1EE;        /* 17,9:1 */
    --text-2:#C6C5BF;      /* 11,4:1 */
    --text-3:#9C9B94;      /*  6,6:1 */
    --text-4:#84837C;      /*  4,9:1 */
    --regel:#262623; --regel-stark:#6E6E67;
    --accent:#F2793D;      /*  8,1:1 mot botten */
    --accent-mork:#FF9560; --accent-dis:rgba(242,121,61,.10);
    --mork:#131311; --mork-2:#1B1B18; --mork-text:#F2F1EE;
    --mork-gra:#9C9B94; --mork-linje:#3A3A35;        /* dekorativ kortram */
  --mork-linje-stark:#6A6A63;  /*  3,6:1  knappar och diagram */ --mork-accent:#F2793D;
  }
}
:root[data-theme="dark"] {
  --botten:#0B0B0A; --yta:#131311; --vit:#0B0B0A; --ljus:#131311; --ljus-2:#1B1B18;
  --text:#F2F1EE; --text-2:#C6C5BF; --text-3:#9C9B94; --text-4:#84837C;
  --regel:#262623; --regel-stark:#6E6E67;
  --accent:#F2793D; --accent-mork:#FF9560; --accent-dis:rgba(242,121,61,.10);
  --mork:#131311; --mork-2:#1B1B18; --mork-text:#F2F1EE;
  --mork-gra:#9C9B94; --mork-linje:#3A3A35;        /* dekorativ kortram */
  --mork-linje-stark:#6A6A63;  /*  3,6:1  knappar och diagram */ --mork-accent:#F2793D;
}