/* ==========================================================================
   dense-design · tokens.css
   Designtokens härledda från Dense Discovery (densediscovery.com) –
   nyhetsbrevet (arkiv-HTML, nr 400–409) och webbplatsen (Pico-bas + website.css).
   Alla värden i "källa"-kommentarer är uppmätta/avlästa, inte gissade.
   Mörkt läge finns inte i originalet – det är en härledning (se botten).
   ========================================================================== */

:root {
  /* ---------- Typografi ---------- */
  --dd-font: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", sans-serif;
  --dd-font-mono: "Courier New", Courier, monospace;      /* källa: .text-code, span.code */

  --dd-fs-root: 17px;            /* nyhetsbrev body 17px; webb 16px desktop / 17px mobil */
  --dd-fs-xs: .8rem;             /* .text-xs  (13.6px) */
  --dd-fs-sm: .9rem;             /* .text-small (15.3px) */
  --dd-fs-md: 1rem;              /* p, li, h2, h3 = 17px */
  --dd-fs-lg: 1.235rem;          /* .lg / intro  = 21px */
  --dd-fs-xl: 1.882rem;          /* .xl (siffror) = 32px */
  --dd-fs-h1: 1.353rem;          /* sektionsrubrik h1 = 23px */
  --dd-fs-2xl: 2.125rem;         /* webb h1 (hero) */
  --dd-fs-3xl: 2.824rem;         /* .issue h1 (nummer) = 48px */

  --dd-lh-body: 1.47;            /* 25/17 */
  --dd-lh-lead: 1.476;           /* 31/21 */
  --dd-lh-tight: 1.19;           /* 38/32, 27/23 */
  --dd-lh-display: 1.1;          /* webb h1 */
  --dd-lh-small: 1.45;

  --dd-fw-regular: 400;
  --dd-fw-medium: 500;           /* knappar i nyhetsbrevet */
  --dd-fw-bold: 600;             /* b/strong, h2, knappar på webben */
  --dd-fw-heading: 700;          /* h1 */
  --dd-fw-display: 800;          /* .issue h1 */

  /* ---------- Färg: grund ---------- */
  --dd-ink: #313131;             /* all text, knappar, ramar – aldrig ren svart */
  --dd-ink-strong: #000000;      /* hover-tillstånd */
  --dd-paper: #ffffff;
  --dd-panel: #f1f1f1;           /* neutral yta: sidfot, sidopanel, sponsor */
  --dd-muted: #777777;           /* h3, citat, bildtexter (nyhetsbrev) */
  --dd-muted-alpha: #00000075;   /* dämpad text/ikoner på webben, inaktiva kontroller */
  --dd-rule: #91919170;          /* 2px ramar runt fält/skärmbilder, listlinjer */
  --dd-rule-strong: var(--dd-ink);
  --dd-mark: #fdf2b4;            /* markering/aktiv rad */
  --dd-selection: #029ae840;

  /* Masthead – varje nummer får egen accentfärg; detta är standardvärdet */
  --dd-masthead: #e2e1d1;
  --dd-masthead-ink: #313131;    /* konstant: numrets färg är alltid ljus, även i mörkt läge */
  --dd-masthead-muted: #88877d;

  /* ---------- Färg: status ---------- */
  --dd-error: #db5644;        --dd-error-tint: #fbf1f0;
  --dd-success: #7cb663;      --dd-success-tint: #f1f6ef;
  --dd-warning: #e78931;      --dd-warning-tint: #faf4ef;
  --dd-info: #f1c755;         --dd-info-tint: #faf4e5;
  --dd-btn-action: #ffa23a;   /* .btn-action */
  --dd-btn-yes: #afe6a2;      /* .btn-y */
  --dd-btn-no: #edc8c8;       /* .btn-n */

  /* ---------- Färg: kategorier (accent / ton / dämpad text på tonen) ---------- */
  --dd-cat-num-accent: #29899e; --dd-cat-num-tint: #e8f5f7; --dd-cat-num-muted: #828f92;  /* Numbers */
  --dd-cat-too-accent: #db5644; --dd-cat-too-tint: #fbf1f0; --dd-cat-too-muted: #9a8683;  /* Tools (muted härledd) */
  --dd-cat-med-accent: #7cb663; --dd-cat-med-tint: #f1f6ef; --dd-cat-med-muted: #808080;  /* Media */
  --dd-cat-ins-accent: #e78931; --dd-cat-ins-tint: #faf4ef; --dd-cat-ins-muted: #837a71;  /* Inspiration */
  --dd-cat-boo-accent: #3175b9; --dd-cat-boo-tint: #eaf2fa; --dd-cat-boo-muted: #7f8893;  /* Books (muted härledd) */
  --dd-cat-soc-accent: #6d54a5; --dd-cat-soc-tint: #f3f1f8; --dd-cat-soc-muted: #857d96;  /* Socials */
  --dd-cat-gue-accent: #c74b9e; --dd-cat-gue-tint: #fbf2f8; --dd-cat-gue-muted: #9b8b96;  /* Guest */
  --dd-cat-pol-accent: #f1c755; --dd-cat-pol-tint: #faf4e5; --dd-cat-pol-muted: #8f8c84;  /* Poll */
  --dd-cat-wan-accent: #41a494; --dd-cat-wan-tint: #eaf5f3; --dd-cat-wan-muted: #7e908d;  /* Wanted/Misc */
  --dd-cat-spl-accent: #a88c73; --dd-cat-spl-tint: #f6f3f1; --dd-cat-spl-muted: #968d85;  /* Special */
  --dd-cat-moo-accent: #8b8b4b; --dd-cat-moo-tint: #f4f4eb; --dd-cat-moo-muted: #929287;  /* Mood */

  /* Aktiv kategori – sätts av .cat-* och läses av komponenterna */
  --dd-accent: var(--dd-ink);
  --dd-tint: var(--dd-panel);
  --dd-tint-muted: var(--dd-muted);

  /* ---------- Avstånd: 5px-raster ---------- */
  --dd-s1: 5px;  --dd-s2: 10px; --dd-s3: 15px; --dd-s4: 20px; --dd-s5: 25px;
  --dd-s6: 30px; --dd-s7: 35px; --dd-s8: 40px; --dd-s10: 50px; --dd-s12: 60px;
  --dd-para: 20px;               /* marginal under p/li/h3 */
  --dd-section-gap: 25px;        /* .spc mellan sektioner (15px mobil) */
  --dd-gutter: 40px;             /* ytterkant (15px mobil) */
  --dd-gutter-inner: 20px;       /* mellan kolumner, per sida */
  --dd-page-rhythm: 3rem;        /* section-marginal på webben: 3/4/5rem */

  /* ---------- Layout ---------- */
  --dd-measure: 740px;           /* nyhetsbrevets bredd */
  --dd-col-narrow: 40%;          /* 296px */
  --dd-col-wide: 60%;            /* 444px */
  --dd-bar-w: 26px;              /* färgbalk framför h1 (9px mobil) */
  --dd-bar-gap: 14px;            /* (6px mobil) */
  --dd-bar-w-web: 1.4rem;
  --dd-bar-gap-web: .5rem;

  /* ---------- Form ---------- */
  --dd-radius: .5rem;            /* webben: knappar, fält, paneler */
  --dd-radius-btn: 10px;         /* nyhetsbrevets knappar */
  --dd-radius-round: 50%;
  --dd-border: 2px;              /* all "chrome": knappar, paneler, fält */
  --dd-border-sep: 5px;          /* vita separatorer mellan tonade block */
  --dd-border-alert: 5px;
  --dd-shadow: none;             /* inga skuggor i systemet */
  --dd-halo: 0 0 0 1rem var(--dd-tint);   /* hover på feature-kort: spridning, ingen oskärpa */

  /* ---------- Rörelse ---------- */
  --dd-ease: ease-in-out;
  --dd-ease-out: cubic-bezier(.2, .7, .2, 1);   /* för in-animationer (härledd) */
  --dd-t-fast: .15s;             /* --pico-transition */
  --dd-t-med: .3s;               /* paneler, titelpill */
  --dd-t-slow: .6s;              /* bildstaplar */

  /* ---------- Formfält ---------- */
  --dd-field-py: .5rem;
  --dd-field-px: .8rem;
  --dd-field-bg: var(--dd-paper);
  --dd-field-border: var(--dd-rule);
  --dd-field-border-active: var(--dd-ink);
  --dd-field-placeholder: var(--dd-muted-alpha);

  color-scheme: light;
}

/* Mobil: samma tokens, snävare värden (källa: @media (max-width:740px) i nyhetsbrevet) */
@media (max-width: 740px) {
  :root {
    --dd-fs-root: 16px;
    --dd-fs-lg: 1.25rem;         /* 20/29 */
    --dd-fs-xl: 1.6875rem;       /* 27/34 */
    --dd-fs-h1: 1.5rem;          /* 24/30 */
    --dd-lh-body: 1.5;           /* 24/16 */
    --dd-gutter: 15px;
    --dd-section-gap: 15px;
    --dd-bar-w: 9px;
    --dd-bar-gap: 6px;
  }
}

/* ==========================================================================
   Mörkt läge – HÄRLEDNING. Originalet är enbart ljust (data-theme="light").
   Principer: bläck och papper byter plats men förblir "nästan", inte rent;
   kategoritoner blandas in i papperet istället för att ligga som pastell.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --dd-ink: #e4e4e0;
    --dd-ink-strong: #ffffff;
    --dd-paper: #1b1b1a;
    --dd-panel: #262625;
    --dd-muted: #9a9a96;
    --dd-muted-alpha: #ffffff70;
    --dd-rule: #ffffff30;
    --dd-mark: #5a4e16;
    --dd-selection: #029ae860;
    --dd-error-tint: #3a2321; --dd-success-tint: #22301e; --dd-warning-tint: #3a2a1b; --dd-info-tint: #3a3216;
    --dd-cat-num-tint: #15292d; --dd-cat-too-tint: #35211e; --dd-cat-med-tint: #1f2a1b; --dd-cat-ins-tint: #35261a;
    --dd-cat-boo-tint: #182536; --dd-cat-soc-tint: #241f33; --dd-cat-gue-tint: #331f2d; --dd-cat-pol-tint: #35301a;
    --dd-cat-wan-tint: #182b28; --dd-cat-spl-tint: #2b2521; --dd-cat-moo-tint: #2a2a1e;
    --dd-cat-num-muted: #8fb0b6; --dd-cat-too-muted: #c09a95; --dd-cat-med-muted: #a3b89c; --dd-cat-ins-muted: #c0a58e;
    --dd-cat-boo-muted: #96acc4; --dd-cat-soc-muted: #a99ec4; --dd-cat-gue-muted: #c299b4; --dd-cat-pol-muted: #bdb48f;
    --dd-cat-wan-muted: #93b5ae; --dd-cat-spl-muted: #b3a498; --dd-cat-moo-muted: #b0b08c;
    --dd-field-bg: #222221;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --dd-ink: #e4e4e0;
  --dd-ink-strong: #ffffff;
  --dd-paper: #1b1b1a;
  --dd-panel: #262625;
  --dd-muted: #9a9a96;
  --dd-muted-alpha: #ffffff70;
  --dd-rule: #ffffff30;
  --dd-mark: #5a4e16;
  --dd-selection: #029ae860;
  --dd-error-tint: #3a2321; --dd-success-tint: #22301e; --dd-warning-tint: #3a2a1b; --dd-info-tint: #3a3216;
  --dd-cat-num-tint: #15292d; --dd-cat-too-tint: #35211e; --dd-cat-med-tint: #1f2a1b; --dd-cat-ins-tint: #35261a;
  --dd-cat-boo-tint: #182536; --dd-cat-soc-tint: #241f33; --dd-cat-gue-tint: #331f2d; --dd-cat-pol-tint: #35301a;
  --dd-cat-wan-tint: #182b28; --dd-cat-spl-tint: #2b2521; --dd-cat-moo-tint: #2a2a1e;
  --dd-cat-num-muted: #8fb0b6; --dd-cat-too-muted: #c09a95; --dd-cat-med-muted: #a3b89c; --dd-cat-ins-muted: #c0a58e;
  --dd-cat-boo-muted: #96acc4; --dd-cat-soc-muted: #a99ec4; --dd-cat-gue-muted: #c299b4; --dd-cat-pol-muted: #bdb48f;
  --dd-cat-wan-muted: #93b5ae; --dd-cat-spl-muted: #b3a498; --dd-cat-moo-muted: #b0b08c;
  --dd-field-bg: #222221;
}

/* ---------- Kategoriväljare ----------
   Sätt på valfri container; .dd-title, .dd-tint, .dd-feature, .dd-progress m.fl. läser variablerna. */
.cat-num { --dd-accent: var(--dd-cat-num-accent); --dd-tint: var(--dd-cat-num-tint); --dd-tint-muted: var(--dd-cat-num-muted); }
.cat-too { --dd-accent: var(--dd-cat-too-accent); --dd-tint: var(--dd-cat-too-tint); --dd-tint-muted: var(--dd-cat-too-muted); }
.cat-med { --dd-accent: var(--dd-cat-med-accent); --dd-tint: var(--dd-cat-med-tint); --dd-tint-muted: var(--dd-cat-med-muted); }
.cat-ins { --dd-accent: var(--dd-cat-ins-accent); --dd-tint: var(--dd-cat-ins-tint); --dd-tint-muted: var(--dd-cat-ins-muted); }
.cat-boo { --dd-accent: var(--dd-cat-boo-accent); --dd-tint: var(--dd-cat-boo-tint); --dd-tint-muted: var(--dd-cat-boo-muted); }
.cat-soc { --dd-accent: var(--dd-cat-soc-accent); --dd-tint: var(--dd-cat-soc-tint); --dd-tint-muted: var(--dd-cat-soc-muted); }
.cat-gue { --dd-accent: var(--dd-cat-gue-accent); --dd-tint: var(--dd-cat-gue-tint); --dd-tint-muted: var(--dd-cat-gue-muted); }
.cat-pol { --dd-accent: var(--dd-cat-pol-accent); --dd-tint: var(--dd-cat-pol-tint); --dd-tint-muted: var(--dd-cat-pol-muted); }
.cat-wan { --dd-accent: var(--dd-cat-wan-accent); --dd-tint: var(--dd-cat-wan-tint); --dd-tint-muted: var(--dd-cat-wan-muted); }
.cat-spl { --dd-accent: var(--dd-cat-spl-accent); --dd-tint: var(--dd-cat-spl-tint); --dd-tint-muted: var(--dd-cat-spl-muted); }
.cat-moo { --dd-accent: var(--dd-cat-moo-accent); --dd-tint: var(--dd-cat-moo-tint); --dd-tint-muted: var(--dd-cat-moo-muted); }
/* Status som kategori – samma mekanik */
.cat-error   { --dd-accent: var(--dd-error);   --dd-tint: var(--dd-error-tint);   --dd-tint-muted: var(--dd-cat-too-muted); }
.cat-success { --dd-accent: var(--dd-success); --dd-tint: var(--dd-success-tint); --dd-tint-muted: var(--dd-cat-med-muted); }
.cat-warning { --dd-accent: var(--dd-warning); --dd-tint: var(--dd-warning-tint); --dd-tint-muted: var(--dd-cat-ins-muted); }
.cat-info    { --dd-accent: var(--dd-info);    --dd-tint: var(--dd-info-tint);    --dd-tint-muted: var(--dd-cat-pol-muted); }
.cat-neutral { --dd-accent: var(--dd-ink);     --dd-tint: var(--dd-panel);        --dd-tint-muted: var(--dd-muted); }