/* ================================================
   Integrum OPRA Theme — typography.css
   Updated: 2026-03-06 13:15:00
   ================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
  /* Font family */
  --font-primary: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  
  /* Font weights */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  
  /* Heading 1 */
  --text-h1-size: 56px;
  --text-h1-weight: 600;
  --text-h1-lh: 1.1;
  --text-h1-ls: -0.02em;
  
  /* Heading 2 */
  --text-h2-size: 40px;
  --text-h2-weight: 600;
  --text-h2-lh: 1.1;
  --text-h2-ls: -0.02em;
  
  /* Heading 3 */
  --text-h3-size: 28px;
  --text-h3-weight: 600;
  --text-h3-lh: 1.3;
  --text-h3-ls: -0.01em;
  
  /* Heading 4 */
  --text-h4-size: 20px;
  --text-h4-weight: 600;
  --text-h4-lh: 1.4;
  
  /* Body text - Large */
  --text-body-lg-size: 20px;
  --text-body-lg-weight: 400;
  --text-body-lg-lh: 1.6;
  
  /* Body text - Medium */
  --text-body-md-size: 16px;
  --text-body-md-weight: 400;
  --text-body-md-lh: 1.6;
  
  /* Body text - Small */
  --text-body-sm-size: 14px;
  --text-body-sm-weight: 400;
  --text-body-sm-lh: 1.5;
  
  /* Color palette */
  /* Module typography — change here to update all modules at once */
  --module-label-size: 11px;
  --module-label-weight: 500;
  --module-label-spacing: 0.08em;
  --module-headline-ls: -0.01em;
  --module-body-weight: 400;

  --color-primary-dark: #1a6b50;
  --color-primary-light: #A8D5BA;
  --color-secondary-dark: #00467d;
  --color-accent-purple: #C9A0B6;
  
  --color-bg-default: #FFFFFF;
  --color-bg-subtle: #F8F9FA;
  
  --color-text-primary: #1a1a1a;
  --color-text-muted: #666666;
  
  /* Spacing */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;
  --space-3xl: 96px;
  
  /* Border radius */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 50px;
  
  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.12);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.16);
  
  /* Container */
  /* Spatial system — designed for 1440px desktop, flows wider on larger screens */
  --edge-padding: 45px;            /* skärmkant → content-start */
  --container-edge: 1350px;        /* 1440-(45x2): hero-text, karusell, edge-element */
  --container-content: 1040px;     /* standard-moduler: text, 2-kol, cards */
  --container-nav: 1020px;         /* nav-pill total bredd inkl rundade hörn */
  --container-padding: 48px;       /* standard sidmarginal (behålls) */
}

/* Base styles */
html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-primary);
  font-size: var(--text-body-md-size);
  font-weight: var(--text-body-md-weight);
  line-height: var(--text-body-md-lh);
  color: var(--color-text-primary);
  background-color: var(--color-bg-default);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings */
h1 {
  font-size: var(--text-h1-size);
  font-weight: var(--text-h1-weight);
  line-height: var(--text-h1-lh);
  letter-spacing: var(--text-h1-ls);
  font-family: var(--font-primary);
}

h2 {
  font-size: var(--text-h2-size);
  font-weight: var(--text-h2-weight);
  line-height: var(--text-h2-lh);
  letter-spacing: var(--text-h2-ls);
  font-family: var(--font-primary);
}

h3 {
  font-size: var(--text-h3-size);
  font-weight: var(--text-h3-weight);
  line-height: var(--text-h3-lh);
  letter-spacing: var(--text-h3-ls);
  font-family: var(--font-primary);
}

h4 {
  font-size: var(--text-h4-size);
  font-weight: var(--text-h4-weight);
  line-height: var(--text-h4-lh);
  font-family: var(--font-primary);
}

/* Body text utilities */
.body-lg {
  font-size: var(--text-body-lg-size);
  font-weight: var(--text-body-lg-weight);
  line-height: var(--text-body-lg-lh);
}

.body-md {
  font-size: var(--text-body-md-size);
  font-weight: var(--text-body-md-weight);
  line-height: var(--text-body-md-lh);
}

.body-sm {
  font-size: var(--text-body-sm-size);
  font-weight: var(--text-body-sm-weight);
  line-height: var(--text-body-sm-lh);
}

/* ---- Containers ---- */

/* Default: inner content width (text, 2-col) */
.container {
  width: 100%;
  max-width: var(--container-content);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  box-sizing: border-box;
}

/* Edge: hero-text, karusell (1350px) */
.container--edge {
  width: 100%;
  max-width: var(--container-edge);
  margin-inline: auto;
  padding-inline: var(--edge-padding);
  box-sizing: border-box;
}

/* Full bleed: no max-width, no padding */
.container--full {
  width: 100%;
  box-sizing: border-box;
}}

/* ================================================
   Global button styles — shared across all modules
   Updated: 2026-03-31

   All modules use these classes. Variants:
     --primary      glass white (for dark/hero bg)
     --outline      glass outline (for dark/hero bg)
     --green        solid teal (all backgrounds)
     --outline-dark teal outline (for light bg)
     --solid        solid dark green (for light bg)

   Hover states are defined in each module.css
   ================================================ */

/* Base — shared by all modules */
.module-hero__btn,
.module-2col__btn,
.module-text-content__btn,
.module-cards-grid__btn,
.module-image-stack__btn {
  display: inline-block;
  padding: 9px 24px;
  border-radius: 100px;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.03em;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  line-height: 1.2;
}

/* --primary: glass white — for dark/hero backgrounds */
.module-hero__btn--primary,
.module-2col__btn--primary,
.module-text-content__btn--primary,
.module-cards-grid__btn--primary,
.module-image-stack__btn--primary {
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.4);
  color: #ffffff;
}

/* --outline: glass outline — for dark/hero backgrounds */
.module-hero__btn--outline,
.module-2col__btn--outline,
.module-text-content__btn--outline,
.module-cards-grid__btn--outline,
.module-image-stack__btn--outline {
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.5);
  color: #ffffff;
}

/* --green: solid teal — works on all backgrounds */
.module-hero__btn--green,
.module-2col__btn--green,
.module-text-content__btn--green,
.module-cards-grid__btn--green,
.module-image-stack__btn--green {
  background: #2a9090;
  border: none;
  color: #ffffff;
}

/* --outline-dark: teal outline — for light backgrounds */
.module-hero__btn--outline-dark,
.module-2col__btn--outline-dark,
.module-text-content__btn--outline-dark,
.module-cards-grid__btn--outline-dark,
.module-image-stack__btn--outline-dark {
  background: transparent;
  border: 2px solid #2a9090;
  color: #2a9090;
}

/* --solid: dark green — for light backgrounds */
.module-hero__btn--solid,
.module-2col__btn--solid,
.module-text-content__btn--solid,
.module-cards-grid__btn--solid,
.module-image-stack__btn--solid {
  background: var(--color-primary-dark);
  border: none;
  color: #ffffff;
}