/*
=========================================================
VARIABLES CSS
=========================================================
 * Innehåller centrala utseende inställningar med CSS-variabler 
 *
 * Copyright (C) Limepark AB.
 * https://limepark.se/licensvillkor
=========================================================*/

/* stylelint-disable */

/*
---------------------------------------------------------
VARIABLER UTAN KOPPLING TILL TEMAT
--------------------------------------------------------- */

/* Dessa kan med fördel anpassas efter designen */

body {
  /* Kantlinje */
  --lp-border-color-default: rgba(231,225,213, 0.8); /* Används för exempelvis inputs eller sådant som har ett kontrastkrav på 3:1 */
  --lp-border-color-default-dark: rgba(203,194,181, 0.8); /* Mörkare variant av variabeln ovan, används vid hover/fokus */
  /* Fokus */
  --lp-focus-shadow: 0 0 0 0.4rem rgba(0,0,0,0.15); /* Fokusskugga, används på bl.a inputs och bör anpassas efter temat. Ej kopplad till inställningarna */
  /* Textstorlekar - Bör synkas med inställningarna i formatmallarna (se under sektionen "Avancerat" */
  --lp-font-size-1: clamp(1.4rem,1.6vw,1.6rem); /* Liten text */
  --lp-font-size-2: clamp(1.6rem,1.8vw,1.8rem); /* Brödtext */
  --lp-font-size-3: clamp(1.8rem,2.2vw,2.2rem); /* Ingress & H3 */
  --lp-font-size-4: clamp(2.2rem,3.2vw,3.2rem); /* H2 */
  --lp-font-size-5: clamp(2.6rem,4.6vw,4.6rem); /* H1 */
  /* Layout*/
  --lp-grid-default: repeat(auto-fill,minmax(min(32rem, 100%), 1fr)); /* Generellt upplägg för ett responsivt grid, används i kombination med grid-template-columns. */
  /* Avstånd (Margin, padding, grid-gap) */
  --lp-spacing: 3rem; /* Minskas i värde i tablet och smartphone */
  --lp-spacing-large: calc(var(--lp-spacing) * 1.5);
  --lp-spacing-small: calc(var(--lp-spacing) * 0.75);
  --lp-spacing-x-large: calc(var(--lp-spacing) * 2);
  --lp-spacing-x-small: calc(var(--lp-spacing) * 0.5);
  --lp-spacing-xx-large: calc(var(--lp-spacing) * 3);
  --lp-spacing-xx-small: calc(var(--lp-spacing) * 0.25);
  /* Effekter */
  --lp-transition-default: all 0.3s ease; /* Generell transition, ej kopplad till temainställningarna */
  /* Skuggning */
  --lp-box-shadow: 0px 4px 30px rgba(52, 64, 85, 0.15);
}

/*
---------------------------------------------------------
TEMAVARIABLER
--------------------------------------------------------- */

body {
  /* Bakgrundsfärger */
  --lp-background-color-body: var(--env-background-color); /* Bakgrundsfärg på hela webbplatsen */
  --lp-background-color-section: var(--env-section-background-color); /* Bakgrundsfärg för en sektion */
  /* Kantlinje */
  --lp-badge-border-radius: var(--env-badge-border-radius); /* Kantradie på etiketter & taggar */
  --lp-border-color: var(--env-border-color); /* Generell färg för kantlinjer */
  --lp-border-radius: var(--env-border-radius); /* Generell kantradie för webbplatsen */
  --lp-button-border-radius: var(--env-button-border-radius); /* Kantradie på knappar */
  /* Element primary */
  --lp-color-1: var(--env-element-primary-background-color); /* Bakgrundsfärg */
  --lp-color-1-contrast: var(--env-element-primary-font-color); /* Textfärg/kontrastfärg */
  --lp-color-1-dark: var(--env-element-primary-background-color-dark); /* Mörkare variant av bakgrund, genereras automatiskt */
  --lp-color-1-light: var(--env-element-primary-background-color-light); /* Ljusare variant av bakgrund, genereras automatiskt */
  /* Element default */
  --lp-color-2: var(--env-element-background-color); /* Bakgrundsfärg */
  --lp-color-2-contrast: var(--env-element-font-color); /* Textfärg/kontrastfärg */
  --lp-color-2-dark: var(--env-element-background-color-dark); /* Mörkare variant av bakgrund, genereras automatiskt */
  --lp-color-2-light: var(--env-element-background-color-light); /* Ljusare variant av bakgrund, genereras automatiskt */
  /* Element secondary */
  --lp-color-3: var(--env-element-secondary-background-color); /* Bakgrundsfärg */
  --lp-color-3-contrast: var(--env-element-secondary-font-color); /* Textfärg/kontrastfärg */
  --lp-color-3-dark: var(--env-element-secondary-background-color-dark); /* Mörkare variant av bakgrund, genereras automatiskt */
  --lp-color-3-light: var(--env-element-secondary-background-color-light); /* Ljusare variant av bakgrund, genereras automatiskt */
  /* Block default */
  --lp-color-4: var(--env-block-background-color); /* Bakgrundsfärg */
  --lp-color-4-border: var(--env-block-border-color); /* Färg på blockets kantlinje */
  --lp-color-4-contrast: var(--env-block-font-color); /* Textfärg/kontrastfärg */
  --lp-color-4-link: var(--env-block-link-font-color); /* Länkfärg specifikt för blocket */
  --lp-color-4-link-hover: var(--env-block-link-hover-font-color); /* Länkfärg vid hover specifikt för blocket */
  /* Block primary */
  --lp-color-5: var(--env-block-primary-background-color); /* Bakgrundsfärg */
  --lp-color-5-border: var(--env-block-primary-border-color); /* Färg på blockets kantlinje */
  --lp-color-5-contrast: var(--env-block-primary-font-color); /* Textfärg/kontrastfärg */
  --lp-color-5-link: var(--env-block-primary-link-font-color); /* Länkfärg specifikt för blocket */
  --lp-color-5-link-hover: var(--env-block-primary-link-hover-font-color); /* Länkfärg vid hover specifikt för blocket */
  /* Block secondary */
  --lp-color-6: var(--env-block-secondary-background-color); /* Bakgrundsfärg */
  --lp-color-6-border: var(--env-block-secondary-border-color); /* Färg på blockets kantlinje */
  --lp-color-6-contrast: var(--env-block-secondary-font-color); /* Textfärg/kontrastfärg */
  --lp-color-6-link: var(--env-block-secondary-link-font-color); /* Länkfärg specifikt för blocket */
  --lp-color-6-link-hover: var(--env-block-secondary-link-hover-font-color); /* Länkfärg vid hover specifikt för blocket */
  /* Brand color */
  --lp-color-brand: var(--env-ui-color-brand);
  --lp-color-brand-contrast: var(--env-ui-color-brand-contrast);
  /* Element danger */
  --lp-color-danger: var(--env-element-danger-background-color); /* Bakgrundsfärg */
  --lp-color-danger-contrast: var(--env-element-danger-font-color); /* Textfärg/kontrastfärg */
  --lp-color-danger-dark: var(--env-element-danger-background-color-dark); /* Mörkare variant av bakgrund, genereras automatiskt */
  --lp-color-danger-light: var(--env-element-danger-background-color-light); /* Ljusare variant av bakgrund, genereras automatiskt */
  /* Element info */
  --lp-color-info: var(--env-element-info-background-color); /* Bakgrundsfärg */
  --lp-color-info-contrast: var(--env-element-info-font-color); /* Textfärg/kontrastfärg */
  --lp-color-info-dark: var(--env-element-info-background-color-dark); /* Mörkare variant av bakgrund, genereras automatiskt */
  --lp-color-info-light: var(--env-element-info-background-color-light); /* Ljusare variant av bakgrund, genereras automatiskt */
  /* Element success */
  --lp-color-success: var(--env-element-success-background-color); /* Bakgrundsfärg */
  --lp-color-success-contrast: var(--env-element-success-font-color); /* Textfärg/kontrastfärg */
  --lp-color-success-dark: var(--env-element-success-background-color-dark); /* Mörkare variant av bakgrund, genereras automatiskt */
  --lp-color-success-light: var(--env-element-success-background-color-light); /* Ljusare variant av bakgrund, genereras automatiskt */
  /* Element warning */
  --lp-color-warning: var(--env-element-warning-background-color); /* Bakgrundsfärg */
  --lp-color-warning-contrast: var(--env-element-warning-font-color); /* Textfärg/kontrastfärg */
  --lp-color-warning-dark: var(--env-element-warning-background-color-dark); /* Mörkare variant av bakgrund, genereras automatiskt */
  --lp-color-warning-light: var(--env-element-warning-background-color-light); /* Ljusare variant av bakgrund, genereras automatiskt */
  /* Typsnitt */
  --lp-font-color: var(--env-font-color); /* Generell textfärg på webbplatsen, bör baseras på brödtext */
  --lp-font-family: var(--env-font-family); /* Generellt typsnitt på webbplatsen, bör baseras på brödtext */
  /* Länkar */
  --lp-link-color: var(--env-link-font-color); /* Generell länkfärg på webbplatsen */
  --lp-link-color-hover: var(--env-link-hover-font-color); /* Generell länkfärg vid hover på webbplatsen */
}

/*
---------------------------------------------------------
TEMAKOPPLADE INSTÄLLNINGAR
--------------------------------------------------------- */

/* Det finns också möjlighet att sätta upp variabler kopplade till ett tema
   likt exemplet nedan

[class='sv-theme-Standardtema'] {
  --lp-color-7: #000;
}

*/