/* ===================================================================
   Heilsutæki — Heilsuvera design language

   Tokens mirror Vettvangur's own, read from
   external/heilsuvera/Vettvangur.Heilsuvera/src/styles/utility/variables/
   (colors.scss, fonts.scss, border-radius.scss, gutters.scss).

   Five tokens are deliberately darker than Vettvangur's because the
   originals do not reach WCAG 2.1 AA in the way we use them. Both values
   are kept so the divergence stays visible — this is worth raising with
   Vettvangur rather than quietly diverging.
   =================================================================== */

/* Fonts as Heilsuvera loads them (Vettvangur.Heilsuvera
   src/styles/global/typography/font-face.scss): Inter 400, 500, 700 and 900
   and Poppins 400 only, Latin subset (it covers Icelandic), served from our
   own folder so no page contacts Google. Heavier Poppins headings are drawn
   by the browser from the regular weight, as on heilsuvera.is. Files from
   Fontsource, SIL Open Font License 1.1 (fonts/*-LICENSE.txt). */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/inter-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 900; font-display: swap; src: url('fonts/inter-latin-900-normal.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/poppins-latin-400-normal.woff2') format('woff2'); }

:root {
  /* --- brand ------------------------------------------------------ */
  --hv-primary: #009EC5;          /* Vettvangur primary — 3.14:1 on white,
                                     so: large text and UI edges only */
  --hv-primary-strong: #0080A0;   /* ours — 4.57:1, anywhere text is involved */
  --hv-primary-edge: #008EB1;     /* ours — 3.41:1 on --hv-azure */
  --hv-link: #00728E;             /* ours — 4.83:1 on --hv-lightgreen */
  --hv-primary-hover: #0C865A;    /* ours — Vettvangur #11C585 is 2.25:1
                                     under white text */
  --hv-secondary: #486E77;
  --hv-headline: #486E77;

  /* --- text ------------------------------------------------------- */
  --hv-text: #3F5E65;             /* 7.00:1 */
  --hv-text-lighter: #6F8084;     /* 4.12:1 — large text only */
  --hv-placeholder: #767676;      /* ours — Vettvangur #B0B0B0 is 2.17:1 */

  /* --- surfaces and lines ----------------------------------------- */
  --hv-bg: #FFFFFF;
  --hv-bg-blue: #E4F4F8;
  --hv-azure: #E5F5F9;
  --hv-lightgreen: #EDF0F1;
  --hv-lightgrey: #F0F0F0;
  --hv-border: #C7CBEF;           /* Vettvangur — 1.59:1, decorative rules only */
  --hv-border-strong: #868FDD;    /* ours — 3.01:1, control boundaries (1.4.11) */

  /* --- state ------------------------------------------------------ */
  --hv-error: #B73333;
  --hv-error-bg: #FDEFEF;
  --hv-success: #24B729;
  --hv-orange: #F96739;
  --hv-orange-edge: #E83D07;      /* ours — 3.48:1 on --hv-soft-coral */
  --hv-soft-coral: #FFE7DF;
  --hv-warning-ink: #8A3312;      /* ours — 8.19:1 on white */

  /* --- type ------------------------------------------------------- */
  --font-body: 'Inter', Arial, sans-serif;
  --font-headline: 'Poppins', Arial, sans-serif;

  /* --- radius ----------------------------------------------------- */
  --radius: 10px;
  --radius-s: 3px;
  --radius-l: 6px;
  --radius-rounded: 100px;

  /* --- gutters ---------------------------------------------------- */
  --gutter-s: 10px;
  --gutter-m: 20px;
  --gutter-l: 30px;
  --gutter-xl: 40px;
  --gutter-xxl: 70px;

  --header-height: 70px;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 26px;              /* body1 */
  background: var(--hv-lightgreen);
  color: var(--hv-text);
  min-height: 100vh;
  -webkit-text-size-adjust: 100%;
}

/* Visible focus is required at AA and is the first thing a reset destroys. */
:focus-visible {
  outline: 3px solid var(--hv-primary-strong);
  outline-offset: 2px;
  border-radius: var(--radius-s);
}

/* --- Heilsuvera type scale ---------------------------------------- */
.headline1 {
  font-family: var(--font-headline);
  font-size: 26px; line-height: 32px; font-weight: 400;
  color: var(--hv-headline);
}
@media (min-width: 768px) { .headline1 { font-size: 37px; line-height: 47px; } }
@media (min-width: 1200px) { .headline1 { font-size: 47px; line-height: 57px; } }

.headline2 {
  font-family: var(--font-headline);
  font-size: 20px; line-height: 24px; font-weight: 400;
  color: var(--hv-headline);
}
@media (min-width: 768px) { .headline2 { font-size: 26px; line-height: 32px; } }

.headline3 {
  font-family: var(--font-headline);
  font-size: 16px; line-height: 24px; font-weight: 700;
  color: var(--hv-headline);
}

.subtitle1 {
  font-size: 12px; line-height: 22px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .02em;
  color: var(--hv-secondary);
}

.body1 { font-size: 16px; line-height: 26px; }
.body2 { font-size: 14px; line-height: 24px; }
.body3 { font-size: 14px; line-height: 24px; font-weight: 700; }

/* --- shared controls ---------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gutter-s);
  padding: 11px var(--gutter-m);
  min-height: 44px;               /* AA target size */
  border: 1px solid transparent;
  border-radius: var(--radius-s);
  font-family: inherit;
  font-size: 16px; line-height: 24px; font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, border-color .15s;
}
.btn--primary { background: var(--hv-primary-strong); color: #fff; }
.btn--primary:hover { background: var(--hv-primary-hover); }
.btn--secondary {
  background: var(--hv-bg);
  color: var(--hv-primary-strong);
  border-color: var(--hv-border-strong);
}
.btn--secondary:hover { background: var(--hv-azure); }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

.field-label {
  display: block;
  font-size: 12px; line-height: 24px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .02em;
  color: var(--hv-secondary);
}

.input, select.input {
  width: 100%;
  padding: 10px 14px;
  min-height: 44px;
  border: 1px solid var(--hv-border-strong);
  border-radius: var(--radius-s);
  background: var(--hv-bg);
  color: var(--hv-text);
  font-family: inherit;
  font-size: 16px;                /* 16px keeps iOS from zooming on focus */
  line-height: 24px;
}
.input::placeholder { color: var(--hv-placeholder); }
.input:focus { border-color: var(--hv-primary-strong); }

.card {
  background: var(--hv-bg);
  border: 1px solid var(--hv-border);
  border-radius: var(--radius);
  padding: var(--gutter-m);
}

/* Skip link — visible only when focused. */
.skip-link {
  position: absolute;
  left: var(--gutter-s);
  top: -100px;
  z-index: 100;
  padding: var(--gutter-s) var(--gutter-m);
  background: var(--hv-bg);
  color: var(--hv-primary-strong);
  border: 2px solid var(--hv-primary-strong);
  border-radius: var(--radius-s);
  font-weight: 700;
  transition: top .15s;
}
.skip-link:focus { top: var(--gutter-s); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media print {
  .no-print { display: none !important; }
  body { background: #fff; }
}