/* ─────────────────────────────────────────────────────────────────
   kortkoll — designtokens, delade mellan landningssidan och appen
   SLIMY NEON · MÄRKE.md

   Ur ramverket i pokemon-handoff (2026-08-09), med tre anpassningar så
   det möter appen i stället för att krocka med den:

   1. **`data-theme`, inte `data-lage`.** Appen har hetat data-theme sedan
      pink mode byggdes, och attributet sätts av ett inline-script i
      <head> före första målningen. Två namn för samma val hade betytt att
      landningssidan och appen kunde stå i olika läge samtidigt.
   2. **Displayfonten bär systemstacken efter sig.** Goblin TM är subsettad
      till latin. Utan "Hiragino Sans" efter den ritas japanska kortnamn
      i webbläsarens sista utväg, tecken för tecken.
   3. **Appens egna variabler står kvar här** — gengar-spriten, --reva,
      --tint, --slime-2. De hörde aldrig till ramverket men appen faller
      sönder utan dem, och en fil är bättre än två som ska hållas i takt.

   Appens <style> laddas EFTER den här filen och vinner därför på delade
   variabler. Det är med flit: appen ändrar inte utseende av att tokens
   kopplas in, men får tillgång till radierna, --raise-2 och --mono.
   ───────────────────────────────────────────────────────────────── */

@font-face {
  font-family: "Goblin TM";
  src: url("../fonts/goblin-tm.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0020-0029, U+002B-003B, U+003F-005B, U+005D, U+0061-007A,
                 U+00A7, U+00C4-00C5, U+00D1, U+00D6, U+00DC, U+00E4-00E5,
                 U+00E8-00E9, U+00F1, U+00F6, U+00FC, U+2013-2014, U+20AC;
}

:root {
  /* ─── Ytramp — gengar mode (grundläget) ──────────────────────── */
  --void:      #0E0716;
  --ground:    #130720;
  --paper:     #1B0B2F;
  --raise:     #271041;
  --raise-2:   #331754;

  /* ─── Bläck & linjer ─────────────────────────────────────────── */
  --ink:       #F1E9FF;
  --ink-2:     rgba(241, 233, 255, 0.64);
  --ink-3:     rgba(241, 233, 255, 0.42);
  --ink-4:     rgba(241, 233, 255, 0.22);
  --line:      #4B2A8C;
  --line-soft: #351B63;

  /* ─── Accent — slime är enda tillståndsfärgen ────────────────── */
  --slime:      #B8F51E;
  --slime-2:    #CDFF3D;
  --slime-d:    #6FA800;
  --slime-mjuk: #d3fa6b;
  --slime-bg:   rgba(184, 245, 30, 0.14);
  --accent:      var(--slime);
  --accent-mjuk: var(--slime-mjuk);
  --accent-d:    var(--slime-d);
  --accent-ink:  #130720;

  --ok:   var(--slime);
  --warn: #FF3B4A;

  /* ─── Innehållsfärger — typ, raritet, konst. Aldrig för val. ─── */
  --magenta: #FF2E9A;  --purple: #A03BF0;  --violet: #5B22A8;
  --ember:   #FF4A18;  --gold:   #FFC629;  --cyan:   #17D9C6;
  --bone:    #EEF6DA;

  --t-C: #A8B98A;  --t-G: #B8F51E;  --t-L: #FFD400;  --t-N: #D8A82A;
  --t-R: #FF5A28;  --t-F: #FF8A3D;  --t-Y: #FF7ED8;  --t-P: #FF2E9A;
  --t-D: #9B5CFF;  --t-M: #9FB8C8;  --t-W: #2FC0FF;  --t-T: #8C7FB0;

  /* ─── Gengar-spriten (appens maskot, ritas ur en pixelkarta) ─── */
  --g-kontur: #160823;  --g-kropp: #8B62D6;  --g-skugga: #63409F;
  --g-oga:    #FF3B4A;  --g-tand:  #FFFFFF;  --g-mun:    #25102F;

  /* ─── Typroller — tre, aldrig blandade ───────────────────────── */
  --display: "Goblin TM", ui-sans-serif, -apple-system, "Hiragino Sans", sans-serif;
  --brod:    system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:    ui-monospace, "SF Mono", Menlo, monospace;

  /* ─── Mått ───────────────────────────────────────────────────── */
  --radie:      18px;
  --radie-stor: 26px;
  --radie-pill: 999px;
  --max-bredd:  1120px;
  --sektion-y:  clamp(56px, 10vw, 128px);

  /* ─── Effekter ───────────────────────────────────────────────── */
  --tint:   19,7,32;
  --shadow: 0 1px 2px rgba(9,3,17,.7), 0 10px 26px -12px rgba(9,3,17,.8);
  --glow:   0 0 0 1px rgba(184,245,30,.35), 0 0 18px -4px rgba(184,245,30,.5);
  --panel-inset: inset 0 1px rgba(241,233,255,0.05);
}

/* ─── Pink mode — egen identitet, inte "ljust läge av samma" ──── */
:root[data-theme="pink"] {
  --void:      #F6DCE7;
  --ground:    #F6DCE7;
  --paper:     #FDEFF5;
  --raise:     #FFF8FB;
  --raise-2:   #FFFFFF;

  --ink:       #3B0E28;
  --ink-2:     rgba(59, 14, 40, 0.64);
  --ink-3:     rgba(59, 14, 40, 0.42);
  --ink-4:     rgba(59, 14, 40, 0.22);
  --line:      #E9B7CF;
  --line-soft: #F3D2E1;

  --accent:      #C2185B;
  --accent-mjuk: #E24E86;
  --accent-d:    #8E0F41;
  --accent-ink:  #FFF8FB;
  --slime-bg:    rgba(194, 24, 91, 0.10);

  --ok:   #1F7A4D;
  --warn: #C4232F;

  --tint:   246,220,231;
  --shadow: 0 1px 2px rgba(59,14,40,.10), 0 8px 20px -12px rgba(59,14,40,.25);
  --glow:   0 0 0 1px rgba(194,24,91,.30), 0 0 14px -4px rgba(194,24,91,.35);
  --panel-inset: inset 0 1px rgba(255,255,255,0.7);
}
