/* ─────────────────────────────────────────────────────────────────
   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/ink-3 lyfta 2026-08-11: 0.64/0.42 gav 3,6:1 på metatexten,
     under AA-kravet 4,5:1 för liten text. Nu ~8:1 respektive ~5:1. */
  --ink-2:     rgba(241, 233, 255, 0.72);
  --ink-3:     rgba(241, 233, 255, 0.55);
  --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;
  /* Brödtexten: systemets egen text-font först. På iPhone blir det SF Pro Text,
     som är ritad för småtext, system-ui ensamt gav SF Pro Display även i 11 px,
     där bokstäverna sitter för tätt och raden känns hackig. Japanska namn faller
     till Hiragino, annars ritas de med fallback-fonten och ser lösryckta ut. */
  --brod:    -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI",
             "Hiragino Sans", "Hiragino Kaku Gothic ProN", Roboto, sans-serif;
  --mono:    ui-monospace, "SF Mono", Menlo, monospace;

  /* ─── Mått ───────────────────────────────────────────────────── */
  --radie:      18px;
  --radie-stor: 26px;
  --radie-pill: 999px;
  --max-bredd:  1120px;
  /* Sänkt i två steg från 10vw/128px: två sektioners padding möts, och på
     desktop blev det ~260px tomrum. Nu max 64px per sida, halva originalet. */
  --sektion-y:  clamp(36px, 5vw, 64px);

  /* ─── 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);

  /* ─── Höjd, aura och sidton (2026-08-22) ─────────────────────────
     Allt här är NYTT, inga befintliga namn byter värde, så appen (som
     laddar den här filen före sin egen stil) ser exakt samma palett som
     förut. Det publika skalet använder dem för två saker HIG-granskningen
     pekade på: en tydlig höjdramp (botten < panel < lyft) i stället för
     samma lila överallt, och en svag aura som gör att sidorna inte ser ut
     som ett enda platt ark. --hue är sidans egen ton och sätts per del
     (set, produkter, butiker, guider) i bas.css. */
  --yta-0: var(--ground);
  --yta-1: var(--paper);
  --yta-2: var(--raise);
  --yta-3: var(--raise-2);
  --radie-sm: 12px;
  --hue:    var(--purple);
  --aura-1: rgba(160, 59, 240, .26);
  --aura-2: rgba(255, 46, 154, .14);
  --aura-3: rgba(184, 245, 30, .10);
  --glas:   rgba(19, 7, 32, .72);
  --lyft:   0 1px 0 rgba(241,233,255,.06) inset, 0 18px 40px -22px rgba(9,3,17,.9);
  --fokus:  0 0 0 3px rgba(184, 245, 30, .45);
}

/* ─── 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.72);
  --ink-3:     rgba(59, 14, 40, 0.72);   /* 0.55 gav 3,6:1 mot --ground i rosa läget, under AA för småtext */
  --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);

  --hue:    #C2185B;
  --aura-1: rgba(194, 24, 91, .14);
  --aura-2: rgba(255, 176, 64, .16);
  --aura-3: rgba(31, 122, 77, .08);
  --glas:   rgba(253, 239, 245, .78);
  --lyft:   0 1px 0 rgba(255,255,255,.8) inset, 0 18px 40px -24px rgba(59,14,40,.35);
  --fokus:  0 0 0 3px rgba(194, 24, 91, .35);
}