/* ===========================================================
   Designtokens
   Solid, platt och redaktionell hållning: färgfälten är hela
   kulörer, avgränsningar görs med hårfina linjer istället för
   skuggor, och accentfärgen används sparsamt.

   Komponenter får ALDRIG använda --brand-* direkt, bara de
   semantiska tokens längre ner. Det är det som gör att samma
   komponent fungerar oförändrad på mörk och ljus yta.
   =========================================================== */

:root {
  /* ---- Varumärkespalett (rå värden) ---- */
  --brand-navy: #0B1D30;        /* huvudkulör, mörka fält */
  --brand-navy-deep: #071626;   /* djupare fält, footer */
  --brand-navy-raised: #12273D; /* kortyta på mörk bakgrund */

  --brand-paper: #F2F6F5;       /* huvudkulör, ljusa fält */
  --brand-paper-alt: #E6EDEB;   /* andra ljusa fältet */
  --brand-white: #FFFFFF;

  --brand-cyan: #5CE3D8;        /* accent, endast mörk yta */
  --brand-teal: #0B7A6F;        /* accent, endast ljus yta */
  --brand-green: #3DDC84;       /* statusmarkering, sparsamt */
  --brand-blue: #1C6FA8;

  --brand-ink: #0A1A24;
  --brand-slate: #44606F;       /* dämpad text på ljus yta */
  --brand-slate-light: #93AABB; /* dämpad text på mörk yta */

  --brand-amber: #B77A1C;
  --brand-red: #B5423E;

  /* ---- Typografi ---- */
  --font-head: "Space Grotesk", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "IBM Plex Sans", "Segoe UI", Arial, sans-serif;

  --fs-display: clamp(2.5rem, 1.4rem + 4.4vw, 4.5rem);
  --fs-h1: clamp(2rem, 1.5rem + 2.1vw, 3rem);
  --fs-h2: clamp(1.75rem, 1.45rem + 1.4vw, 2.375rem);
  --fs-h3: clamp(1.1875rem, 1.12rem + 0.35vw, 1.375rem);
  --fs-h4: 1.0625rem;
  --fs-lede: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --fs-body: 1rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;
  --fs-label: 0.78125rem;

  --lh-tight: 1.06;
  --lh-snug: 1.3;
  --lh-body: 1.6;

  --tracking-display: -0.02em;
  --tracking-label: 0.14em;

  /* ---- Rumsskala (4px-bas) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* ---- Layout ---- */
  --container: 1180px;
  --container-narrow: 720px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(4rem, 7vw, 7rem);
  --header-h: 68px;

  /* ---- Form: kantigt, inte rundat ---- */
  --radius-s: 2px;
  --radius-m: 3px;

  --transition: 0.15s ease;
}

/* ===========================================================
   Semantiska tokens — mörkt fält (standard)
   =========================================================== */
:root,
[data-surface="dark"] {
  color-scheme: dark;

  --bg: var(--brand-navy);
  --bg-alt: var(--brand-navy-deep);
  --surface: var(--brand-navy-raised);

  --border: rgba(243, 250, 249, 0.16);
  --border-soft: rgba(243, 250, 249, 0.09);

  --text: #E8F1F2;
  --text-strong: #FFFFFF;
  --text-muted: var(--brand-slate-light);

  --accent: var(--brand-cyan);
  --accent-ink: var(--brand-navy);        /* text ovanpå accentfyllning */
  --accent-wash: rgba(92, 227, 216, 0.08);

  --field-bg: rgba(0, 0, 0, 0.22);
}

/* ===========================================================
   Semantiska tokens — ljust fält
   Sätts på <html data-surface="light"> för en hel sida, eller
   på en enskild <section> för att vända fältet mitt i en sida.
   =========================================================== */
[data-surface="light"] {
  color-scheme: light;

  --bg: var(--brand-paper);
  --bg-alt: var(--brand-paper-alt);
  --surface: var(--brand-white);

  --border: rgba(10, 26, 36, 0.16);
  --border-soft: rgba(10, 26, 36, 0.09);

  --text: var(--brand-ink);
  --text-strong: var(--brand-ink);
  --text-muted: var(--brand-slate);

  --accent: var(--brand-teal);
  --accent-ink: var(--brand-paper);
  --accent-wash: rgba(11, 122, 111, 0.07);

  --field-bg: var(--brand-white);
}