/*
=========================================================
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 */

html body {
  /* Kantlinje */
  --lp-border-color-default: rgba(0,0,0,0.418); /* Används för exempelvis inputs eller sådant som har ett kontrastkrav på 3:1 */
  --lp-border-color-default-dark: rgba(0,0,0,1); /* Mörkare variant av variabeln ovan, används vid hover/fokus */
  --lp-color-blue: #052eec;
  --lp-color-blue--contrast: #fff;
  --lp-color-blue--hover: #1e43ee;
  --lp-color-bronze: #a47e24;
  --lp-color-bronze--contrast: #000;
  --lp-color-gold: #f9da09;
  --lp-color-gold--contrast: #000;
  --lp-color-silver: #b8b8b8;
  --lp-color-silver--contrast: #000;
  /* Fokus */
  --lp-focus-shadow: 0 0 0 0.4rem rgb(4 7 39 / 50%); /* Fokusskugga, används på bl.a inputs och bör anpassas efter temat. Ej kopplad till inställningarna */
  /* Färger */
  --lp-font-color--blue: #052eec;
  --lp-font-color--dark-blue: #040e5e;
  --lp-font-color--gold: #f9da09;
  --lp-font-color--light-blue: #c0d5ff;
  /* Fontfamilj */
  --lp-font-family--heading: 'neue haas grotesk display';
  /* Textstorlekar - Bör synkas med inställningarna i formatmallarna (se under sektionen "Avancerat" */
  --lp-font-size-large: clamp(2.4rem, 2.4vw, 3.6rem); /* H2 */
  --lp-font-size-medium: clamp(2rem, 2vw, 2.4rem); /* Ingress & H3 */
  --lp-font-size-small: clamp(1.6rem, 1.6vw, 1.9rem); /* Brödtext */
  --lp-font-size-x-large: clamp(5rem, 5vw, 7.2rem); /* H1 */
  --lp-font-size-x-small: clamp(1.4rem,1.5vw,1.5rem); /* Liten text */
  /* Layout*/
  --lp-grid-default: repeat(auto-fill,minmax(min(28rem, 100%), 1fr)); /* Generellt upplägg för ett responsivt grid, används i kombination med grid-template-columns. */
  --lp-grid-margin: calc((100vw - var(--lp-grid-width)) / 2);
  --lp-grid-width: min(95vw, 1290px);
  /* Avstånd (Margin, padding, grid-gap) */
  --lp-spacing: clamp(2rem, 2.5vw, 3rem); /* Minskas i värde i tablet och smartphone */
  --lp-spacing-large: clamp(3rem, 4vw, 5rem);
  --lp-spacing-small: clamp(1.5rem, 2vw, 2.5rem);
  --lp-spacing-x-large: clamp(5rem, 6vw, 8rem);
  --lp-spacing-x-small: clamp(1rem, 1.5vw, 2rem);
  --lp-spacing-xx-large: clamp(8rem, 10vw, 14.4rem);
  --lp-spacing-xx-small: clamp(1rem, 1vw, 1.5rem);
  /* Effekter */
  --lp-transition-default: all 0.3s ease; /* Generell transition, ej kopplad till temainställningarna */
}

@supports (container-type: inline-size) {
  html body {
    --lp-grid-margin: calc((100cqw - var(--lp-grid-width)) / 2);
    --lp-grid-width: min(95cqw, 1290px);
  }
}

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

body[class*='sv-theme'] {
  /* Brickor */
  --lp-badge-border-radius: var(--env-badge-border-radius); /* Kantradie på etiketter & taggar */
  /* Block default */
  --lp-block--background: var(--env-block-background-color); /* Bakgrundsfärg */
  --lp-block--border-color: var(--env-block-border-color); /* Färg på blockets kantlinje */
  --lp-block--contrast: var(--env-block-font-color); /* Textfärg/kontrastfärg */
  --lp-block--link-color: var(--env-block-link-font-color); /* Länkfärg specifikt för blocket */
  --lp-block--link-color-hover: var(--env-block-link-hover-font-color); /* Länkfärg vid hover specifikt för blocket */
  /* Block primary */
  --lp-block-primary--background: var(--env-block-primary-background-color); /* Bakgrundsfärg */
  --lp-block-primary--border-color: var(--env-block-primary-border-color); /* Färg på blockets kantlinje */
  --lp-block-primary--contrast: var(--env-block-primary-font-color); /* Textfärg/kontrastfärg */
  --lp-block-primary--link-color: var(--env-block-primary-link-font-color); /* Länkfärg specifikt för blocket */
  --lp-block-primary--link-color-hover: var(--env-block-primary-link-hover-font-color); /* Länkfärg vid hover specifikt för blocket */
  /* Block secondary */
  --lp-block-secondary--background: var(--env-block-secondary-background-color); /* Bakgrundsfärg */
  --lp-block-secondary--border-color: var(--env-block-secondary-border-color); /* Färg på blockets kantlinje */
  --lp-block-secondary--contrast: var(--env-block-secondary-font-color); /* Textfärg/kontrastfärg */
  --lp-block-secondary--link-color: var(--env-block-secondary-link-font-color); /* Länkfärg specifikt för blocket */
  --lp-block-secondary--link-color-hover: var(--env-block-secondary-link-hover-font-color); /* Länkfärg vid hover specifikt för blocket */
  /* Body */
  --lp-body--background: var(--env-background-color); /* Bakgrundsfärg på hela webbplatsen */
  /* Kantlinje */
  --lp-border-color: var(--env-border-color); /* Generell färg för kantlinjer */
  /* Border-radius */
  --lp-border-radius: var(--env-border-radius); /* Generell kantradie för webbplatsen */
  --lp-button-border-radius: var(--env-button-border-radius); /* Kantradie på knappar */
  /* Brand color */
  --lp-color-brand: var(--env-ui-color-brand);
  --lp-color-brand-contrast: var(--env-ui-color-brand-contrast);
  /* Element default */
  --lp-element--background: var(--env-element-background-color); /* Bakgrundsfärg */
  --lp-element--background-dark: var(--env-element-background-color-dark); /* Mörkare variant av bakgrund, genereras automatiskt */
  --lp-element--background-light: var(--env-element-background-color-light); /* Ljusare variant av bakgrund, genereras automatiskt */
  --lp-element--contrast: var(--env-element-font-color); /* Textfärg/kontrastfärg */
  /* Element danger */
  --lp-element-danger--background: var(--env-element-danger-background-color); /* Bakgrundsfärg */
  --lp-element-danger--background-dark: var(--env-element-danger-background-color-dark); /* Mörkare variant av bakgrund, genereras automatiskt */
  --lp-element-danger--background-light: var(--env-element-danger-background-color-light); /* Ljusare variant av bakgrund, genereras automatiskt */
  --lp-element-danger--contrast: var(--env-element-danger-font-color); /* Textfärg/kontrastfärg */
  /* Element info */
  --lp-element-info--background: var(--env-element-info-background-color); /* Bakgrundsfärg */
  --lp-element-info--background-dark: var(--env-element-info-background-color-dark); /* Mörkare variant av bakgrund, genereras automatiskt */
  --lp-element-info--background-light: var(--env-element-info-background-color-light); /* Ljusare variant av bakgrund, genereras automatiskt */
  --lp-element-info--contrast: var(--env-element-info-font-color); /* Textfärg/kontrastfärg */
  /* Element primary */
  --lp-element-primary--background: var(--env-element-primary-background-color); /* Bakgrundsfärg */
  --lp-element-primary--background-dark: var(--env-element-primary-background-color-dark); /* Mörkare variant av bakgrund, genereras automatiskt */
  --lp-element-primary--background-light: var(--env-element-primary-background-color-light); /* Ljusare variant av bakgrund, genereras automatiskt */
  --lp-element-primary--contrast: var(--env-element-primary-font-color); /* Textfärg/kontrastfärg */
  /* Element secondary */
  --lp-element-secondary--background: var(--env-element-secondary-background-color); /* Bakgrundsfärg */
  --lp-element-secondary--background-dark: var(--env-element-secondary-background-color-dark); /* Mörkare variant av bakgrund, genereras automatiskt */
  --lp-element-secondary--background-light: var(--env-element-secondary-background-color-light); /* Ljusare variant av bakgrund, genereras automatiskt */
  --lp-element-secondary--contrast: var(--env-element-secondary-font-color); /* Textfärg/kontrastfärg */
  /* Element success */
  --lp-element-success--background: var(--env-element-success-background-color); /* Bakgrundsfärg */
  --lp-element-success--background-dark: var(--env-element-success-background-color-dark); /* Mörkare variant av bakgrund, genereras automatiskt */
  --lp-element-success--background-light: var(--env-element-success-background-color-light); /* Ljusare variant av bakgrund, genereras automatiskt */
  --lp-element-success--contrast: var(--env-element-success-font-color); /* Textfärg/kontrastfärg */
  /* Element warning */
  --lp-element-warning--background: var(--env-element-warning-background-color); /* Bakgrundsfärg */
  --lp-element-warning--background-dark: var(--env-element-warning-background-color-dark); /* Mörkare variant av bakgrund, genereras automatiskt */
  --lp-element-warning--background-light: var(--env-element-warning-background-color-light); /* Ljusare variant av bakgrund, genereras automatiskt */
  --lp-element-warning--contrast: var(--env-element-warning-font-color); /* Textfärg/kontrastfärg */
  /* 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 */
  /* Sektion */
  --lp-section--background: var(--env-section-background-color); /* Bakgrundsfärg för en sektion */
}

/*
---------------------------------------------------------
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;
}

*/