/* Kåda – designtokens. Källa: designsystemet "Kåda" i Claude
   (https://claude.ai/artifact/FyyfARLNFFKxdnA2seZVHR), project/tokens.json.
   Typsnitt (Google Fonts), typsystemet "Marcellus + Instrument Sans", arbetsversion 10.11.2026:
   Marcellus · Instrument+Sans:ital,wdth,wght@0,75..100,400..700;1,75..100,400..700 · JetBrains+Mono:wght@400;500 */

:root {
  /* Färg – bara kådan har färg */
  --natt: #0d0c0b;      /* bakgrund, aldrig #000 */
  --barnsten: #e7a532;  /* ringen + högst EN detalj per yta */
  --benvit: #efeae0;    /* ordbild, rubriker, löptext, aldrig #fff */
  --mossa: #89996c;     /* mono, bildtexter, sekundärt. Aldrig varumärkesfärg */
  --bark: #2a2622;      /* endast textur/mönster, aldrig text */

  /* Alias */
  --yta: var(--natt);
  --text: var(--benvit);
  --text-dampad: var(--mossa);
  --accent: var(--barnsten);
  --linje: rgba(239, 234, 224, 0.32);
  --linje-stark: var(--benvit);

  /* Typsnitt (Grenze endast i logotyp-SVG:n) */
  --font-rubrik: Marcellus, "Times New Roman", serif;          /* rösten: kampanjrader och rubriker */
  --font-text: "Instrument Sans", "Helvetica Neue", Arial, sans-serif; /* natten: ingress, brödtext, descriptor, detaljer */
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* Avstånd */
  --space-1: 4px;
  --space-2: 8px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;

  /* Radie – Kåda är rak och kantig */
  --radius-0: 0;
  --radius-1: 2px;
  --radius-rund: 9999px;

  --stroke-har: 1px;
}

/* Typografiska stilar (webb)
   Regler: Marcellus alltid i gemener (aldrig versaler), alltid på mörk yta, aldrig i brödtext.
   Instrument Sans Condensed endast i detaljer och navigering, aldrig under 12 px.
   Kursiv endast för ritualen. Högst två typsnitt per yta utöver mono. Grenze endast i ordbilden (SVG). */
.t-kampanj    { font-family: var(--font-rubrik); font-size: 96px; line-height: .95; font-weight: 400; }
.t-rubrik-1   { font-family: var(--font-rubrik); font-size: 56px; line-height: 1;   font-weight: 400; }
.t-rubrik-2   { font-family: var(--font-rubrik); font-size: 36px; line-height: 1.1; font-weight: 400; }
.t-rubrik-3   { font-family: var(--font-rubrik); font-size: 24px; line-height: 1.2; font-weight: 400; }
.t-ingress    { font-family: var(--font-text);   font-size: 24px; line-height: 1.35; font-weight: 500; }
.t-brodtext   { font-family: var(--font-text);   font-size: 17px; line-height: 1.55; font-weight: 400; }
.t-ritual     { font-family: var(--font-text);   font-size: 17px; line-height: 1.55; font-weight: 400; font-style: italic; }
.t-detalj     { font-family: var(--font-text);   font-size: 13px; line-height: 1.3;  font-weight: 600; font-stretch: 75%; letter-spacing: .08em; text-transform: uppercase; }
.t-liten      { font-family: var(--font-text);   font-size: 14px; line-height: 1.45; }
.t-descriptor { font-family: var(--font-text);   font-size: 15px; line-height: 1.15; font-weight: 400; letter-spacing: .1em; }
.t-mono       { font-family: var(--font-mono);   font-size: 14px; line-height: 1.5; letter-spacing: .04em; }
.t-mono-liten { font-family: var(--font-mono);   font-size: 11px; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; }