/* Isaks bygg - designsystem byggt efter logotypen.
   Isak valde sina egna faerger 2026-08-27. Paletten aer haemtad ur loggan:
   svart platta, vit text, roed accent #ed021e (samplad med
   skript/analysera_rott.py, inte gissad).

   Den tidigare guldpaletten ligger kvar i tokens-guld.css.bak. */

:root{
  --color-bg:#ffffff;
  --color-surface:#f2f1f0;
  --color-text:#111111;
  --color-accent:#ed021e;
  --color-motsats:#000000;          /* sidhuvud och sidfot, daer loggan sitter */
  --color-motsats-text:#f5f5f5;
  --color-divider:color-mix(in srgb,#111111 15%,transparent);

  --color-neutral-200:#e8e6e4;
  --color-neutral-400:#b5b1ad;
  --color-neutral-600:#6f6b67;
  --color-neutral-700:#57534f;

  /* Archivo moeter loggans bokstaever: geometrisk grotesk med raka
     avslut. Antikvan fraan foerslagsskedet passar inte det haer maerket. */
  --font-heading:"Archivo",system-ui,-apple-system,sans-serif;
  --font-heading-weight:800;
  --font-body:"Archivo",system-ui,-apple-system,sans-serif;

  --space-1:4px;--space-2:8px;--space-3:14px;
  --space-4:20px;--space-6:30px;--space-8:44px;

  --radius-sm:0;--radius-md:0;--radius-lg:0;   /* loggan aer raetvinklig */

  --shadow-md:0 3px 14px color-mix(in srgb,#000 12%,transparent);

  --sidmarginal:clamp(20px,6vw,72px);
}

*,*::before,*::after{box-sizing:border-box}

body{
  background:var(--color-bg);
  color:var(--color-text);
  font-family:var(--font-body);
  margin:0;
  font-size:17px;
  line-height:1.6;
  font-weight:400;
  -webkit-text-size-adjust:100%;
}

h1,h2,h3,h4,h5,h6{
  font-family:var(--font-heading);
  font-weight:var(--font-heading-weight);
  line-height:1.06;
  letter-spacing:-.02em;
  margin:0 0 var(--space-3);
  text-wrap:balance;
}
h1{font-size:clamp(34px,6.4vw,68px)}
h2{font-size:clamp(25px,3.6vw,36px)}
h3{font-size:clamp(19px,2.4vw,23px)}

p{margin:0 0 var(--space-3)}
a{color:var(--color-accent);text-underline-offset:3px}
img{display:block;max-width:100%;height:auto}
figure{margin:0}
figcaption{
  font-size:14px;line-height:1.5;
  margin-top:var(--space-2);
  color:var(--color-neutral-600);
}

.text-muted{color:var(--color-neutral-600)}
:focus{outline:none}
:focus-visible{outline:3px solid var(--color-accent);outline-offset:2px}
::selection{background:var(--color-accent);color:#fff}

/* Etiketten oever en rubrik. Versaler och spaerrad, som "BYGG" i loggan. */
.etikett{
  display:inline-block;
  font-family:var(--font-heading);
  font-weight:700;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--color-accent);
}

/* Bildram: tunn svart kontur, inga rundade hoern. */
.plate{
  border:1px solid var(--color-divider);
  background:var(--color-neutral-200);
  width:100%;
}

.hr{height:1px;border:0;margin:var(--space-6) 0;background:var(--color-divider)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  cursor:pointer;text-decoration:none;
  font-family:var(--font-heading);font-weight:700;
  font-size:16px;line-height:1.2;letter-spacing:.01em;
  padding:14px var(--space-6);
  min-height:48px;
  border:2px solid transparent;
  border-radius:0;
  background:transparent;color:var(--color-text);
  transition:background .12s ease,color .12s ease;
}
.btn-primary{background:var(--color-accent);border-color:var(--color-accent);color:#fff}
.btn-primary:hover{background:#c50018;border-color:#c50018}
.btn-secondary{border-color:var(--color-text);color:var(--color-text)}
.btn-secondary:hover{background:var(--color-text);color:#fff}
/* Paa svart botten, i sidhuvudet */
.btn-ljus{border-color:var(--color-motsats-text);color:var(--color-motsats-text)}
.btn-ljus:hover{background:var(--color-motsats-text);color:var(--color-motsats)}
.btn-block{width:100%;margin-top:var(--space-2)}

.field>label{
  display:block;font-size:14px;font-weight:600;margin-bottom:6px;
  color:var(--color-text);
}
.input{
  width:100%;min-height:48px;padding:12px 14px;
  font:inherit;font-size:16px;   /* under 16px zoomar iOS in vid fokus */
  color:var(--color-text);caret-color:var(--color-accent);
  background:#fff;
  border:1px solid var(--color-neutral-400);
  border-radius:0;
}
.input:hover{border-color:var(--color-text)}
.input:focus-visible{border-color:var(--color-accent);outline-offset:0}
textarea.input{min-height:130px;resize:vertical}

/* Uppgift som Isak maaste bekraefta innan sidan gaar live. */
.lucka{
  background:#ffe9a8;color:#5a4200;
  padding:2px 7px;font-weight:600;font-size:.9em;
  white-space:nowrap;
}

/* Fyrsproejsade foenstret ur loggan, aateranvaent som avdelare. */
.marke{
  display:grid;grid-template-columns:1fr 1fr;gap:2px;
  width:18px;height:18px;flex:none;
}
.marke i{background:var(--color-accent);display:block}