/* ============================================================
   Positronic DESIGN SYSTEM — Core Tokens
   ============================================================
   One shared spine across three brands:
     - Broadside         (punchy news, signal-red on ink)
     - Vector    (car mag, petrol + caution-yellow)
     - Ledger      (business news, bottle-green editorial)
   Each brand overrides --brand-* tokens; everything else is shared.
   ============================================================ */

/* ---------- Fonts ----------
   Local @font-face for everything we have files for. Archivo (body
   workhorse) and JetBrains Mono come from Google because no upload
   was provided for those families. */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;600&family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600&family=Space+Grotesk:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&display=swap");

@font-face {
  font-family: "Bebas Neue";
  src: url("../fonts/BebasNeue-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo Narrow";
  src: url("../fonts/ArchivoNarrow-VariableFont.ttf") format("truetype-variations");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo Narrow";
  src: url("../fonts/ArchivoNarrow-Italic-VariableFont.ttf") format("truetype-variations");
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/SourceSerif4-VariableFont.ttf") format("truetype-variations");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/SourceSerif4-Italic-VariableFont.ttf") format("truetype-variations");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

/* Merriweather — uploaded variable fonts (sokvagen ar relativ tokens.css i assets/css/, darfor ../fonts/; utan det 404:ade varje eget typsnitt live 2026-09-06). Used as the serif option
   for the Ledger (business) voice, where editorial gravitas is wanted. */
@font-face {
  font-family: "Merriweather";
  src: url("../fonts/Merriweather-VariableFont.ttf") format("truetype-variations");
  font-weight: 300 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Merriweather";
  src: url("../fonts/Merriweather-Italic-VariableFont_opsz_wdth_wght.ttf") format("truetype-variations");
  font-weight: 300 900;
  font-stretch: 75% 125%;
  font-style: italic;
  font-display: swap;
}

/* Raleway — uploaded. Available as a heritage display option for the
   Broadside voice (it's the legacy site face). */
@font-face {
  font-family: "Raleway";
  src: url("../fonts/Raleway-VariableFont.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Raleway";
  src: url("../fonts/Raleway-Italic-VariableFont.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Open Sans — uploaded. Workhorse body alternative. */
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/OpenSans-VariableFont.ttf") format("truetype-variations");
  font-weight: 300 800;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/OpenSans-Italic-VariableFont.ttf") format("truetype-variations");
  font-weight: 300 800;
  font-stretch: 75% 125%;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Declare color-scheme support so the browser does NOT apply forced
     Auto Dark Mode (which remaps authored background-colors at paint
     time under a dark OS preference). Every brand authors its own
     surfaces — light or dark — so we opt out of UA color remapping. */
  color-scheme: light dark;

  /* ============================================================
     TYPOGRAPHY
     Display: Bebas Neue        — tabloid energy, editorial when set quiet
     Headline: Archivo Narrow   — condensed sans, packs columns
     Body: Archivo              — humanist workhorse, very readable
     Serif: Source Serif 4      — for long-form / business voice
     Mono: JetBrains Mono       — bylines, datelines, data
     ============================================================ */
  --font-display: "Bebas Neue", "Archivo Narrow", Impact, sans-serif;
  --font-headline: "Archivo Narrow", "Archivo", system-ui, sans-serif;
  --font-body: "Archivo", system-ui, -apple-system, sans-serif;
  --font-serif: "Merriweather", "Source Serif 4", "Source Serif Pro", Georgia, serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  /* Type scale — eight steps, one job each. NOTHING outside this file sets a font
     size: not a component, not an article's own <style>. Eleven steps with five of
     them unused was a scale on paper and no scale in practice, and what filled the
     gap was every author inventing .72rem, .74rem, .75rem and .78rem for the same
     job.

     Fluid where the size has to survive a phone. The rem term is what the reader's
     own font setting scales; the vw term is what keeps the proportion. A step with
     no vw term is one that should not grow — 12 px is 12 px on every screen. */
  /* AGATSTEGET, och det är ETT steg. Mono sitter på en annan optisk storlek än brödtexten vid
     samma nominella px — 11 px JetBrains Mono läser som 13 px Archivo — vilket är varför varje
     tidning har en egen agatstorlek. Temat hade sju (9, 10, 11, 12, 13, 14, 15) för det jobbet,
     och kollapsade först till två: 11 och 12. Två storlekar en pixel isär för samma roll är
     samma fel i mindre skala, så bandet är nu ETT. 11, inte 12: mono tål det, och skillnaden
     mot brödtexten ska höras.
     ANVÄNDS BARA TILL MONO. Brödtext på 11 px är inte liten, den är oläsbar. */
  --text-xs:    0.6875rem;                                /* 11    — mono: kickers, datelines, etiketter, källrader */
  --text-sm:    0.875rem;                                 /* 14    — meta, small print, footnotes */
  --text-base:  1rem;                                     /* 16    — running body */
  --text-lg:    clamp(1rem, 0.94rem + 0.31vw, 1.125rem);  /* 16→18 — lede, intro */
  --text-xl:    clamp(1.125rem, 1rem + 0.63vw, 1.375rem); /* 18→22 — standfirst, sub-head */
  --text-2xl:   clamp(1.375rem, 1.1rem + 1.4vw, 1.9rem);  /* 22→30 — card title, pull quote, big stat */
  --text-3xl:   clamp(1.75rem, 1.1rem + 3.2vw, 3rem);     /* 28→48 — section head */
  --text-4xl:   clamp(2.25rem, 1.2rem + 5.2vw, 4.5rem);   /* 36→72 — page headline */

  /* Line heights — tight for display, generous for reading */
  --leading-none:    0.95;
  --leading-tight:   1.05;
  --leading-snug:    1.2;
  --leading-normal:  1.45;
  --leading-relaxed: 1.6;

  /* Tracking */
  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;
  --tracking-widest:  0.18em;

  /* ============================================================
     SPACING — 4px baseline
     ============================================================ */
  --space-0:  0;
  --space-1:  0.25rem;  /* 4 */
  --space-2:  0.5rem;   /* 8 */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  3rem;     /* 48 */
  --space-8:  4rem;     /* 64 */
  --space-9:  6rem;     /* 96 */
  --space-10: 8rem;     /* 128 */

  /* Layout — editorial column system */
  --col-narrow:  640px;   /* long-form reading column */
  --col-text:    720px;
  --col-wide:    960px;
  --col-page:    1280px;
  --col-bleed:   1600px;

  /* Editorial gutter */
  --gutter: clamp(1rem, 4vw, 3rem);
  /* Sektionsbandets INRE marginal (article.css, ramen). Samma tal på bägge sidor, i rem. */
  --gutter-inner: clamp(0.5rem, 2vw, 1.5rem);

  /* Gridens gap. Samma klämma som guttern, halva räckvidden: kolumnen och kanten andas
     i samma takt, och ingen grid bär ett fast steg ur avståndsskalan som gap. */
  --gap-grid: clamp(1rem, 2vw, 1.5rem);

  /* ============================================================
     RADII — minimal; this is editorial, not SaaS
     ============================================================ */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   12px;
  --radius-pill: 999px;

  /* ============================================================
     ELEVATION — paper-stack metaphor, no glow
     ============================================================ */
  --shadow-1: 0 1px 0 rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-2: 0 2px 0 rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.06);
  --shadow-3: 0 4px 0 rgba(0,0,0,0.05), 0 12px 32px rgba(0,0,0,0.10);
  --shadow-press: inset 0 2px 0 rgba(0,0,0,0.10);

  /* ============================================================
     NEUTRALS — shared across brands
     A warm-cool greyscale, paper-leaning
     ============================================================ */
  --ink-1000: #0A0A0B;   /* near-black, headline ink */
  --ink-900:  #16161A;
  --ink-800:  #25262C;
  --ink-700:  #3A3B43;
  --ink-600:  #5A5B65;   /* secondary text */
  --ink-500:  #7C7D87;
  --ink-400:  #A1A2AB;
  --ink-300:  #C5C6CC;
  --ink-200:  #E2E3E7;   /* hairline */
  --ink-150:  #ECEDEF;
  --ink-100:  #F4F4F5;   /* surface alt */
  --ink-50:   #FAFAFA;   /* surface */
  --paper:    #FFFFFF;

  /* Semantic */
  --success: #1B8C50;
  --warning: #C97E0A;
  --danger:  #C8202E;
  --info:    #1D5BB8;

/* ============================================================
   DATAVIS PALETTE — kategoriska + sekvens + divergerande
   ============================================================
   Sex distinkta kategori-hues, fem tonsteg per hue. Fungerar
   för pajdiagram, multi-line, stacked bars, donuts, choropleth.

   Design:
   - Hues är valda för max separation i CIE LAB (även för CVD)
   - Tonsteg går 100/300/500/700/900 så två närliggande
     subdivisioner (t.ex. inom samma kategori) ändå är läsbara
   - --cat-1 mappar till brand-primary i varje tema, så
     huvudserien alltid är "brand-färgen"
   ============================================================ */

  /* Kategori 1 — varierar per brand (override under [data-brand]) */
  --cat-1-100: #FBE9EB;
  --cat-1-300: #F08294;
  --cat-1-500: #D7142A;
  --cat-1-700: #94101F;
  --cat-1-900: #4A0810;

  /* Kategori 2 — petrol/teal */
  --cat-2-100: #DFEAF1;
  --cat-2-300: #6FA3BD;
  --cat-2-500: #0F4C75;
  --cat-2-700: #0A3552;
  --cat-2-900: #051C2D;

  /* Kategori 3 — gold/amber */
  --cat-3-100: #FCEFCE;
  --cat-3-300: #F4CB66;
  --cat-3-500: #D49A12;
  --cat-3-700: #8C650A;
  --cat-3-900: #483305;

  /* Kategori 4 — bottle green */
  --cat-4-100: #DCEAE2;
  --cat-4-300: #5D9A78;
  --cat-4-500: #0B5D3B;
  --cat-4-700: #073F28;
  --cat-4-900: #032015;

  /* Kategori 5 — terracotta/orange */
  --cat-5-100: #F4DDD3;
  --cat-5-300: #D78A6A;
  --cat-5-500: #B7472A;
  --cat-5-700: #7C2F1C;
  --cat-5-900: #41180D;

  /* Kategori 6 — plum/purple */
  --cat-6-100: #E5DDEA;
  --cat-6-300: #9B83AE;
  --cat-6-500: #5E3A75;
  --cat-6-700: #3F274F;
  --cat-6-900: #1F1327;

  /* Sequential ramp — single hue gradering (för t.ex. choropleth)
     Brand-färgad: byts ut per tema till brandens primary */
  --seq-1: #F6F4EF;  /* paper-warm */
  --seq-2: #F4C5CB;
  --seq-3: #E6717E;
  --seq-4: #D7142A;
  --seq-5: #94101F;
  --seq-6: #4A0810;

  /* Diverging ramp — för +/− värden runt en mittpunkt
     (t.ex. över/under budget, vinst/förlust) */
  --div-neg-3: #7A1620;
  --div-neg-2: #C8202E;
  --div-neg-1: #F2B6BC;
  --div-mid:   #F0EBDF;
  --div-pos-1: #B8D8C5;
  --div-pos-2: #1B8C50;
  --div-pos-3: #0E5430;


  /* ============================================================
     SEKTIONSFÄRGER — sex bärande hues per brand
     ============================================================
     Färgen på den här sidan betyder EN sak: vilken avdelning du är i. Inte
     temperatur, inte artikeltyp, inte hur säker uppgiften är. En kanal som
     betyder två saker betyder ingenting, och läsaren avkodar bara en.

     DE ÄR INTE --cat-*. Datavis-paletten har ett annat jobb (separation i ett
     diagram) och dess --cat-1 följer --brand-primary med flit, så huvudserien
     alltid är brandfärgen. Sektionsfärgen får aldrig vara brandfärgen: den är
     signalen — länkar, fokus, breaking. Delade de token skulle en ändring för
     diagrammen tyst flytta avdelningarna.

     Varje uppsättning är mätt, inte vald på känsla. Kraven, båda uppfyllda av
     alla 36:
       · kontrast mot brandets papper >= 4.5:1 (kickern är liten monotext)
       · perceptuellt avstånd (CIE76 ΔE) >= 25 till varandra OCH till
         --brand-primary
     Substrate är mörkbladigt, så dess sex är ljusa; det är samma krav, inte ett
     undantag från det.

     SEX ÄR TAKET. Behöver en publikation fler avdelningar än så har den för
     många — en läsare lär sig inte sju färger. Vilken sektion som tar vilket
     nummer sätts per publikation i Ghost (Design -> section_colors), inte här.
     ============================================================ */
  --sec-1: #1D4E89;   /* stålblått */
  --sec-2: #0F6B63;   /* petrolgrönt */
  --sec-3: #2E6B32;   /* skogsgrönt */
  --sec-4: #8A5A00;   /* ockra */
  --sec-5: #5B3A8C;   /* violett */
  --sec-6: #9B1B6B;   /* magenta */


  /* ============================================================
     STAMLAGET — fyra grunder, ordnade efter DJUP FRÅN PAPPRET
     ============================================================
     Systemet hade två kompletta scheman: pappret och inverteringen. `--brand-surface` och
     `--brand-tint` var bakgrunder UTAN egen ink, muted och line — alltså kunde ingenting sitta på
     dem som en zon, och därför sträckte sig varje zon i temat efter inverteringen. Det är hela
     skälet att tickern skrek: den var inte ett band, den var en helomvändning.

     Stegen går efter djup, inte efter ljushet. Ett ljust brand går nedåt, ett mörkt uppåt —
     Substrate inverterar UPP, som tokenfilen redan sa om sin invert.

       paper   dagligt underlag
       raised  ett steg av — kort, ticker, sidopanel. Tyst.
       anchor  mellantonen. Avslutar ett flöde: sidfot, kapitelslut, ingressblock.
       invert  bruket. Hero, breaking, CTA. Sällsynt — den är stark för att den nästan aldrig syns.

     BARA `anchor` ÄR EN NY FÄRG. De andra tre pekar på token som redan finns, så de kan inte
     driva isär från brandet. Och muted och line HÄRLEDS ur grunden med color-mix i stället för att
     återanvändas: --brand-muted är tonad för pappret och tappar kontrast på ett djupare underlag.
     Mätt över alla sex brand: ink >= 9.8:1, muted >= 4.9:1, hårlinje >= 1.39:1 på varje steg.
     ============================================================ */
  --mood-paper:  var(--brand-paper);
  --mood-ink:    var(--brand-ink);
  --mood-raised: var(--brand-surface);
  --mood-anchor: #E7E0D3;
  --mood-invert: var(--brand-invert);
  /* Accenten som stabil referens, av samma skäl som --mood-ink: ett läge som pekar om
     --brand-accent kan inte peka tillbaka på den utan att bita sig själv i svansen. */
  --mood-accent: var(--brand-accent);


  /* ============================================================
     BRICKORNA — tre semantiska bläck, inte fyra
     ============================================================
     Lagret fanns redan halvbyggt: --success/--warning/--danger/--info stod deklarerade EN gång,
     globalt, aldrig per brand, och användes nitton gånger som enbart textfärg. Alltså samma defekt
     som --brand-surface hade: en färg utan komplett uppsättning, som ingenting kan bäras av. Och
     eftersom de aldrig var brandtonade lästes --danger som SIGNALFÄRGEN på Provenance, vars
     primary är oxblod.

     TRE, INTE FYRA. --info användes noll gånger av nitton. En lugn faktabisats är vad `raised` är
     till för — en grund, inte ett larm. Ett blått informationsblock hade varit det som faktiskt
     var overkill.

     Brickorna svarar på en ANNAN fråga än stamlägena. Ett läge säger var i flödet läsaren är;
     en bricka säger vad påståendet är värt. Därför krockar de inte, och därför kan ett läge inte
     göra en brickas jobb.

     KONVENTIONEN VIKER DÄR BRANDET UPPTAR HUEN. Grön betyder bekräftad — utom på Ledger, vars
     signalfärg ÄR flaskgrön, där bekräftad blir blågrön. Rött betyder larm — utom på Broadside och
     Provenance, vars signalfärger är röda, där larmet dras djupare respektive mot orange. En bricka
     som förväxlas med en länk är ingen bricka.

     Grunden HÄRLEDS som en fjortonprocentig tvätt av bläcket över brandets papper: den kan inte
     driva, och den tonar sig rätt i ett mörkt brand utan en egen regel. Mätt över alla arton:
     bläck mot sin grund >= 4,5:1, grunden synlig mot pappret >= 1,04:1, och varje bläck minst
     dE 25 från signalfärgen OCH från sina syskon.
     ============================================================ */
  --tile-confirmed: #14663A;
  --tile-caution:   #7A5406;
  --tile-alarm:     #7A1010;

  /* Default brand = Broadside. Themes override these. */
  --brand-name:      "Broadside";
  --brand-ink:       var(--ink-1000);
  --brand-paper:     var(--paper);
  --brand-surface:   var(--ink-50);
  --brand-line:      var(--ink-200);
  --brand-muted:     var(--ink-600);

  --brand-primary:   #D7142A;   /* signal red */
  --brand-on-primary:#FFFFFF;
  --brand-accent:    #F2C94C;   /* warning yellow flash */
  --brand-tint:      #FBE9EB;   /* primary @ 10% */

  /* Inverted surface — the dark contrast zone used by masthead strip,
     footer, ticker, fact-box head and quiz head. Each brand owns its
     own invert; Substrate (already dark) inverts UP to a raised panel. */
  --brand-invert:        #0A0A0B;
  --brand-on-invert:     #FFFFFF;
  --brand-invert-muted:  rgba(255,255,255,0.62);
  --brand-invert-line:   rgba(255,255,255,0.14);
  --brand-invert-accent: #F2C94C;

  --brand-display-font: var(--font-display);
  --brand-body-font:    var(--font-body);
  --brand-serif-font:   var(--font-serif);

  --brand-display-tracking: 0.005em;
  --brand-display-weight:   400;
  --brand-display-case:     uppercase;
}

/* ============================================================
   THEME: BROADSIDE — punchy news / tabloid energy
   ============================================================ */
[data-brand="broadside"] {
  --brand-name:      "Broadside";
  --brand-ink:       #0A0A0B;
  --brand-paper:     #FFFFFF;
  --brand-surface:   #F6F4EF;       /* warm bone */
  --brand-line:      #E2E3E7;
  --brand-muted:     #5A5B65;

  --brand-primary:   #D7142A;       /* signal red */
  --brand-on-primary:#FFFFFF;
  --brand-accent:    #F2C94C;       /* yellow flash */
  --brand-tint:      #FBE9EB;

  /* invert: signal-red brand → near-black contrast zone */
  --brand-invert:        #0A0A0B;
  --brand-on-invert:     #FFFFFF;
  --brand-invert-muted:  rgba(255,255,255,0.62);
  --brand-invert-line:   rgba(255,255,255,0.14);
  --brand-invert-accent: #F2C94C;

  --brand-display-font: "Bebas Neue", Impact, sans-serif;
  --brand-display-case: uppercase;
  --brand-display-tracking: 0.005em;
  --brand-display-weight: 400;

  --sec-1: #1D4E89;   /* stålblått */
  --sec-2: #0F6B63;   /* petrolgrönt */
  --sec-3: #2E6B32;   /* skogsgrönt */
  --sec-4: #8A5A00;   /* ockra */
  --sec-5: #5B3A8C;   /* violett */
  --sec-6: #9B1B6B;   /* magenta */

  /* Stamläget: tre pekare och en ny färg. */
  --mood-paper:  var(--brand-paper);
  --mood-ink:    var(--brand-ink);
  --mood-raised: var(--brand-surface);
  --mood-anchor: #E7E0D3;   /* bone, ett steg djupare */
  --mood-invert: var(--brand-invert);

  /* Brickorna.
     signalfargen ar rod — larmet dras djupare for att inte lasas som en lank */
  --tile-confirmed: #14663A;
  --tile-caution:   #7A5406;
  --tile-alarm:     #7A1010;
}

/* ============================================================
   THEME: VECTOR — car magazine / petrol & asphalt
   (formerly Vector)
   ============================================================ */
[data-brand="vector"] {
  /* cat-1 follows brand primary (petrol blue) */
  --cat-1-100: #DFEAF1; --cat-1-300: #6FA3BD; --cat-1-500: #0F4C75;
  --cat-1-700: #0A3552; --cat-1-900: #051C2D;
  --seq-1: #EDEFF2; --seq-2: #C7D7E3; --seq-3: #6FA3BD;
  --seq-4: #0F4C75; --seq-5: #0A3552; --seq-6: #051C2D;
  --brand-name:      "Vector";
  --brand-ink:       #0E1116;
  --brand-paper:     #FFFFFF;
  --brand-surface:   #EDEFF2;       /* asphalt cool */
  --brand-line:      #D7DBE0;
  --brand-muted:     #545A66;

  --brand-primary:   #0F4C75;       /* deep petrol blue */
  --brand-on-primary:#FFFFFF;
  --brand-accent:    #F4B400;       /* caution yellow */
  --brand-tint:      #E0EBF3;

  /* invert: petrol brand → asphalt-black contrast zone */
  --brand-invert:        #0B0E13;
  --brand-on-invert:     #FFFFFF;
  --brand-invert-muted:  rgba(255,255,255,0.60);
  --brand-invert-line:   rgba(255,255,255,0.12);
  --brand-invert-accent: #F4B400;

  --brand-display-font: "Archivo Narrow", "Archivo", sans-serif;
  --brand-display-case: uppercase;
  --brand-display-tracking: -0.01em;
  --brand-display-weight: 800;

  --sec-1: #B03A1A;   /* rost */
  --sec-2: #1E6B45;   /* racinggrönt */
  --sec-3: #5D3A87;   /* violett */
  --sec-4: #8A5A00;   /* ockra */
  --sec-5: #A01B5C;   /* magenta */
  --sec-6: #5C6B1F;   /* oliv */

  /* Stamläget: tre pekare och en ny färg. */
  --mood-paper:  var(--brand-paper);
  --mood-ink:    var(--brand-ink);
  --mood-raised: var(--brand-surface);
  --mood-anchor: #D6DCE3;   /* asfalt, ett steg djupare */
  --mood-invert: var(--brand-invert);

  /* Brickorna. */
  --tile-confirmed: #14663A;
  --tile-caution:   #7A5406;
  --tile-alarm:     #A31F17;
}

/* ============================================================
   THEME: LEDGER — business / serious editorial
   ============================================================ */
[data-brand="ledger"] {
  --cat-1-100: #DCEAE2; --cat-1-300: #5D9A78; --cat-1-500: #0B5D3B;
  --cat-1-700: #073F28; --cat-1-900: #032015;
  --seq-1: #FBF8F2; --seq-2: #DCEAE2; --seq-3: #5D9A78;
  --seq-4: #0B5D3B; --seq-5: #073F28; --seq-6: #032015;
  --brand-name:      "Ledger";
  --brand-ink:       #14161A;
  --brand-paper:     #FBF8F2;       /* paper cream */
  --brand-surface:   #F2EEE5;
  --brand-line:      #DDD7C9;
  --brand-muted:     #5A5B55;

  --brand-primary:   #0B5D3B;       /* bottle green */
  --brand-on-primary:#FBF8F2;
  --brand-accent:    #B7472A;       /* terracotta */
  --brand-tint:      #E5EFE8;

  /* invert: bottle-green brand → deep green-black contrast zone */
  --brand-invert:        #08231A;
  --brand-on-invert:     #FBF8F2;
  --brand-invert-muted:  rgba(251,248,242,0.60);
  --brand-invert-line:   rgba(251,248,242,0.16);
  --brand-invert-accent: #D98E76;

  --brand-display-font: "Merriweather", "Source Serif 4", Georgia, serif;
  --brand-display-case: none;
  --brand-display-tracking: -0.015em;
  --brand-display-weight: 700;

  --sec-1: #7A2230;   /* oxblod */
  --sec-2: #1B3A66;   /* marinblå */
  --sec-3: #8A6512;   /* senap */
  --sec-4: #5A2E63;   /* plommon */
  --sec-5: #6B4423;   /* brun */
  --sec-6: #1B7181;   /* cyanblå */

  /* Stamläget: tre pekare och en ny färg. */
  --mood-paper:  var(--brand-paper);
  --mood-ink:    var(--brand-ink);
  --mood-raised: var(--brand-surface);
  --mood-anchor: #E2DCCB;   /* gradd, ett steg djupare */
  --mood-invert: var(--brand-invert);

  /* Brickorna.
     signalfargen ar flaskgron — bekraftad forskjuts till blagron */
  --tile-confirmed: #14606B;
  --tile-caution:   #6E5210;
  --tile-alarm:     #8E2018;
}

/* ============================================================
   THEME: PROVENANCE — conservative-traditional, ivory + bordeaux
   Reference: American Affairs, First Things, Compact, The Critic
   Established tradition. Classic typographic hierarchy. Sources
   that feel like they were already there.
   ============================================================ */
[data-brand="provenance"] {
  /* cat-1 follows brand primary (bordeaux) */
  --cat-1-100: #F0E0DC; --cat-1-300: #B86A5C; --cat-1-500: #6B1E1E;
  --cat-1-700: #4A1414; --cat-1-900: #2A0B0B;
  --seq-1: #F4EBD5; --seq-2: #ECCBC0; --seq-3: #C97D6F;
  --seq-4: #6B1E1E; --seq-5: #4A1414; --seq-6: #2A0B0B;

  --brand-name:      "Provenance";
  --brand-ink:       #261612;       /* warm brown-black */
  --brand-paper:     #F4EBD5;       /* ivory */
  --brand-surface:   #ECDFC2;       /* deeper ivory */
  --brand-line:      #C9B788;
  --brand-muted:     #6E5742;

  --brand-primary:   #6B1E1E;       /* oxblood / bordeaux */
  --brand-on-primary:#F4EBD5;
  --brand-accent:    #A07636;       /* antique brass */
  --brand-tint:      #EAD4CD;

  /* invert: oxblood brand → warm espresso contrast zone */
  --brand-invert:        #25120F;
  --brand-on-invert:     #F4EBD5;
  --brand-invert-muted:  rgba(244,235,213,0.60);
  --brand-invert-line:   rgba(244,235,213,0.16);
  --brand-invert-accent: #C99A5B;

  --brand-display-font: "EB Garamond", "Caslon", "Times New Roman", serif;
  --brand-body-font:    "EB Garamond", Georgia, serif;
  --brand-serif-font:   "EB Garamond", Georgia, serif;
  --brand-display-case: none;
  --brand-display-tracking: -0.005em;
  --brand-display-weight: 700;

  --sec-1: #1F5A2A;   /* skogsgrönt */
  --sec-2: #23395B;   /* marinblå */
  --sec-3: #6B6414;   /* guldoliv */
  --sec-4: #6B2A5A;   /* plommon */
  --sec-5: #8F5A2A;   /* sienna */
  --sec-6: #6E6459;   /* grafit */

  /* Stamläget: tre pekare och en ny färg. */
  --mood-paper:  var(--brand-paper);
  --mood-ink:    var(--brand-ink);
  --mood-raised: var(--brand-surface);
  --mood-anchor: #DCC79A;   /* djup sepia */
  --mood-invert: var(--brand-invert);

  /* Brickorna.
     signalfargen ar oxblod — larmet dras mot orange for att komma ut ur den */
  --tile-confirmed: #24563A;
  --tile-caution:   #6E5210;
  --tile-alarm:     #9E3115;
}

/* ============================================================
   THEME: SUBSTRATE — modern dark mode, neon cyan + magenta
   Reference: The Information, Stratechery, Pirate Wires
   Tech / institutional finance media. Sans for hierarchy,
   mono for data, neon signal, lots of whitespace.
   ============================================================ */
[data-brand="substrate"] {
  /* cat-1 follows brand primary (cyan) */
  --cat-1-100: #033E38; --cat-1-300: #007F73; --cat-1-500: #00E5D1;
  --cat-1-700: #66EEDF; --cat-1-900: #CCF9F2;
  --seq-1: #0A0A0B; --seq-2: #16161A; --seq-3: #033E38;
  --seq-4: #007F73; --seq-5: #00E5D1; --seq-6: #66EEDF;

  --brand-name:      "Substrate";
  --brand-ink:       #F2F4F7;       /* light text on dark */
  --brand-paper:     #0A0A0B;       /* near-black bg */
  --brand-surface:   #16161A;       /* card surface */
  --brand-line:      #2A2B30;
  --brand-muted:     #8B8D96;

  --brand-primary:   #00E5D1;       /* neon cyan */
  --brand-on-primary:#0A0A0B;
  --brand-accent:    #FF2D9D;       /* electric magenta */
  --brand-tint:      rgba(0, 229, 209, 0.12);

  /* Bruket är en VÄNDNING, inte ett steg till: grunden tar bläckets färg och bläcket tar
     pappret. De ljusa branden gör samma sak åt andra hållet — det är en regel, speglad. */
  --brand-invert:        #F2F4F7;
  --brand-on-invert:     #0A0A0B;
  --brand-invert-muted:  rgba(10,10,11,0.64);
  --brand-invert-line:   rgba(10,10,11,0.16);
  /* Signalen är tonad för den mörka grunden och bär inte den ljusa. Samma kulör, djupnad. */
  --brand-invert-accent: #00706A;

  --brand-display-font: "Space Grotesk", system-ui, -apple-system, sans-serif;
  --brand-body-font:    "Space Grotesk", system-ui, sans-serif;
  --brand-serif-font:   "Space Grotesk", system-ui, sans-serif;
  --brand-display-case: none;
  --brand-display-tracking: -0.025em;
  --brand-display-weight: 700;

  --sec-1: #7FB2FF;   /* ljusblå */
  --sec-2: #A78BFA;   /* violett */
  --sec-3: #F5C542;   /* bärnsten */
  --sec-4: #C3E88D;   /* lime */
  --sec-5: #FF9E64;   /* orange */
  --sec-6: #F07178;   /* korall */

  /* Stamläget: tre pekare och en ny färg. */
  --mood-paper:  var(--brand-paper);
  --mood-ink:    var(--brand-ink);
  --mood-raised: var(--brand-surface);
  --mood-anchor: #25252C;   /* djupaste grunden på samma sida om vändningen */
  --mood-invert: var(--brand-invert);

  /* Brickorna.
     morkt brand: blacken ar ljusa, tvatten blir en mork ton */
  --tile-confirmed: #7EE0A0;
  --tile-caution:   #F5C542;
  --tile-alarm:     #FF7A7A;
}

/* ============================================================
   THEME: ATELIER — aspirational lifestyle, cream + deep teal
   Reference: Air Mail, Monocle, Drift, Cereal
   Generous margins, classy serif, warm neutrals, gold accent,
   spatial. Curated consumption media.
   ============================================================ */
[data-brand="atelier"] {
  /* cat-1 follows brand primary (teal) */
  --cat-1-100: #D9E5E1; --cat-1-300: #5A8B82; --cat-1-500: #0A5249;
  --cat-1-700: #06382F; --cat-1-900: #021E18;
  --seq-1: #F5EFE2; --seq-2: #D9E5E1; --seq-3: #5A8B82;
  --seq-4: #0A5249; --seq-5: #06382F; --seq-6: #021E18;

  --brand-name:      "Atelier";
  --brand-ink:       #2A2620;       /* warm dark */
  --brand-paper:     #F5EFE2;       /* cream */
  --brand-surface:   #ECE3CE;
  --brand-line:      #D5C8A6;
  --brand-muted:     #71665A;

  --brand-primary:   #0A5249;       /* deep teal */
  --brand-on-primary:#F5EFE2;
  --brand-accent:    #B89244;       /* gold */
  --brand-tint:      #DDE9E5;

  /* invert: teal brand → deep teal contrast zone, gold accent */
  --brand-invert:        #08322B;
  --brand-on-invert:     #F5EFE2;
  --brand-invert-muted:  rgba(245,239,226,0.62);
  --brand-invert-line:   rgba(245,239,226,0.16);
  --brand-invert-accent: #D2A85A;

  --brand-display-font: "Cormorant Garamond", "Tiempos", Georgia, serif;
  --brand-body-font:    "Cormorant Garamond", Georgia, serif;
  --brand-serif-font:   "Cormorant Garamond", Georgia, serif;
  --brand-display-case: none;
  --brand-display-tracking: -0.005em;
  --brand-display-weight: 500;

  --sec-1: #5C2A5E;   /* aubergine */
  --sec-2: #94472C;   /* terrakotta */
  --sec-3: #2C4269;   /* marinblå */
  --sec-4: #4A6B28;   /* oliv */
  --sec-5: #8E4A5C;   /* dammrosa */
  --sec-6: #7C5F10;   /* guld */

  /* Stamläget: tre pekare och en ny färg. */
  --mood-paper:  var(--brand-paper);
  --mood-ink:    var(--brand-ink);
  --mood-raised: var(--brand-surface);
  --mood-anchor: #DED0AE;   /* gradd, ett steg djupare */
  --mood-invert: var(--brand-invert);

  /* Brickorna.
     signalfargen ar djup petrol — bekraftad forskjuts till oliv */
  --tile-confirmed: #3D6B1F;
  --tile-caution:   #7A5A10;
  --tile-alarm:     #96301F;
}

/* ============================================================
   GLOBAL RESET (light)
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--brand-body-font, var(--font-body));
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--brand-ink);
  background: var(--brand-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }

/* ============================================================
   UTILITY CLASSES (just enough — not Tailwind)
   ============================================================ */
.kicker {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  /* Sektionen om elementet står inuti en, annars signalfärgen. Se SEKTIONSFÄRGER ovan. */
  color: var(--section, var(--brand-primary));
  font-weight: 600;
}

.eyebrow {
  font-family: var(--font-headline);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--brand-ink);
}

.byline {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--brand-muted);
  letter-spacing: var(--tracking-wide);
}

.lede {
  font-family: var(--brand-serif-font, var(--font-serif));
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--ink-800);
  font-weight: 400;
}

.headline {
  font-family: var(--brand-display-font);
  font-weight: var(--brand-display-weight);
  text-transform: var(--brand-display-case);
  letter-spacing: var(--brand-display-tracking);
  line-height: var(--leading-none);
  color: var(--brand-ink);
  margin: 0;
}

.rule {
  border: 0;
  border-top: 1px solid var(--brand-line);
  margin: var(--space-5) 0;
}
.rule--thick { border-top: 3px solid var(--brand-ink); }
.rule--brand { border-top: 3px solid var(--brand-primary); }