/*
 * Gameify · semantiskt tokenlager
 * ────────────────────────────────────────────────────────────────────────────
 * Låg HÄR och inte i style.css av ett skäl: style.css laddas INTE i Bricks
 * byggare (se functions.php, gameify_is_builder-vakten), och sedan Bricks-datan
 * refererar --green-ink hade byggarens canvas då ritat de ställena utan färg.
 * Den här filen laddas alltid — frontend och byggare — och innehåller BARA
 * variabeldeklarationer, inga tillämpade regler. Bakgrund och textfärg på
 * html/body sätts fortfarande i style.css, så byggarens eget gränssnitt
 * påverkas inte.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   0. KRITISK PAINT-BG · undvik vita frames i Lighthouse timeline.
   Sätter ACSS-variabler så body paintas mörk direkt vid first paint,
   INNAN Bricks-sektioner laddat.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Sidbakgrunden är MÖRKARE än ACSS --base (#131313) — medveten egen token,
     ACSS-skalan når inte hit. Enda stället #0a0a0a får skrivas. */
  --bg-page: #0a0a0a;

  --body-bg-color:   var(--bg-page);
  --device-bg-color: var(--bg-page);
}

/* ═══════════════════════════════════════════════════════════════════════════
   0b. SEMANTISKT TOKENLAGER · ovanpå ACSS
   Komponenterna använde de här namnen i åratal som FANTOMVARIABLER — de var
   aldrig definierade, så varje var(--ink, #hex) föll tyst tillbaka på sin
   hex. Nu definieras de EN gång, pekande mot ACSS. Komponent-CSS ska använda
   tokens härifrån och aldrig omdefiniera dem lokalt (undantag: pc-builderns
   --art-* för SVG-illustrationen). Literalerna nedan är MEDVETNA — det här
   blocket är den enda platsen i temat där de får stå.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Text, ljus→dämpad */
  --ink:        var(--base-ultra-light);   /* #f2f2f2 */
  --ink-2:      var(--base-light);         /* #d9d9d9 — ersätter #d4d4d4 */
  --ink-3:      var(--base-semi-light);    /* #a6a6a6 — ersätter #9a9a9a/#b0b0b0 */
  --ink-4:      var(--base-semi-dark);     /* #595959 — ersätter #6a6a6a */

  /* Ytor, mörk skala */
  --bg:         var(--base);               /* #131313 */
  --bg-elev:    var(--base-ultra-dark);    /* #1a1a1a — ersätter #1c1c1c/#181818/#1d1d1d */
  --bg-sunken:  #0e0e0e;                   /* medvetet egen — mörkare än ACSS når */

  /* Linjer på mörk yta */
  --line:        var(--white-trans-10);
  --line-2:      rgba(255, 255, 255, .06);
  --line-strong: rgba(255, 255, 255, .14); /* fokusramar, aktiva fält */

  /* Inmatningsfält på mörk yta */
  --bg-input:   rgba(255, 255, 255, .04);

  /* Plattan som produktfoton står på. Produktbilderna är friställda mot vitt,
     så den är bokstavligt vit i BÅDA färglägena — till skillnad från --white,
     som i ACSS betyder "den ljusa änden av skalan" och byter plats i ljust
     läge. Skrevs tidigare som var(--white), vilket bara råkade stämma. */
  --photo-bg:   #ffffff;

  /* Grönt — TVÅ ROLLER, håll isär dem.
     --green     = FYLLNING (knappbakgrund, badge, fylld mätare, chip-bakgrund)
     --green-ink = BLÄCK    (text, ikon, bock, stjärna, tunn linje, fokusram)
     I mörkt läge är de samma kulör; i ljust läge kan de inte vara det —
     brand-grönt har 1,5:1 mot vitt och får aldrig bära text.
     Se components/light-mode/light-mode.css. */
  --green:      var(--primary);
  --green-ink:  var(--green);
  --on-green:   var(--bg-page);            /* texten som ligger PÅ en grön fyllning.
                                              Alltid mörk — grönt bär bara mörk text
                                              i båda lägena. Skrevs tidigare som
                                              var(--bg-page), vilket bara stämde
                                              så länge sidan var mörk. */
  --green-deep: #7ec61a;                   /* hover/deep-grön — ligger mellan
                                              --primary och --secondary; behålls
                                              exakt tills visuellt granskad */

  /* Lagerstatus — egna kulörer, matchar INTE ACSS --warning/--danger */
  --stock-low:  #f5b400;
  --stock-out:  #ff5a5a;
  --error:      var(--stock-out); /* formulärfel delar kulör med utsålt, avsiktligt */
}

/* ═══════════════════════════════════════════════════════════════════════
   MOTION · delade kurvor. Starkare än CSS inbyggda ease-*, som är för
   svaga för medveten rörelse.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  /* Ytor som glider in från en kant (sticky barer, drawers, ark). Startar
     snabbt och lägger sig mjukt — en ease-out är för lat i början för något
     som ska kännas som att det kommer farande utifrån. */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}