/* ============================================================
   Design Tokens — designsystem for et navn endnu ikke er endeligt
   låst (Portnerhuset er ARBEJDSNAVN, ny navnerunde kører 9/8-2026,
   domænet er IKKE købt).
   ============================================================
   Selvstændigt brand. Arver INTET fra STPL/Plainwork/Stougaard.
   Koncept: portneren — kender huset, holder øje, låser op,
   siger til i tide. Soliditet og årvågenhed, ikke stuk og
   messingskilte. Konceptet er navn-uafhængigt — det holder
   uanset hvilket navn navnerunden lander på.

   Alle tekst-kontraster er beregnet (WCAG 2.1 relativ luminans)
   og verificeret ≥4.5:1 for normal tekst / ≥3:1 for UI-komponenter.
   Se DESIGNSYSTEM.md for facit-tabellen og for hvad der er
   navn-afhængigt vs. navn-uafhængigt i dette system.
   ============================================================ */

:root {
  /* ---------- Produktnavn (ARBEJDSNAVN — skift her + grep .brand-name) ---------- */
  --brand-name: "Portnerhuset";
  --brand-name-caps: "PORTNERHUSET";

  /* ---------- Grundflader ---------- */
  --paper: #F6F5F2;          /* Base-baggrund. Varm, neutral — papir/protokol, ikke sterilt hvid */
  --paper-raised: #FFFFFF;   /* Kort, moduler, inputs */
  --paper-sunken: #EFEDE7;   /* Let sænket flade — tabel-stribe, inaktive områder */

  /* ---------- Tekst ---------- */
  --ink: #14181D;            /* Primær tekst. 16.35:1 på --paper */
  --ink-soft: #454B52;       /* Sekundær tekst, metadata. 8.09:1 på --paper */
  --ink-faint: #6B7178;      /* Tertiær — kun til virkelig underordnet info, aldrig brødtekst */

  /* ---------- Streger ---------- */
  --line: #E3DFD6;           /* Dekorativ hairline — ledger-streger, adskillelse. Ikke bærende af mening */
  --line-strong: #8A8578;    /* Funktionel kant: inputs, tabel-header-underline. 3.38:1 på --paper (UI-krav) */

  /* ---------- Identitet: "Nattevagten" (mørk, afmættet ink-navy — IKKE SaaS-blå) ---------- */
  --watch-900: #10161F;      /* Header, hoved-nav, forside-hero. Dybest */
  --watch-700: #1E2733;      /* Primær knap, sekundære mørke flader. 13.83:1 tekst på --paper */
  --watch-500: #34424F;      /* Hover/aktiv-tilstand på mørke flader */

  /* ---------- Accent: messing (nøglens metal — sparsomt, aldrig dekorativt) ---------- */
  --brass-600: #8B6A2F;      /* Links, aktive ikoner, fokus-markering på lys baggrund. 4.59:1 på --paper */
  --brass-400: #B08D4F;      /* Accent på mørk baggrund (nav, hero). 5.85:1 på --watch-900 */

  /* ---------- Semantik: fristsystemet (produktets kernefunktion) ---------- */
  --ok-700: #2B6B45;         /* Tekst/ikon "på sporet". 5.85:1 på --paper, 6.38:1 på hvid */
  --ok-100: #E4EFE6;         /* Baggrund til ok-chip/banner */
  --soon-700: #94530A;       /* Tekst/ikon "frist nær". 5.50:1 på --paper */
  --soon-100: #F7EBDA;       /* Baggrund til nær-chip/banner */
  --late-700: #A32B22;       /* Tekst/ikon "frist overskredet". 6.58:1 på --paper */
  --late-100: #F8E2DF;       /* Baggrund til overskredet-chip/banner */
  --neutral-700: #454B52;    /* "Afventer/lukket" — bruger ink-soft, ingen ny farve for et fjerde neutralt punkt */
  --neutral-100: #E9E7E1;

  /* ---------- Typografi ---------- */
  --font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-ui: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Type-skala — base 16px, ingen trin under 14px bruges til indhold */
  --text-display: 2.75rem;   /* 44px — forside-hero */
  --text-h1: 2.25rem;        /* 36px */
  --text-h2: 1.75rem;        /* 28px */
  --text-h3: 1.375rem;       /* 22px */
  --text-body-lg: 1.125rem;  /* 18px — standard i portalen (45+ målgruppe) */
  --text-body: 1rem;         /* 16px — minimum til løbende tekst */
  --text-small: 0.875rem;    /* 14px — KUN metadata/labels, aldrig primært indhold */

  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---------- Afstand (4px-grid) ---------- */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */

  /* ---------- Radius — arkitektonisk, aldrig "app-pille" ---------- */
  --radius-sm: 4px;     /* Knapper, inputs, chips */
  --radius-md: 8px;     /* Kort */
  --radius-full: 999px; /* Kun til runde ikon-badges, aldrig knapper/chips */

  /* ---------- Klikflader (45+/iPad-krav) ---------- */
  --tap-min: 44px;      /* Minimum touch-target, WCAG 2.5.5 */
  --tap-primary: 48px;  /* Primære CTA'er */

  /* ---------- Fokus (skal være tydelig — ingen "browser-default" fjernet uden erstatning) ---------- */
  --focus-ring: 3px solid var(--brass-600);
  --focus-offset: 2px;

  /* ---------- Skygge — næsten ingen. Adskillelse via linje, ikke svæv ---------- */
  --shadow-card: 0 1px 2px rgba(16, 22, 31, 0.06), 0 1px 0 rgba(16, 22, 31, 0.04);
}