/* ========================================================================
   ULAB IT PARTNER — colors & type
   Source: Ulab grafisk manual (10 pages) + live ulabitpartner.se
   ======================================================================== */

/* Type loaded from Google Fonts — exact matches to the brand manual */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Noto+Serif:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  /* -------- BRAND COLORS (from the printed manual) -------- */

  /* Primary */
  --ulab-navy:        #00365f;  /* Pantone 2955 — primary brand color */
  --ulab-blue:        #0075bd;  /* Pantone 2174 — secondary, links */
  --ulab-coral:       #e8503e;  /* Pantone 7625 — single warm accent */

  /* Accent / neutrals */
  --ulab-cool-grey:   #f6f6f6;  /* "Svart 5%" cool — page background */
  --ulab-cream:       #f4f0ea;  /* warm cream — section background */
  --ulab-mint:        #66bbb0;  /* Pantone 563 — optional sage accent */

  /* Pure */
  --ulab-white:       #ffffff;
  --ulab-black:       #111315;  /* not pure black — slightly warm ink */

  /* -------- SEMANTIC FOREGROUND / BACKGROUND -------- */
  --bg:               var(--ulab-white);
  --bg-soft:          var(--ulab-cool-grey);
  --bg-warm:          var(--ulab-cream);
  --bg-inverse:       var(--ulab-navy);

  --fg:               var(--ulab-navy);          /* default ink */
  --fg-muted:         #4d6577;                   /* navy, ~60% */
  --fg-subtle:        #7d8b97;                   /* navy, ~40% */
  --fg-on-dark:       var(--ulab-white);
  --fg-on-dark-muted: #b8c8d6;

  --link:             var(--ulab-blue);
  --link-hover:       var(--ulab-navy);

  --accent:           var(--ulab-coral);
  --accent-soft:      var(--ulab-mint);

  /* -------- BORDERS, RADII, SHADOWS -------- */
  --border:           #e6e6e6;
  --border-strong:    #c8d0d8;
  --border-on-dark:   rgba(255,255,255,.16);

  --radius-card:      6px;
  --radius-button:    4px;
  --radius-pill:      999px;
  --radius-circle:    50%;

  --shadow-card:      0 1px 2px rgba(0,54,95,.06), 0 8px 24px rgba(0,54,95,.06);
  --shadow-card-hover:0 2px 4px rgba(0,54,95,.08), 0 14px 36px rgba(0,54,95,.10);
  --shadow-modal:     0 16px 48px rgba(0,54,95,.18);

  /* -------- SPACING (8pt base) -------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* -------- LAYOUT -------- */
  --container-max:    1140px;
  --container-narrow: 720px;
  --gutter:           24px;
  --header-height:    72px;

  /* -------- MOTION -------- */
  --ease:             cubic-bezier(.22,.61,.36,1);
  --dur-fast:         150ms;
  --dur:              200ms;
  --dur-slow:         400ms;

  /* -------- TYPE FAMILIES -------- */
  --font-serif:       "Noto Serif", Georgia, "Times New Roman", serif;
  --font-sans:        "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:        ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* -------- TYPE SCALE -------- */
  --t-display: clamp(40px, 5.5vw, 72px);
  --t-h1:      clamp(32px, 4vw, 48px);
  --t-h2:      clamp(26px, 3vw, 36px);
  --t-h3:      22px;
  --t-h4:      18px;
  --t-body:    16px;
  --t-small:   14px;
  --t-caption: 12px;
  --t-eyebrow: 12px;

  /* line heights */
  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-body:   1.55;
  --lh-loose:  1.7;
}

/* ========================================================================
   BASE TYPE — semantic defaults
   ======================================================================== */

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Display headlines — Noto Serif */
h1, .h1, h2, .h2 {
  font-family: var(--font-serif);
  color: var(--ulab-navy);
  font-weight: 500;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

h1, .h1 {
  font-size: var(--t-h1);
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-5);
}

.t-display {
  font-family: var(--font-serif);
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  font-weight: 500;
  color: var(--ulab-navy);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h2, .h2 {
  font-size: var(--t-h2);
  line-height: var(--lh-snug);
  margin: 0 0 var(--space-4);
}

/* Subheads and UI titles — Montserrat */
h3, .h3, h4, .h4, h5, h6 {
  font-family: var(--font-sans);
  color: var(--ulab-navy);
  font-weight: 600;
  letter-spacing: 0;
  margin: 0 0 var(--space-3);
}
h3, .h3 { font-size: var(--t-h3); line-height: var(--lh-snug); }
h4, .h4 { font-size: var(--t-h4); line-height: var(--lh-snug); }
h5      { font-size: var(--t-body); }
h6      { font-size: var(--t-small); }

p {
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
  max-width: 64ch;
}

small, .t-small { font-size: var(--t-small); line-height: var(--lh-body); }
.t-caption      { font-size: var(--t-caption); line-height: 1.4; color: var(--fg-muted); }

/* Eyebrow — uppercase Montserrat label, used above headlines */
.t-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin: 0 0 var(--space-2);
}

/* Pre-headline intro line (the "Vi har svaren på dina frågor om" pattern) */
.t-intro {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  font-weight: 400;
  color: var(--fg-muted);
  margin: 0 0 var(--space-2);
}

/* Body variants */
.t-lead {
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 1.5;
  color: var(--fg);
  font-weight: 400;
}

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur) var(--ease), text-decoration-thickness var(--dur) var(--ease);
}
a:hover {
  color: var(--link-hover);
  text-decoration-thickness: 2px;
}

code, pre, .t-mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--space-6) 0;
}

::selection {
  background: var(--ulab-navy);
  color: #fff;
}