/* Homie designlag: ét sæt farver, skrift, afstande og knapper til hjemmesiden, bookingen, kundesiden,
   tilbuddet, Homie Hub og leverandørportalen.

   Kilden er denne fil. Rediger den her og kør `node vaerktoejer/synk-design.mjs`, som kopierer den ud i hver
   worker. Kopierne i workers/ må ikke redigeres direkte (synk-design.mjs --tjek fejler, hvis de afviger).

   Farverne bruger light-dark(): de følger sidens eget tema. En side med `color-scheme: light` forbliver lys,
   en side med `color-scheme: light dark` skifter med enheden. Logo og farver følger logopakken 13.10.2026. */

/* Skrift: Avenir Next på Apple-enheder (som i dag, Nicolais valg 14.10). Alle andre får Nunito Sans, som
   ligner næsten til forveksling. Fonten ligger hos os selv (ingen opslag hos Google, intet ekstra
   blokerende kald), og browseren henter den kun, hvis Avenir Next mangler på enheden. Licens: fonts/OFL.txt. */
@font-face{font-family:"Nunito Sans";font-style:normal;font-weight:400 900;font-display:swap;src:url("fonts/nunito-sans-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --hm-font:"Avenir Next","Nunito Sans","Segoe UI",Helvetica,Arial,sans-serif;
  --hm-font-display:var(--hm-font);
  --hm-font-mono:ui-monospace,Menlo,Consolas,monospace;
  --hm-weight-display:790;
  --hm-weight-heading:700;
  --hm-weight-strong:600;
  --hm-weight-text:400;

  /* Farver. Navy og husets blå er logoets. Knappernes blå er en anelse mørkere end husets,
     så hvid tekst kan læses af alle (kontrast 5,2:1 mod 4,3:1). */
  --hm-navy:#081b34;
  --hm-house:#0174fd;
  --hm-action:light-dark(#0067e0,#4d94ff);
  --hm-action-hover:light-dark(#0057c2,#6aa6ff);
  --hm-on-action:light-dark(#ffffff,#07152a);
  --hm-ink:light-dark(#081b34,#edf1f7);
  --hm-text:light-dark(#1f2a3a,#d9dfe9);
  --hm-soft:light-dark(#5b6372,#a2abba);
  --hm-faint:light-dark(#8a909b,#7d8696);
  --hm-bg:light-dark(#f6f4ef,#0f1521);
  --hm-surface:light-dark(#ffffff,#161e2c);
  --hm-surface-2:light-dark(#faf9f6,#1b2433);
  --hm-line:light-dark(#e5e1d7,#2a3445);
  --hm-tint:light-dark(#e8f0fd,#1c2b46);
  --hm-success:light-dark(#17784a,#6bd3a1);
  --hm-success-bg:light-dark(#e6f4ec,#163126);
  --hm-warning:light-dark(#8a5a00,#f0c560);
  --hm-warning-bg:light-dark(#fdf3dc,#3a3120);
  --hm-error:light-dark(#b42318,#ff9c94);
  --hm-error-bg:light-dark(#fdecea,#3a2224);
  --hm-focus:light-dark(#0067e0,#7aa8ff);

  /* Form og rytme */
  --hm-radius-s:8px;
  --hm-radius-btn:999px; /* knapper er runde, som på hjemmesiden i dag */
  --hm-radius:12px;
  --hm-radius-l:18px;
  --hm-space-1:4px;
  --hm-space-2:8px;
  --hm-space-3:12px;
  --hm-space-4:16px;
  --hm-space-5:24px;
  --hm-space-6:32px;
  --hm-space-7:48px;
  --hm-space-8:64px;
  --hm-shadow-1:0 1px 2px rgb(8 27 52 / .05);
  --hm-shadow-2:0 8px 24px rgb(8 27 52 / .08);
  --hm-ease:cubic-bezier(.2,.7,.2,1);
  --hm-duration:.18s;
  --hm-touch:44px;
}

/* Tydelig fokus for tastatur overalt */
:focus-visible{outline:2px solid var(--hm-focus);outline-offset:2px}

/* Logo: altid den officielle fil, aldrig tekst og aldrig filtre. Lys/mørk vælges af <picture>. */
.hm-logo-pic,.hm-logo-pic img{display:block}
.hm-logo-pic img{width:auto;height:var(--hm-logo-height,40px);max-width:none;filter:none}

/* Knapper: én primær handling pr. sektion, en sekundær med kant og et tekstlink. */
.hm-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--hm-touch);padding:10px 20px;border-radius:var(--hm-radius-btn);border:1px solid transparent;font:var(--hm-weight-strong) 15px/1.2 var(--hm-font);text-decoration:none;cursor:pointer;transition:background-color var(--hm-duration) var(--hm-ease),border-color var(--hm-duration) var(--hm-ease),transform var(--hm-duration) var(--hm-ease)}
.hm-btn:active{transform:translateY(1px)}
.hm-btn[disabled],.hm-btn[aria-disabled="true"]{opacity:.55;cursor:default;transform:none}
.hm-btn--primary{background:var(--hm-action);color:var(--hm-on-action)}
.hm-btn--primary:hover{background:var(--hm-action-hover)}
.hm-btn--secondary{background:var(--hm-surface);color:var(--hm-ink);border-color:var(--hm-ink)}
.hm-btn--secondary:hover{background:var(--hm-surface-2)}
.hm-link{background:none;border:0;padding:0;color:var(--hm-action);font:var(--hm-weight-strong) 15px/1.4 var(--hm-font);cursor:pointer;text-decoration:none}
.hm-link:hover{text-decoration:underline;text-underline-offset:3px}

/* Ja/nej og andre korte valg som store knapper, der er nemme at ramme på en telefon */
.hm-choice{display:inline-flex;flex-wrap:wrap;gap:8px}
.hm-choice button{min-height:var(--hm-touch);min-width:64px;padding:8px 18px;border-radius:var(--hm-radius-btn);border:1px solid var(--hm-line);background:var(--hm-surface);color:var(--hm-ink);font:500 15px/1.2 var(--hm-font);cursor:pointer}
.hm-choice button[aria-pressed="true"]{border-color:var(--hm-action);background:var(--hm-tint);font-weight:var(--hm-weight-strong)}

@media (prefers-reduced-motion:reduce){
  .hm-btn,.hm-choice button{transition:none}
  .hm-btn:active{transform:none}
}