/* =========================================================
   Viðskiptaráð — Colors & Type
   Source: Litapallettur.pdf + vi.is live site
   ========================================================= */

/* ---------- Font faces ---------- */
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBMPlexSans-Thin.ttf") format("truetype");
  font-weight: 100; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBMPlexSans-Light.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBMPlexSans-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBMPlexSans-Text.ttf") format("truetype");
  font-weight: 450; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBMPlexSans-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBMPlexSans-SemiBold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBMPlexSans-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* ---------- Brand color scale (vi.is Litapallettur) ---------- */
  --vi-50:  #EBF8FF;
  --vi-100: #D1EFFF;
  --vi-200: #A8DFFF;
  --vi-300: #7ACCFF;
  --vi-400: #4DB8FF;
  --vi-500: #24A4FF;
  --vi-600: #008BF5;   /* Miðblár — mid-blue, links / accents */
  --vi-700: #006DC7;
  --vi-800: #00549E;
  --vi-900: #003A70;   /* Navy — primary brand, logo dark wing */
  --vi-950: #002647;   /* Dökkblár — darkest, backgrounds / typography */

  /* Named brand tokens (per palette) */
  --brand-navy:     var(--vi-900);     /* "Navy" */
  --brand-dark:     var(--vi-950);     /* "Dökkblár" */
  --brand-mid:      var(--vi-600);     /* "Miðblár" */
  --brand-graybl:   var(--vi-300);     /* "Grár + blár" — grayish blue */
  --brand-accent:   #3D7CC9;           /* logo light wing (from SVG) */

  /* ---------- Neutrals (cool-grey, calibrated to navy brand) ---------- */
  --n-0:    #FFFFFF;
  --n-25:   #FAFBFC;
  --n-50:   #F4F6F8;
  --n-100:  #E8ECF0;
  --n-200:  #D6DCE3;
  --n-300:  #B8C1CC;
  --n-400:  #8A95A3;
  --n-500:  #5E6B7A;
  --n-600:  #44515F;
  --n-700:  #2F3A46;
  --n-800:  #1C242C;
  --n-900:  #0E1419;

  /* ---------- Semantic foreground / background ---------- */
  --fg-1:   var(--vi-950);   /* primary text, near-black navy */
  --fg-2:   var(--n-600);    /* secondary text */
  --fg-3:   var(--n-500);    /* tertiary / captions */
  --fg-mute:var(--n-400);    /* disabled / placeholder */
  --fg-inv: var(--n-0);      /* text on dark backgrounds */
  --fg-link:var(--vi-700);   /* links */
  --fg-link-hover: var(--vi-800);

  --bg-1:   var(--n-0);      /* page */
  --bg-2:   var(--n-25);     /* subtle panel */
  --bg-3:   var(--n-50);     /* inset card */
  --bg-dark:var(--vi-950);   /* hero / footer dark */
  --bg-navy:var(--vi-900);

  --border-1: var(--n-100);  /* hairline */
  --border-2: var(--n-200);  /* standard */
  --border-3: var(--n-300);  /* emphatic */

  /* ---------- Status colors (tuned to sit beside navy palette) ---------- */
  --ok-500:     #15955A;
  --ok-bg:      #E6F5ED;
  --warn-500:   #C58A00;
  --warn-bg:    #FFF6DF;
  --danger-500: #C0392B;
  --danger-bg:  #FBEAE6;
  --info-500:   var(--vi-700);
  --info-bg:    var(--vi-50);

  /* ---------- Type families ---------- */
  --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---------- Type scale (desktop-first; tuned to vi.is feel) ---------- */
  --fs-display:  clamp(40px, 4.5vw, 64px);
  --fs-h1:       clamp(32px, 3.4vw, 48px);
  --fs-h2:       clamp(26px, 2.4vw, 34px);
  --fs-h3:       22px;
  --fs-h4:       18px;
  --fs-body-lg:  18px;
  --fs-body:     16px;
  --fs-small:    14px;
  --fs-xs:       12px;
  --fs-eyebrow:  12px;

  /* Line heights */
  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-normal: 1.5;
  --lh-loose:  1.65;

  /* Tracking */
  --tr-tight:   -0.02em;
  --tr-normal:  0;
  --tr-wide:    0.04em;
  --tr-eyebrow: 0.14em;

  /* Weights */
  --fw-thin: 100; --fw-light: 300; --fw-regular: 400;
  --fw-text: 450; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

  /* ---------- Spacing (4px base) ---------- */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* ---------- Radii ---------- */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-xl: 16px;
  --r-2xl: 24px;
  --r-pill: 999px;

  /* ---------- Shadows (soft, desaturated navy) ---------- */
  --sh-xs: 0 1px 2px rgba(0, 38, 71, 0.06);
  --sh-sm: 0 2px 4px rgba(0, 38, 71, 0.07), 0 1px 2px rgba(0, 38, 71, 0.04);
  --sh-md: 0 6px 16px rgba(0, 38, 71, 0.09), 0 2px 4px rgba(0, 38, 71, 0.05);
  --sh-lg: 0 14px 32px rgba(0, 38, 71, 0.12), 0 4px 8px rgba(0, 38, 71, 0.06);
  --sh-xl: 0 24px 56px rgba(0, 38, 71, 0.18);
  --sh-inset: inset 0 1px 0 rgba(255,255,255,0.6);

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.2, 0.0, 0.0, 1);
  --ease-entrance: cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-exit:     cubic-bezier(0.4, 0.0, 1, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;

  /* ---------- Containers ---------- */
  --container-xs:  640px;
  --container-sm:  768px;
  --container-md: 1024px;
  --container-lg: 1200px;
  --container-xl: 1360px;
}

/* ================== Semantic element styles ================== */

html { font-family: var(--font-sans); color: var(--fg-1); background: var(--bg-1); }
body { font: var(--fw-regular) var(--fs-body)/var(--lh-normal) var(--font-sans); color: var(--fg-1); }

h1, .h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
  text-wrap: balance;
}
h2, .h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
  text-wrap: balance;
}
h3, .h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
h4, .h4 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.display {
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
}
p, .body {
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--fg-2);
  text-wrap: pretty;
}
.lead {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-normal);
  color: var(--fg-2);
  font-weight: var(--fw-regular);
}
.small   { font-size: var(--fs-small); line-height: var(--lh-normal); color: var(--fg-3); }
.caption { font-size: var(--fs-xs);    line-height: var(--lh-normal); color: var(--fg-3); }
.eyebrow {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: var(--brand-mid);
}
.mono, code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

a { color: var(--fg-link); text-decoration: none; transition: color var(--dur-fast) var(--ease-standard); }
a:hover { color: var(--fg-link-hover); text-decoration: underline; text-underline-offset: 3px; }

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

::selection { background: var(--vi-200); color: var(--vi-950); }