/* Grunden för hemsidorna — SooHo

   Källan till standardvärdena i ~/.claude/rules/webbdesign.md. Ändras den
   ena, ändras den andra i samma commit.

   Så används den: kopiera filen till sajten och lägg sajtens egna värden i
   en :root efter den (typsnitt, färger, radie). Ändra inte i kopian.

   Standardsvar 2026-10-19, tagna ur Freja-filen
   (~/freja-partner/docs/grund/design.md). Det Freja inte har är märkt
   "förslag". Emil bekräftar. */

:root {
  /* Sajtens egna: typsnitt, färger och radie */
  --font-head: "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --bg: #FFFFFF;
  --surface: #F2F2EF;      /* kortens yta och fältet i fokus */
  --ink: #16181A;
  --muted: #5B6066;        /* dämpad text är en egen färg, aldrig opacity */
  --line: #D6D9DC;
  --accent: #16181A;       /* knappens yta */
  --accent-hover: #3A3F45;
  --accent-ink: #FFFFFF;   /* texten på knappen */
  --error: #B42318;
  --radius: 0px;           /* Freja har inga rundade hörn */

  /* Typskalan */
  --h1: clamp(46px, 8.35vw, 136px);  --h1-lh: 1;    --h1-ls: -0.04em;
  --h2: clamp(26px, 3.05vw, 40px);   --h2-lh: 1.2;  --h2-ls: -0.02em;
  --h3: clamp(20px, 1.8vw, 26px);    --h3-lh: 1.2;  --h3-ls: -0.02em;
  --h4: 20px;      --h4-lh: 28px;
  --h5: 16px;      --h5-lh: 22px;    /* förslag */
  --text: 16px;    --text-lh: 22px;  --text-ls: -0.02em;
  --small: 14px;   --small-lh: 20px;
  --xs: 12px;      --xs-lh: 16px;
  --label: 11px;   --label-lh: 14px;
  --ui: 13px;                        /* meny, knappar och textlänkar */
  --head-weight: 400;
  --h5-weight: 500;
  --text-weight: 400;                /* skrivs ut, vissa typsnitt ärver fetstil */

  /* Rytm och ram */
  --space-section: 100px;  /* mellan sektioner */
  --space-content: 50px;   /* från rubrik till innehåll */
  --space-block: 40px;     /* mellan tagg, rubrik, brödtext och knapp */
  --space-field: 16px;     /* mellan fält i ett formulär (förslag) */
  --wrap: 1680px;
  --gutter: 22px;
  --col-gap: 40px;
  --header: 64px;
  --measure: 620px;        /* ingressens bredd */

  /* Höjder på knappar och fält */
  --control-s: 32px;       /* i menyn */
  --control-m: 44px;
  --control-l: 48px;       /* i heron och i formulär */
}

/* ---------- Bas ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text);
  line-height: var(--text-lh);
  letter-spacing: var(--text-ls);
  font-weight: var(--text-weight);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Text ---------- */

h1, h2, h3, h4, h5 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: var(--head-weight);
  text-wrap: balance;
}
h1 { font-size: var(--h1); line-height: var(--h1-lh); letter-spacing: var(--h1-ls); }
h2 { font-size: var(--h2); line-height: var(--h2-lh); letter-spacing: var(--h2-ls); }
h3 { font-size: var(--h3); line-height: var(--h3-lh); letter-spacing: var(--h3-ls); }
h4 { font-size: var(--h4); line-height: var(--h4-lh); letter-spacing: var(--h2-ls); }
h5 { font-size: var(--h5); line-height: var(--h5-lh); letter-spacing: var(--text-ls); font-weight: var(--h5-weight); }

p, ul, ol { margin: 0; }
p + p, p + ul, p + ol, ul + p, ol + p { margin-top: var(--text-lh); }
ul, ol { padding-left: 1.2em; }
li { font-size: inherit; font-weight: inherit; }

.ingress { max-width: var(--measure); }
/* Bokstavsavståndet sätts om per storlek, annars ärvs det i px från brödtexten */
small, .liten { font-size: var(--small); line-height: var(--small-lh); letter-spacing: var(--text-ls); }
.minst { font-size: var(--xs); line-height: var(--xs-lh); letter-spacing: var(--text-ls); }
.dampad { color: var(--muted); }
.etikett { font-size: var(--label); line-height: var(--label-lh); color: var(--muted); letter-spacing: 0; }

/* Etikettraden över en sektion: tunn linje, namnet till vänster och höger */
.etikettrad {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  padding-top: 8px;
  font-size: var(--label);
  line-height: var(--label-lh);
  color: var(--muted);
  letter-spacing: 0;
}
/* Trimmad, så att 83 px under den ger 100 px från linjen till rubrikens versaltopp */
.etikettrad > * {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  text-box: trim-both cap alphabetic;
}

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }

/* Textlänk med pil, i menyns storlek */
.textlank {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--ui);
  letter-spacing: var(--text-ls);
  text-decoration: none;
  transition: opacity .2s;
}
.textlank:hover { opacity: .7; }
.textlank svg { width: 14px; height: 14px; flex: none; }

/* Avstånd mäts från bokstäverna, inte från textrutan */
.trim {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  text-box: trim-both cap alphabetic;
}

/* ---------- Knappar ---------- */

.knapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--control-s);
  padding: 0 12px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-size: var(--ui);
  line-height: 1;
  letter-spacing: var(--text-ls);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.knapp:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.knapp--m { height: var(--control-m); padding: 0 14px; font-size: 15px; }
.knapp--l { height: var(--control-l); padding: 0 16px; font-size: var(--text); }
.knapp--bred { width: 100%; }

/* Förslag: sekundär knapp med ram, för när två knappar står bredvid varandra */
.knapp--sekundar { background: transparent; color: var(--ink); border-color: var(--ink); }
.knapp--sekundar:hover { background: var(--surface); border-color: var(--ink); }

.knapp:disabled,
.knapp[aria-disabled="true"] {
  background: var(--line);
  border-color: var(--line);
  color: var(--muted);
  cursor: not-allowed;
}
.knapp svg { width: 14px; height: 14px; flex: none; }

:where(a, button, .knapp, summary):focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---------- Formulär ---------- */

.falt { display: grid; gap: 8px; }
.falt + .falt { margin-top: var(--space-field); }
.falt label, .falt-etikett { font-size: var(--ui); line-height: 16px; }

:where(input[type="text"], input[type="email"], input[type="tel"], input[type="search"],
       input[type="number"], input[type="password"], input[type="url"], input[type="date"],
       select, textarea) {
  display: block;
  width: 100%;
  height: var(--control-l);
  padding: 0 16px;
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  color: var(--ink);
  font: inherit;
  font-size: var(--text);
  letter-spacing: var(--text-ls);
  outline: none;
  appearance: none;
}
textarea { height: auto; min-height: 120px; padding: 12px 16px; line-height: var(--text-lh); resize: vertical; }
select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%2316181A' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
::placeholder { color: var(--muted); opacity: 1; }
:where(input, select, textarea):focus { background-color: var(--surface); }

.hjalp { font-size: var(--small); line-height: var(--small-lh); color: var(--muted); }
.falt--fel :where(input, select, textarea) { border-color: var(--error); }
.fel { font-size: var(--small); line-height: var(--small-lh); color: var(--error); }

/* Kryssruta och val */
.val { display: flex; align-items: center; gap: 10px; font-size: var(--text); line-height: var(--text-lh); cursor: pointer; }
.val input { width: 18px; height: 18px; margin: 0; accent-color: var(--ink); flex: none; }

/* Fält och knapp på en rad, som Frejas formulär i heron */
.rad-form { display: flex; max-width: 460px; }
.rad-form input { flex: 1; min-width: 0; border-right: 0; }
.rad-form .knapp { height: var(--control-l); padding: 0 16px; font-size: var(--text); border-color: var(--ink); }

/* Formulärets fot: det som saknas står här, vid knappen */
.form-fot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 24px; }

/* ---------- Ram och ytor ---------- */

.ram { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.sektion { padding-bottom: var(--space-section); }
.spalter { display: grid; grid-template-columns: 1fr 1fr; gap: var(--col-gap); }
.kort { background: var(--surface); border-radius: var(--radius); padding: 14px 16px 16px; }

@media (max-width: 900px) {
  .spalter { grid-template-columns: 1fr; }
}