/* ============================================================
   PARCHMENT & PLEX — light only

   TYPOGRAFIREGLER
   Serif    Text att läsa. Brödtext, alla rubriker, redaktionella tillägg.
   Sans     Gränssnitt. Knappar, fältetiketter.
   Mono     Metainformation och literala strängar. Siffror, statusrader.

   Versaler Reserverat för klickbara ytor. Är det inte klickbart är det
            inte versalt.
   Vikt     400 som grund, 500 som tak. Ingen fetstil som default.
   Eyebrow  Ingen egen stil. Innehållstypen avgör familjen.
   ============================================================ */
:root {
  color-scheme: light;

  /* ytor — nästlar utåt från parchment, aldrig rent vitt */
  --parchment-white:  #F1EAE0;
  --true-parchment:   #F8F5F0;
  --surface-3:        #FBF9F5;

  /* warm ink — inverterad hierarki: brödtext djupast, rubriker mjukare */
  --ink-body:    oklch(0.2484 0.0208 76);
  --ink-heading: oklch(0.3684 0.0104 76);
  --ink-meta:    oklch(0.4700 0.0140 76);

  /* brand */
  --midnight-green: oklch(0.5456 0.0987 220);
  --link-hover:     oklch(0.4256 0.1480 220);
  --error:          oklch(0.5100 0.1700 27);

  --rule: color-mix(in srgb, var(--ink-body) 15%, transparent);

  /* Sans laddas som variabel font (wght 100–700, se <link> i index.html) —
     Serif och Mono saknar variabla builds hos Google Fonts och laddas
     därför fortfarande som diskreta vikter (400/500). */
  --font-serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --font-sans:  "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --font-mono:  "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  /* flytande skala — 320px → 1120px, rem alltid med i preferred value */
  --step--1: clamp(0.875rem, 0.825rem + 0.25vw, 1rem);      /* 14 → 16 */
  --step-0:  clamp(1rem, 0.95rem + 0.25vw, 1.125rem);        /* 16 → 18 */
  --step-1:  clamp(1.125rem, 1.025rem + 0.5vw, 1.375rem);    /* 18 → 22 */
  --step-2:  clamp(1.375rem, 1.175rem + 1vw, 1.875rem);      /* 22 → 30 */
  --step-3:  clamp(1.75rem, 1.3rem + 2.25vw, 2.875rem);      /* 28 → 46 */
  --step-4:  clamp(2.5rem, 1.5rem + 5vw, 5rem);              /* 40 → 80 */

  --tracking-caps: 0.07em;

  --gutter:  clamp(1.25rem, 0.9rem + 1.75vw, 3rem);
  --section: clamp(3.5rem, 2rem + 7vw, 8rem);
  --flow:    1.25rem;

  --page-max: 160rem;
  --measure: 38rem;
  --measure-wide: 56rem;

  --radius: 4px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0 auto;
  max-inline-size: var(--page-max);
  background: var(--parchment-white);
  color: var(--ink-body);
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--step-0);
  line-height: 1.65;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
}

/* ---- rubriker: serif, 500 som tak, mjukare bläck än brödtext ---- */
h1, h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  color: var(--ink-heading);
  margin: 0;
  line-height: 1.15;
  text-wrap: balance;
}
h1 { font-size: var(--step-4); letter-spacing: -0.02em; line-height: 1.05; }
h2 { font-size: var(--step-3); letter-spacing: -0.01em; }

p { margin: 0; text-wrap: pretty; }

/* Klickbara ytor (knapp eller enstaka extern länk) delar .button-stilen. */

/* Löptextlänkar (t.ex. i projektindex): brand-teal, ingen egen versal. */
a { color: var(--midnight-green); text-underline-offset: 0.15em; }
a:hover { color: var(--link-hover); }

:focus-visible { outline: 2px solid var(--link-hover); outline-offset: 3px; border-radius: 2px; }

.flow > * + * { margin-block-start: var(--flow); }

/* ---- klickbart: sans, versaler, 500 --------------------------- */
.button {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  text-decoration: none;
}
a.button { display: inline-block; }

/* ---- flera klickbara ytor i rad (t.ex. projektlänkar) ---------- */
.button-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-block-start: 2rem; }
.button-row .button { margin-block-start: 0; }

/* ---- gränssnitt utan klick: sans, gemener --------------------- */
.label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--step--1);
  color: var(--ink-meta);
  letter-spacing: 0;
}

/* ---- shell ---------------------------------------------------- */
.section { padding-block: var(--section); padding-inline: var(--gutter); }
.section--raised { background: var(--true-parchment); }
.inner { max-inline-size: var(--measure); margin-inline: auto; }
.inner--wide { max-inline-size: var(--measure-wide); margin-inline: auto; }

/* ---- hero ----------------------------------------------------- */
.hero { padding-block-start: clamp(3rem, 1.5rem + 6vw, 7rem); }
/* titeln är redaktionell text, inte gränssnitt — alltså serif */
.hero .eyebrow {
  display: block;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--step-0);
  color: var(--ink-meta);
  margin-block-end: 0.875rem;
}
.lede { font-size: var(--step-1); line-height: 1.5; margin-block-start: 2rem; }

/* ---- tjänster ------------------------------------------------- */
.services { margin-block: 2.5rem 0; }
.service {
  display: grid; gap: 0.5rem;
  padding-block: 1.75rem;
  border-block-start: 1px solid var(--rule);
}
.service:last-of-type { border-block-end: 1px solid var(--rule); }
.service dt {
  font-family: var(--font-serif); font-weight: 500;
  font-size: var(--step-1); color: var(--ink-heading);
}
.service dd { margin: 0; }
@media (min-width: 64rem) {
  .service { grid-template-columns: 13rem 1fr; gap: 2rem; align-items: start; }
}

/* ---- kontakt -------------------------------------------------- */
/* Elementet är tomt tills card.js har en ENDPOINT — då ritar det sin
   egen .section i ljus DOM, så reglerna nedan gäller som vanligt. */
kontakt-formular { display: block; }

form { margin-block-start: 2.5rem; }
.field { display: grid; gap: 0.5rem; margin-block-start: 1.5rem; }
input, textarea {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--step-0);
  color: var(--ink-body);
  background: var(--surface-3);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.75rem 0.875rem;
  inline-size: 100%;
  line-height: 1.5;
}
textarea { min-block-size: 9rem; resize: vertical; }
input:focus-visible, textarea:focus-visible { border-color: var(--midnight-green); }

.honeypot {
  position: absolute; inline-size: 1px; block-size: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.button {
  margin-block-start: 2rem;
  color: var(--true-parchment);
  background: var(--midnight-green);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 0.875rem 2rem;
  cursor: pointer;
  transition: background-color 120ms ease;
}
.button:hover { background: var(--link-hover); }
.button[disabled] { opacity: 0.55; cursor: progress; }

.form-status {
  margin-block-start: 1.25rem;
  font-family: var(--font-mono); font-weight: 400;
  font-size: var(--step--1);
  min-block-size: 1.5rem;
}
.form-status[data-state="ok"]  { color: var(--midnight-green); }
.form-status[data-state="err"] { color: var(--error); }

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