/* ==========================================================================
   Design tokens – Miljönär (källa: miljönär.se, temat miljonar2016: app.css och värden mätta i webbläsaren vid 1440 och 390 px)
   Sajtens enda källa för designvärden. Övriga stilmallar använder bara var(--…).
   Undantag i övriga filer: 0, 1px-linjer, 100 % och 50 %. @media kan inte läsa custom properties, där står breddgränserna (--bp-* nedan) som värden.
   Som på källsajten är 1 rem = 10 px (html { font-size: 10px } i base.css), så mått i rem är källans mått delat med tio. Brödtexten är 16 px (--fs-body).

   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-*) som bygger på lager 1.
   ========================================================================== */

/* Montserrat, Merriweather och Roboto (SIL Open Font License), självhostade. De är variabla typsnitt (Googles filer, samma som källsajtens): en fil täcker vikterna 400 till 700, Roboto 100 till 900. */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/fonts/montserrat-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Merriweather";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/fonts/merriweather-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Merriweather";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/fonts/merriweather-latin-italic.woff2") format("woff2");
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/roboto-latin.woff2") format("woff2");
}

:root {
  /* ---- Lager 1: råpalett ----------------------------------------------- */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-ink: #333333; /* brödtext */
  --color-card: #333335; /* kortens bakgrund */
  --color-orange: #fc913a; /* länkar, knappar, ikoner, kontur */
  --color-orange-strong: #fb7508; /* kanten på filterknapparna */
  --color-orange-hover: #e66904; /* länk i hover */
  --color-orange-soft: #dc955b; /* sökikonen i hover */
  --color-green: #6b8e23; /* sektionsrubriker */
  --color-grey-f5: #f5f5f5;
  --color-grey-f4: #f4f4f4;
  --color-grey-ee: #eeeeee;
  --color-grey-e6: #e6e6e6;
  --color-grey-dd: #dddddd;
  --color-grey-cc: #cccccc;
  --color-grey-aa: #aaaaaa;
  --color-grey-99: #999999;
  --color-grey-88: #888888;
  --color-grey-ad: #adadad; /* kant på en knapp i hover */
  --color-grey-8c: #8c8c8c; /* kant på en knapp i fokus */
  --color-grey-5c: #5c5c5c; /* kartans filterpanel */
  --color-grey-27: #272727; /* sökfältet i menyn */
  --color-black-80: rgb(0 0 0 / 0.8);
  --color-black-20: rgb(0 0 0 / 0.2);
  --color-black-15: rgb(0 0 0 / 0.15);
  --color-black-10: rgb(0 0 0 / 0.1);
  --color-white-20: rgb(255 255 255 / 0.2);
  --color-cookie-bg: #fcf8e3;
  --color-cookie-line: #faebcc;
  --color-cookie-ink: #8a6d3b;
  --color-success: #5cb85c;
  --color-success-line: #4cae4c;
  --color-success-hover: #449d44;
  --color-success-hover-line: #398439;
  --color-form-ink: #555555; /* fält och ikonruta i formuläret */
  --color-form-focus: #66afe9; /* kanten på ett fält i fokus */
  --color-form-focus-glow: rgb(102 175 233 / 0.6);
  --color-form-placeholder: #999999;
  --color-form-choice-active: #adadad; /* kanten runt ett valt svar */
  --color-submit-hover-line: #269abc; /* Skicka i hover och aktiv (Bootstraps btn-info) */
  --color-submit-focus-bg: #31b0d5;
  --color-submit-focus-line: #1b6d85;
  --color-error: #a94442; /* felmeddelande i formuläret */
  --color-twitter: #55acee;
  --color-twitter-hover: #32bbf5;
  --color-facebook: #3b5998;
  --color-facebook-hover: #4273c8;
  --color-success-focus-line: #255625; /* kanten på Fortsätt i fokus */
  --shadow-dropdown: 0 6px 12px rgb(0 0 0 / 0.176);
  --shadow-faq: 0 2px 2px rgb(0 0 0 / 0.1);
  --shadow-field: inset 0 1px 1px rgb(0 0 0 / 0.075); /* fält i formuläret */
  --shadow-pressed: inset 0 3px 5px rgb(0 0 0 / 0.125); /* knapp som trycks ned */

  /* ---- Lager 2: ytor, text och kanter ------------------------------------- */
  --surface-page: var(--color-white);
  --surface-nav: var(--color-black-80);
  --surface-nav-active: var(--color-white-20);
  --surface-search: var(--color-grey-27);
  --surface-card: var(--color-card);
  --surface-footer: var(--color-black);
  --surface-faq: var(--color-grey-f4);
  --surface-map-panel: var(--color-grey-5c);
  --surface-image-empty: var(--color-grey-ee);
  --surface-hero-shade: rgb(0 0 0 / 0.5);
  --surface-cookie: var(--color-cookie-bg);

  --text-body: var(--color-ink);
  --text-title: var(--color-green);
  --text-link: var(--color-orange);
  --text-link-hover: var(--color-orange-hover);
  --text-inverse: var(--color-white);
  --text-muted: var(--color-grey-99);
  --text-letter: var(--color-grey-aa);
  --text-letter-empty: var(--color-grey-dd);
  --text-cookie: var(--color-cookie-ink);
  --text-question: var(--color-black);

  --border-section: var(--color-black-10);
  --border-article: var(--color-black-20);
  --border-card: var(--color-white-20);
  --border-faq: var(--color-grey-cc);
  --border-list: var(--color-grey-dd);
  --border-pill: var(--color-orange-strong);
  --border-cookie: var(--color-cookie-line);

  /* ---- Typsnitt ---------------------------------------------------------- */
  --font-family-heading: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif; /* rubriker, meny, knappar, etiketter */
  --font-family-body: "Merriweather", Georgia, "Times New Roman", Times, serif; /* brödtext och kakruta */
  --font-family-ui: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif; /* sidfotens text */
  --font-weight-light: 300; /* infofönstret på kartan (Roboto) */
  --font-weight-regular: 400;
  --font-weight-medium: 400; /* källans 500 (rubriker, kortrubriker) ritas som 400: Montserrat laddas bara i 400 och 700 */
  --font-weight-bold: 700;

  --fs-10: 1rem; /* menyn från 768 px */
  --fs-12: 1.2rem; /* menyn under 768 px, kategorilistan */
  --fs-13: 1.3rem; /* kakrutan */
  --fs-14: 1.4rem; /* kort, kategorietiketter, formulär, sidfotens text */
  --fs-16: 1.6rem; /* brödtext, knappar */
  --fs-18: 1.8rem; /* filterknapparna */
  --fs-20: 2rem; /* h4, kortrubrik, sidfotsrubrik */
  --fs-22: 2.2rem; /* sociala ikoner */
  --fs-28: 2.8rem; /* h3, kartpanelens rubrik */
  --fs-30: 3rem; /* sektionsrubrik */
  --fs-34: 3.4rem; /* h2 */
  --fs-40: 4rem; /* artikelrubrik, heroens rubrik */

  --lh-body: 1.5;
  --lh-tight: 1.1; /* rubriker */
  --lh-card: 1.5;
  --lh-eyebrow: 1; /* small i sektionsrubriken */

  --fs-body: 16px; /* källans body { font-size: 16px } */
  --font-body: var(--font-weight-regular) var(--fs-body) / var(--lh-body) var(--font-family-body);
  --font-card-text: var(--font-weight-regular) var(--fs-14) / 1.5 var(--font-family-body);
  --font-cookie: var(--font-weight-regular) var(--fs-13) / 1.5 var(--font-family-body);
  --font-footer: var(--font-weight-regular) var(--fs-14) / 1.5 var(--font-family-ui);
  --font-title-card: var(--font-weight-medium) var(--fs-20) / var(--lh-tight) var(--font-family-heading);
  --font-label: var(--font-weight-regular) var(--fs-14) / 1.5 var(--font-family-heading);
  --font-link-more: var(--font-weight-regular) var(--fs-14) / 1.5 var(--font-family-heading);
  --font-section-title: var(--font-weight-bold) var(--fs-30) / var(--lh-tight) var(--font-family-heading);
  --font-button: var(--font-weight-bold) var(--fs-16) / 1.5 var(--font-family-heading);
  --font-nav: var(--font-weight-bold) var(--fs-10) / 2.4rem var(--font-family-heading);

  /* ---- Lager 1: råa mått ---------------------------------------------------- */
  --space-5: 0.5rem;
  --space-10: 1rem;
  --space-12: 1.2rem;
  --space-15: 1.5rem;
  --space-20: 2rem;
  --space-24: 2.4rem;
  --space-30: 3rem;
  --space-34: 3.4rem;
  --space-46: 4.6rem;
  --space-60: 6rem;

  --size-header-height: 6rem; /* fast sidhuvud */
  --size-logo-height: 4rem;
  --size-toggle-width: 4.4rem;
  --size-toggle-height: 3.4rem;
  --size-container-sm: 75rem; /* från 768 px */
  --size-container-md: 97rem; /* från 1085 px */
  --size-container-lg: 117rem; /* från 1200 px */
  --size-teaser-image: 20rem;
  --size-text-columns: 80rem;
  --size-section-title: 70rem;
  --size-image-wide: 114rem;
  --size-map: 40rem;
  --size-map-mobile: 50vh;
  --size-share: 3.5rem;
  --size-social: 4rem;
  --size-search-width: 30rem;
  --size-search-input: 27rem;
  --size-pin-width: 3.3rem;
  --size-pin-height: 3.9rem;
  --size-faq-icon: 1.6rem;
  --size-embed-ratio: 16 / 9;
  --size-embed-card-height: 28.2rem;
  --size-article-hero-sm: 30rem; /* bred bild överst i ett inlägg (källans figure.featured-image-full): höjden under 768 px */
  --size-article-hero-md: 45rem; /* från 768 px */
  --size-article-hero-lg: 55rem; /* från 1085 px */
  --size-article-hero-xl: 65rem; /* från 1200 px */

  --border-width: 1px;
  --border-width-button: 0.2rem;
  --radius-pill: 10rem;
  --radius-toggle: 0.4rem;
  --radius-search: 1.5rem;
  --radius-round: 50%;

  /* ---- Rörelse ------------------------------------------------------------- */
  --duration-cookie: 500ms;
  --z-hero-shade: 1;
  --z-map: 4;
  --z-header: 5;
  --z-cookie: 999;

  /* ---- Breddgränser (källan: 768, 1085 och 1200 px). Dokumentation: @media kan inte läsa dem. ---- */
  --bp-sm: 768px; /* tre kolumner, container 750 px, sidfot i tre kolumner */
  --bp-nav: 1085px; /* menyn byter från hamburgare till rad, container 970 px, två frågekolumner */
  --bp-lg: 1200px; /* container 1170 px */
}