/* ==========================================================================
   THEME TOKENS (Design System) adapted for Bootstrap 5
   ========================================================================= */

/* ==========================================================================
   FONTS (self-hosted)
   ========================================================================= */
/* Use local fonts (WOFF) when present. */
@font-face { font-family: "Roboto"; src: url("/wp-content/themes/biv2/assets/fonts/Roboto/static/Roboto-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("/wp-content/themes/biv2/assets/fonts/Roboto/static/Roboto-Medium.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("/wp-content/themes/biv2/assets/fonts/Roboto/static/Roboto-Bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("/wp-content/themes/biv2/assets/fonts/Archivo/static/Archivo-SemiBold.woff") format("woff"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("/wp-content/themes/biv2/assets/fonts/Archivo/static/Archivo-Bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }

/* Root tokens */
:root {
  /* Brand colors */
  --brand-green: #008A4F;
  --brand-green-light: #CDE7CA;

  --brand-blue: #005BAA;
  --brand-blue-light: #D4E3F5;

  --brand-purple: #712D7D;
  --brand-purple-light: #FBD4DA;

  --brand-yellow: #FFC818;
  --brand-yellow-light: #FFEACC;

  /* Greyscale */
  --grey-tint: #F5F5F5;
  --grey-ultralight: #F0F0F0;
  --grey-light: #E0E0E0;
  --grey-medium: #707070;
  --grey-dark: #121212;

  /* Complement palette */
  --comp-1: #160829;
  --comp-2: #2D213E;
  --comp-3: #6C6477;
  --comp-4: #875191;

  /* Typography families */
  --font-sans-1: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-sans-2: "Archivo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  /* Weights */
  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700;

  /* Type scale (desktop default) */
  /*
  --fs-h1: 48px; --lh-h1: 56px;
  --fs-h2: 32px; --lh-h2: 42px;
  --fs-h3: 20px; --lh-h3: 30px;
  --fs-h4: 16px; --lh-h4: 24px;
  --fs-body1: 16px; --lh-body1: 28px;
  --fs-body2: 18px; --lh-body2: 30px;
  --fs-link: 16px;  --lh-link: 28px;
  --fs-button: 16px; --lh-button: 20px;
  */

  --fs-h1: 3rem;      /* 48px / 16 */
  --lh-h1: 3.5rem;    /* 56px / 16 */

  --fs-h2: 2rem;      /* 32px / 16 */
  --lh-h2: 2.625rem;  /* 42px / 16 */

  --fs-h3: 1.25rem;   /* 20px / 16 */
  --lh-h3: 1.875rem;  /* 30px / 16 */

  --fs-h4: 1rem;      /* 16px / 16 */
  --lh-h4: 1.5rem;    /* 24px / 16 */

  --fs-body1: 1rem;   /* 16px / 16 */
  --lh-body1: 1.75rem;/* 28px / 16 */

  --fs-body2: 1.125rem; /* 18px / 16 */
  --lh-body2: 1.875rem; /* 30px / 16 */

  --fs-link: 1rem;    /* 16px / 16 */
  --lh-link: 1.75rem; /* 28px / 16 */

  --fs-button: 1rem;  /* 16px / 16 */
  --lh-button: 1.25rem; /* 20px / 16 */  

  /* Spacing scale */
  /*
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-80: 80px;
  --space-120: 120px;
  */
  --space-4: 0.25rem;     /* 4px / 16 */
  --space-8: 0.5rem;      /* 8px / 16 */
  --space-12: 0.75rem;    /* 12px / 16 */
  --space-16: 1rem;       /* 16px / 16 */
  --space-24: 1.5rem;     /* 24px / 16 */
  --space-32: 2rem;       /* 32px / 16 */
  --space-40: 2.5rem;     /* 40px / 16 */
  --space-48: 3rem;       /* 48px / 16 */
  --space-56: 3.5rem;     /* 56px / 16 */
  --space-64: 4rem;       /* 64px / 16 */
  --space-80: 5rem;       /* 80px / 16 */
  --space-120: 7.5rem;    /* 120px / 16 */  

  /* Grid tokens */
  /*
  --grid-desktop-columns: 12;
  --grid-desktop-margin: 80px;
  --grid-desktop-gutter: 24px;
  --grid-desktop-max: 1440px;

  --grid-tablet-columns: 6;
  --grid-tablet-margin: 32px;
  --grid-tablet-gutter: 16px;

  --grid-mobile-columns: 4;
  --grid-mobile-margin: 16px;
  --grid-mobile-gutter: 16px;
  */
  --grid-desktop-columns: 12;
  --grid-desktop-margin: 5rem;   /* 80px / 16 */
  --grid-desktop-gutter: 1.5rem; /* 24px / 16 */
  --grid-desktop-max: 90rem;     /* 1440px / 16 */

  --grid-tablet-columns: 6;
  --grid-tablet-margin: 2rem;    /* 32px / 16 */
  --grid-tablet-gutter: 1rem;    /* 16px / 16 */

  --grid-mobile-columns: 4;
  --grid-mobile-margin: 1rem;    /* 16px / 16 */
  --grid-mobile-gutter: 1rem;    /* 16px / 16 */


  /* Misc */
  /*
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-circle: 100px;
  */
  --radius-xl: 1rem;        /* 16px / 16 */
  --radius-2xl: 1.5rem;     /* 24px / 16 */
  --radius-circle: 6.25rem; /* 100px / 16 */

  /* Focus ring tokens */
  /*
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  */
  --focus-ring-width: 0.125rem;  /* 2px / 16 */
  --focus-ring-offset: 0.125rem; /* 2px / 16 */
  --focus-ring-color-light: #005BAA;
  --focus-ring-color-dark: #FFFFFF;
  --focus-ring-color: var(--focus-ring-color-light);

  /* Default text color/background */
  --text: var(--grey-dark);
  --bg: #ffffff;

  /* Bootstrap CSS variable bridge */
  --bs-primary: var(--brand-blue);
  --bs-success: var(--brand-green);
  --bs-warning: var(--brand-yellow);
  --bs-body-font-family: var(--font-sans-1);
  --bs-body-color: var(--text);
  --bs-body-bg: var(--bg);
  --bs-link-color: var(--brand-blue);
  --bs-link-hover-color: var(--brand-blue);
  --bs-border-radius-lg: var(--radius-xl);
  --bs-border-radius-xl: var(--radius-2xl);
}

/* Mobile type overrides */
@media (max-width: 719px) {
  :root {
    --fs-h1: 32px; --lh-h1: 40px;
    --fs-h2: 24px; --lh-h2: 30px;
    --fs-h3: 20px; --lh-h3: 28px;
    --fs-h4: 16px; --lh-h4: 24px;
  }
}

/* **************** */
/*                  */ 
/*    Dark Theme    */
/*                  */ 
/* **************** */
@media (prefers-color-scheme: dark) {
  :root {

    /* Brand colors */
    --brand-green: #00B471;        /* mer lysande på mörk bakgrund */
    --brand-green-light: #3DAA82;  /* dämpad, men fortfarande synlig */

    --brand-blue: #3390FF;         /* klar blå på mörk bakgrund */
    --brand-blue-light: #000000; /* #5FA8FF; */  /* dämpad ljusblå */
     
    --brand-purple: #000000; /*#C47ED8;  */     /* lila ton som syns mot mörkt */
    --brand-purple-light: #1E1E1E; /*#E7B3E0; */ /* ljusare lila, mild mot bakgrund */

    --brand-yellow: #FFD660;       /* mild gul som syns utan att blända */
    --brand-yellow-light: #FFE89B; /* ljusgul men mjuk mot mörkt */

    /* Greyscale */
    --grey-tint: #1E1E1E;          /* ljusast bakgrund i dark mode */
    --grey-ultralight: #2A2A2A;
    --grey-light: #3C3C3C;
    --grey-medium: #A0A0A0;        /* text på mörk bakgrund */
    --grey-dark: #F5F5F5;          /* text eller highlights */

    /* Complement palette */
    --comp-1: #000000; /* #2E163E; */            /* mörk ton som bakgrund / accent */
    --comp-2: #1E1E1E; /* #3F2A59; */            /* mörk accent */
    --comp-3: #FFFFFF; /* #8F8395; */            /* dämpad komplementfärg */
    --comp-4: #FFFFFF; /* #B88ACC; */            /* mild komplementfärg, synlig på mörkt */

    /* Focus ring tokens */
    --focus-ring-color-light: #3390FF; /* ljusblå som syns mot mörk bakgrund */
    --focus-ring-color-dark: var(--text);  /* mörk variant för element med ljus text/färg */
    --focus-ring-color: var(--focus-ring-color-light);

    /* Default text color/background */
    --text: var(--grey-dark);
    --bg: #121212;

    /* Bootstrap CSS variable bridge */
    --bs-primary: var(--brand-blue);
    --bs-success: var(--brand-green);
    --bs-warning: var(--brand-yellow);
    --bs-body-color: var(--text);
    --bs-body-bg: var(--bg);
    --bs-link-color: var(--brand-blue);
    --bs-link-hover-color: var(--brand-blue);

  }
}