/* ==========================================================================
   Design tokens – Ohlssons Invest (Figma 5QN8hfIjf7h9HeA04MN2Je, sektion 22:1965, ramar 1728 px)
   Sajtens enda källa för designvärden. Övriga stilmallar använder bara var(--…).
   Undantag i övriga filer: 0, 1px-linjer och 100 %. @media kan inte läsa custom properties, där står breddgränserna (--bp-* nedan) som värden.

   Två lager, som docs/malbild-fas/tokens.css:
     1. Råpalett (--color-*) och råa mått (--space-*, --size-*).
     2. Roller (--surface-*, --text-*, --border-*, --font-*, flytande mått) som bygger på lager 1.
   "figma: …" namnger Figma-stilen eller -variabeln. "ej Figma-variabel" = värdet står direkt i noden.
   ========================================================================== */

/* Source Sans Pro (SIL Open Font License, assets/fonts/OFL.txt), självhostat */
@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/source-sans-pro-latin-400.woff2") format("woff2");
}

@font-face {
  font-family: "Source Sans Pro";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/source-sans-pro-latin-400-italic.woff2") format("woff2");
}

@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/source-sans-pro-latin-600.woff2") format("woff2");
}

@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/source-sans-pro-latin-700.woff2") format("woff2");
}

:root {
  /* ---- Lager 1: råpalett ----------------------------------------------- */
  --color-white: #ffffff; /* figma: background-white, neutral/white */
  --color-navy-600: #44546a; /* figma: Style */
  --color-navy-800: #293747; /* ej Figma-variabel: introtext och ingress */
  --color-ink: #121212; /* figma: body */
  --color-slate-500: #616c7b; /* ej Figma-variabel: datum, brödsmulor, etiketter */
  --color-slate-300: #98a1b3; /* ej Figma-variabel: avdelare på mörk yta (sidfot, faktapanel) */
  --color-grey-200: #d5d9df; /* ej Figma-variabel: avdelare och arkivets linjer */
  --color-grey-50: #eff1f2; /* figma: Surface (samma yta står också som #eff0f2 i några ramar) */
  --color-grey-25: #f3f5f4; /* figma: neutral/neutral-50, background-light */
  --color-shade-20: rgb(0 0 0 / 0.2); /* ej Figma-variabel: mörkt lager över bolagsfoton och hållbarhetsbilden */
  --color-shadow-10: rgb(0 0 0 / 0.1); /* figma: sm (effekt 1) */
  --color-shadow-15: rgb(0 0 0 / 0.15); /* figma: sm (effekt 2) */
  --color-hero-56: rgb(38 55 76 / 0.56); /* ej Figma-variabel: Kontrast för budskap, vänster kant */
  --color-hero-0: rgb(38 55 76 / 0); /* ej Figma-variabel: Kontrast för budskap, höger kant */
  --color-hero-70: rgb(38 55 76 / 0.7); /* ej Figma: jämn toning av heron på mobil, där texten täcker hela bilden */
  --color-overlay: rgb(18 18 18 / 0.6); /* ej Figma: mörkt lager bakom mobilmenyn (designen har bara 1728 px) */

  /* ---- Lager 2: ytor, text, kanter ------------------------------------------ */
  --surface-page: var(--color-white);
  --surface-card: var(--color-white);
  --surface-light: var(--color-grey-50);
  --surface-soft: var(--color-grey-25);
  --surface-brand: var(--color-navy-600); /* hero utan bild, knappar, faktapaneler, sidfot */
  --surface-brand-hover: var(--color-navy-800); /* ej Figma: knappens hover */
  --surface-shade: var(--color-shade-20);
  --surface-transparent: rgb(0 0 0 / 0);

  --text-body: var(--color-ink);
  --text-heading: var(--color-navy-600);
  --text-intro: var(--color-navy-800);
  --text-muted: var(--color-slate-500);
  --text-inverse: var(--color-white);

  --border-subtle: var(--color-grey-200);
  --border-on-dark: var(--color-slate-300);
  --border-quote: var(--color-ink);
  --border-inverse: var(--color-white);

  --focus-ring-color: var(--color-navy-600); /* ej Figma: fokusmarkering */
  --focus-ring-color-inverse: var(--color-white);

  --shadow-card: 0 0 6px 0 var(--color-shadow-10), 0 0 2px 0 var(--color-shadow-15); /* figma: sm */
  --filter-logo: grayscale(1); /* ej Figma-variabel: koncernlogotyperna är gråskala, mätt på ohlssons.se (Figmas logotyper är grå bilder) */
  --opacity-logo: 0.9; /* ej Figma-variabel: koncernlogotypernas täckning, mätt på ohlssons.se */
  --filter-logo-hover: none; /* ohlssons.se: #logo-footer img:hover { filter: unset } */
  --opacity-logo-hover: 1; /* ohlssons.se: #logo-footer img:hover { opacity: unset } */
  --gradient-hero: linear-gradient(to right, var(--color-hero-56), var(--color-hero-0)); /* figma-nod: Kontrast för budskap */

  /* ---- Typsnitt ---------------------------------------------------------- */
  --font-sans: "Source Sans Pro", "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --lh-auto: normal;
  --lh-tight: 1.1; /* figma: h1 subpage, heroens budskap */
  --lh-heading: 1.12; /* figma: H2 */
  --lh-section: 1.15;
  --lh-small-heading: 1.2;
  --lh-card: 1.25;
  --lh-archive: 1.3;
  --lh-intro: 1.35;
  --lh-lead: 1.4; /* figma: Ingress */
  --lh-body: 1.5; /* figma: Body */

  /* Flytande storlekar: linjärt från 390 px (24,375 rem) till 1728 px (108 rem), min/max i rem.
       fluid(min, max) = clamp(min, min + (max − min) · (100vw − 24.375rem) / 83.625, max)
     Vid 1728 px är värdet exakt Figmas. */
  --fs-hero: clamp(2.25rem, calc(2.25rem + 1.5 * (100vw - 24.375rem) / 83.625), 3.75rem); /* 36 → 60 */
  --fs-h1: clamp(2rem, calc(2rem + 1 * (100vw - 24.375rem) / 83.625), 3rem); /* 32 → 48, figma: h1 subpage */
  --fs-fact: clamp(2rem, calc(2rem + 0.75 * (100vw - 24.375rem) / 83.625), 2.75rem); /* 32 → 44 */
  --fs-h2: clamp(1.75rem, calc(1.75rem + 0.75 * (100vw - 24.375rem) / 83.625), 2.5rem); /* 28 → 40, figma: H2 */
  --fs-section: clamp(1.75rem, calc(1.75rem + 0.5 * (100vw - 24.375rem) / 83.625), 2.25rem); /* 28 → 36 */
  --fs-h3: clamp(1.375rem, calc(1.375rem + 0.375 * (100vw - 24.375rem) / 83.625), 1.75rem); /* 22 → 28 */
  --fs-intro: clamp(1.25rem, calc(1.25rem + 0.375 * (100vw - 24.375rem) / 83.625), 1.625rem); /* 20 → 26 */
  --fs-card: clamp(1.25rem, calc(1.25rem + 0.25 * (100vw - 24.375rem) / 83.625), 1.5rem); /* 20 → 24 */
  --fs-lead: clamp(1.25rem, calc(1.25rem + 0.25 * (100vw - 24.375rem) / 83.625), 1.5rem); /* 20 → 24, figma: Ingress */
  --fs-fact-small: clamp(1.25rem, calc(1.25rem + 0.125 * (100vw - 24.375rem) / 83.625), 1.375rem); /* 20 → 22 */

  /* Fasta storlekar */
  --fs-archive: 1.3125rem; /* 21 */
  --fs-quote: 1.25rem; /* 20 */
  --fs-large: 1.1875rem; /* 19: sidfot och startsidans teasertext */
  --fs-body: 1.125rem; /* 18, figma: Body */
  --fs-small: 1rem; /* 16: knappar, etiketter, datum (figma: Tag Time) */
  --fs-nav: 0.9375rem; /* 15 */
  --fs-label: 0.875rem; /* 14 */

  --font-hero: var(--font-weight-bold) var(--fs-hero) / var(--lh-tight) var(--font-sans);
  --font-h1: var(--font-weight-bold) var(--fs-h1) / var(--lh-tight) var(--font-sans); /* figma: h1 subpage */
  --font-article-title: var(--font-weight-bold) var(--fs-h1) / var(--lh-heading) var(--font-sans);
  --font-h2: var(--font-weight-bold) var(--fs-h2) / var(--lh-heading) var(--font-sans); /* figma: H2 */
  --font-section: var(--font-weight-bold) var(--fs-section) / var(--lh-section) var(--font-sans);
  --font-section-auto: var(--font-weight-bold) var(--fs-section) / var(--lh-auto) var(--font-sans); /* sektionsrubrik med Figmas radhöjd Auto (Våra bolag, Aktuellt) */
  --font-h3: var(--font-weight-bold) var(--fs-h3) / var(--lh-small-heading) var(--font-sans);
  --font-intro: var(--font-weight-regular) var(--fs-intro) / var(--lh-intro) var(--font-sans);
  --font-card: var(--font-weight-bold) var(--fs-card) / var(--lh-auto) var(--font-sans);
  --font-news-title: var(--font-weight-semibold) var(--fs-card) / var(--lh-card) var(--font-sans);
  --font-lead: var(--font-weight-semibold) var(--fs-lead) / var(--lh-lead) var(--font-sans); /* figma: Ingress */
  --font-fact: var(--font-weight-bold) var(--fs-fact) / var(--lh-section) var(--font-sans);
  --font-fact-small: var(--font-weight-semibold) var(--fs-fact-small) / var(--lh-card) var(--font-sans);
  --font-archive: var(--font-weight-semibold) var(--fs-archive) / var(--lh-archive) var(--font-sans);
  --font-quote: italic var(--font-weight-regular) var(--fs-quote) / var(--lh-body) var(--font-sans);
  --font-large: var(--font-weight-regular) var(--fs-large) / var(--lh-body) var(--font-sans);
  --font-large-auto: var(--font-weight-regular) var(--fs-large) / var(--lh-auto) var(--font-sans);
  --font-body: var(--font-weight-regular) var(--fs-body) / var(--lh-body) var(--font-sans); /* figma: Body */
  --font-label: var(--font-weight-bold) var(--fs-small) / var(--lh-auto) var(--font-sans); /* knappar, ögonbryn, kolumnrubriker (versaler) */
  --font-date: var(--font-weight-regular) var(--fs-small) / var(--lh-small-heading) var(--font-sans); /* figma: Tag Time */
  --font-small: var(--font-weight-regular) var(--fs-small) / var(--lh-auto) var(--font-sans);
  --font-crumb-current: var(--font-weight-semibold) var(--fs-small) / var(--lh-auto) var(--font-sans);
  --font-nav: var(--font-weight-semibold) var(--fs-nav) / var(--lh-auto) var(--font-sans);
  --font-fact-label: var(--font-weight-bold) var(--fs-label) / var(--lh-auto) var(--font-sans);
  --font-note: var(--font-weight-semibold) var(--fs-label) / var(--lh-auto) var(--font-sans);

  /* ---- Lager 1: råa mått --------------------------------------------------- */
  --space-4: 0.25rem;
  --space-8: 0.5rem;
  --space-12: 0.75rem;
  --space-16: 1rem;
  --space-18: 1.125rem;
  --space-20: 1.25rem;
  --space-22: 1.375rem;
  --space-24: 1.5rem;
  --space-28: 1.75rem;
  --space-32: 2rem;
  --space-36: 2.25rem;
  --space-40: 2.5rem;
  --space-48: 3rem;
  --space-64: 4rem;

  --border-width-quote: 0.1875rem; /* 3 px */
  --border-width-button: 0.125rem; /* 2 px: heroens konturknapp */
  --border-width-focus: 0.125rem;
  --radius-card: 0.125rem; /* 2 px */
  --radius-button: 0.1875rem; /* 3 px */

  --size-content: 94rem; /* 1504 px: innehållets bredd (1728 − 2 · 112) */
  --size-header-height: 6.5rem; /* 104 px */
  --size-logo-width: 11.25rem; /* 180 px */
  --size-footer-logo: 13.75rem; /* 220 px */
  --size-group-logo-width: 8.875rem; /* 142 px */
  --size-group-logo-height: 3.25rem; /* 52 px */
  --size-group-band: 8.25rem; /* 132 px */
  --size-control: 3rem; /* 48 px: knapp */
  --size-icon: 1.25rem; /* 20 px: textlänkens pil */
  --size-icon-small: 1.125rem; /* 18 px: knappens pil */
  --size-icon-large: 1.375rem; /* 22 px: bolagskortets pil och LinkedIn */
  --size-hero-text: 46.25rem; /* 740 px: heroens budskap */
  --size-intro-text: 51.25rem; /* 820 px: Våra bolag-introduktionen */
  --size-column-right: 45rem; /* 720 px: högerkolumnen i tvåspaltstexten */
  --size-social: 15rem; /* 240 px: sidfotens Följ oss */
  --size-sidebar: 25rem; /* 400 px: nyhetsarkivet */
  --size-article: 61rem; /* 976 px: artikelspalten */
  --size-card-link: 5rem; /* 80 px: ingångskortets länkband */
  --size-company-link: 4.125rem; /* 66 px: bolagskortets länkband */
  --size-person-photo: 7.5rem; /* ej Figma: kontaktpersonens kvadratiska foto (120 px), Kontakt saknar ram i Figma */
  --size-person-photo-small: 5rem; /* ej Figma: fotot under 640 px (80 px), så att e-postadressen får plats */
  --size-fact-min: 10.5rem; /* 168 px: faktapanelens lägsta höjd */
  --size-card-min: 18rem; /* ej Figma: smalaste kort innan kolumnerna blir färre */
  --size-fact-column: 7rem; /* ej Figma: smalaste kolumn i bolagets faktaruta innan uppgifterna staplas */
  --size-menu-drawer: 21.25rem; /* ej Figma: mobilmenyns panel */
  --size-menu-icon-width: 1.5rem;
  --size-menu-icon-height: 1.125rem;
  --size-menu-icon-bar: 0.1875rem;
  --size-tap-target: 2.75rem; /* 44 px */
  --size-bullet: 0.5rem; /* 8 px: punktens kolumn */
  --ratio-photo: 16 / 9; /* korten (482 × 271,5 px), bolagsfotot (736 × 414 px) och artikelbilden (976 × 549 px) */

  /* Bolagslogotyperna på fotona: bredden ur Figma, höjden följer bilden */
  --size-company-logo: 13.75rem; /* 220 px: startsidans kort */
  --size-company-logo-large: 16.25rem; /* 260 px: Våra bolag */

  /* Flytande avstånd, samma formel som typografin */
  --space-gutter: clamp(1rem, calc(1rem + 6 * (100vw - 24.375rem) / 83.625), 7rem); /* 16 → 112: sidans marginal */
  --space-section: clamp(3rem, calc(3rem + 2 * (100vw - 24.375rem) / 83.625), 5rem); /* 48 → 80 */
  --space-section-small: clamp(2.5rem, calc(2.5rem + 1.5 * (100vw - 24.375rem) / 83.625), 4rem); /* 40 → 64 */
  --space-panel: clamp(1.5rem, calc(1.5rem + 2.5 * (100vw - 24.375rem) / 83.625), 4rem); /* 24 → 64: textpanelens fyllnad */
  --space-panel-end: clamp(1.5rem, calc(1.5rem + 5.5 * (100vw - 24.375rem) / 83.625), 7rem); /* 24 → 112: startsidans teaserpanel, högerkanten */
  --space-columns: clamp(2rem, calc(2rem + 2 * (100vw - 24.375rem) / 83.625), 4rem); /* 32 → 64: mellan textkolumner */
  --space-columns-wide: clamp(2rem, calc(2rem + 6 * (100vw - 24.375rem) / 83.625), 8rem); /* 32 → 128: artikel och arkiv */
  --space-intro: clamp(1.5rem, calc(1.5rem + 3.5 * (100vw - 24.375rem) / 83.625), 5rem); /* 24 → 80: introtext och textlänk */
  --space-grid: clamp(1rem, calc(1rem + 1 * (100vw - 24.375rem) / 83.625), 2rem); /* 16 → 32: mellan kort */
  --space-entry-grid: clamp(1rem, calc(1rem + 0.75 * (100vw - 24.375rem) / 83.625), 1.75rem); /* 16 → 28: mellan ingångskort */
  --space-company-info: clamp(1.25rem, calc(1.25rem + 0.75 * (100vw - 24.375rem) / 83.625), 2rem); /* 20 → 32 */
  --size-hero-height: clamp(28rem, calc(28rem + 20.75 * (100vw - 24.375rem) / 83.625), 48.75rem); /* 448 → 780 */
  --size-banner-height: clamp(10rem, calc(10rem + 11.625 * (100vw - 24.375rem) / 83.625), 21.625rem); /* 160 → 346 */
  --size-split-image: clamp(15rem, calc(15rem + 11.4375 * (100vw - 24.375rem) / 83.625), 26.4375rem); /* 240 → 423: bild bredvid text */
  --size-teaser-image: clamp(15rem, calc(15rem + 15.625 * (100vw - 24.375rem) / 83.625), 30.625rem); /* 240 → 490: startsidans hållbarhetsbild */

  /* Övriga värden som inte är mått i px/rem */
  --size-viewport: 100vh; /* sidan fyller minst fönstret, så sidfoten aldrig hamnar mitt på en kort sida */
  --size-company-logo-max: 60%; /* ej Figma: logotypen på ett smalt bolagskort tar högst 60 % av fotots bredd */
  --position-banner: 50% 12.5%; /* Figma: bannerbilden är 3,33 gånger så hög som rutan och förskjuten 29 % uppåt: 29,05 / (332,95 − 100) = 12,5 % */
  --angle-flip: 180deg; /* tillbakapilen är framåtpilen vänd (Figma: Tillbakapil, rotate-180) */
  --angle-cross: 45deg; /* mobilmenyns kryss: två streck vridna ±45° */

  /* ---- Rörelse ------------------------------------------------------------- */
  --duration-fast: 150ms; /* ej Figma: hover */
  --duration-menu: 300ms;
  --ease-standard: ease;
  --z-drawer: 30;

  /* ---- Breddgränser (designen finns bara i 1728 px). Dokumentation: @media kan inte läsa dem. ---- */
  --bp-wide: 64rem; /* 1024 px: under den staplas bild och text, sidhuvudet blir hamburgermeny, arkivet hamnar under artikeln */
  --bp-medium: 40rem; /* 640 px: under den en kolumn i sidfoten och faktapanelerna */
}