/* JQ Headquarters — design tokens
   Eén plek waar kleur, letter en ruimte vastliggen. Verander je hier iets,
   dan verandert het overal. Nooit een losse kleurcode in een pagina zetten.

   Grondslag: Apple Human Interface Guidelines
   - kleur is nooit de enige drager van betekenis (altijd + label of code)
   - cijfers in een tabellaire letter, zodat kolommen recht onder elkaar staan
   - de data is het prominentste element; assen, lijnen en labels zijn ondergeschikt
*/

:root {
  /* ---- Ondergrond ----
     Bijna zwart met een pruimzweem uit de storekleuren. Puur zwart geeft harde
     randen op OLED en maakt schaduw onmogelijk. */
  --bg:            #050408;   /* achtergrond van de pagina */
  --bg2:           #0A0810;
  --rand:          #221E2B;
  --rand-sterk:    #312B3D;

  /* Glaslagen. Op Jailens verzoek (09-09-2026) draagt ELK paneel glas, niet alleen
     de zijbalk. Dat wijkt bewust af van de HIG ("gebruik Liquid Glass niet in de
     inhoudslaag") — het is zijn privedashboard en hij wil de futuristische look.
     Drie dieptes, zodat panelen zich nog van elkaar onderscheiden. */
  /* PRESTATIEREGEL: backdrop-filter alleen op de zijbalk en de bovenbalk, want
     daar schuift echte inhoud onderdoor. Inhoudspanelen krijgen alleen een
     doorschijnende achtergrond: achter hen zit toch een gelijkmatige gradient,
     dus vervagen kost veel en levert visueel niets op. Vervaging max 18px. */
  --glas1:         rgba(255, 255, 255, 0.035);  /* rustig paneel */
  --glas2:         rgba(255, 255, 255, 0.055);  /* hover, knop */
  --glas3:         rgba(255, 255, 255, 0.080);  /* actief, geselecteerd */
  --glas-rand:     rgba(255, 255, 255, 0.11);
  --glas-rand-op:  rgba(255, 255, 255, 0.20);

  /* ---- Tekst ---- */
  --tekst:         #F5F3F7;   /* primair */
  --tekst-zacht:   #ABA5B6;   /* secundair, labels */
  --tekst-stil:    #6E6880;   /* tertiair, eenheden, voetnoten */

  /* ---- Betekenis. Altijd samen met een label of pijl, nooit kleur alleen. ---- */
  --winst:         #4DE08C;
  --verlies:       #FF6B7A;
  --aandacht:      #FFC44D;   /* let op, drempel bijna geraakt */
  --neutraal:      #7DA2C4;
  --ontbreekt:     #6C6676;   /* voor "—  inkoop ontbreekt" */

  /* ---- De drie stores ----
     merk = de exacte kleur van Jailen. Werkt als VLAK met lichte tekst erop.
     inkt = lichtere variant, zelfde kleurtoon. Voor TEKST, lijnen en punten op donker.
            Nodig omdat Sola (1,7:1) en Amy (1,8:1) op zwart vrijwel onzichtbaar zijn.
     tint = zeer subtiele achtergrond, bijvoorbeeld een gemarkeerde rij.
     rand = randlijn van een kaart die bij die store hoort. */

  --zl-merk: #A66E6B;  --zl-inkt: #C98C88;
  --zl-tint: rgba(201, 140, 136, 0.14); --zl-rand: rgba(201, 140, 136, 0.45);

  --sw-merk: #6A1E2D;  --sw-inkt: #E45570;
  --sw-tint: rgba(228,  85, 112, 0.14); --sw-rand: rgba(228,  85, 112, 0.42);

  --ai-merk: #5B2D4E;  --ai-inkt: #C169A8;
  --ai-tint: rgba(193, 105, 168, 0.14); --ai-rand: rgba(193, 105, 168, 0.42);

  /* ---- Letters ----
     Systeemletter: op de Mac is dat SF Pro, precies waar de HIG op gebouwd is. */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, "JetBrains Mono", monospace;

  --t-xs: 11px;   /* labels in hoofdletters, eenheden */
  --t-sm: 13px;   /* tabelinhoud, secundaire tekst */
  --t-md: 15px;   /* standaard */
  --t-lg: 20px;   /* paginakop */
  --t-xl: 30px;   /* groot kerncijfer */

  /* ---- Ruimte: één schaal, veelvouden van 4 ---- */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --radius: 10px;
  --radius-sm: 6px;
}

/* HIG: respecteer de systeeminstelling. Wie zijn Mac op licht zet, krijgt licht. */
@media (prefers-color-scheme: light) {
  :root:not([data-thema="donker"]) {
    --bg: #FBFBFC; --bg-verhoogd: #FFFFFF; --bg-rij: #F5F5F7;
    --bg-hover: #EFEFF2; --rand: #E2E2E6; --rand-sterk: #C9C9D0;
    --tekst: #1A1A1C; --tekst-zacht: #55555E; --tekst-stil: #8A8A93;
    --winst: #15803D; --verlies: #B91C1C; --aandacht: #B45309;
    /* op licht zijn de merkkleuren juist wél goed leesbaar: inkt = merk */
    --zl-inkt: #A66E6B; --sw-inkt: #6A1E2D; --ai-inkt: #5B2D4E;
  }
}
:root[data-thema="donker"] { color-scheme: dark; }

/* ---- Basis ---- */
body {
  margin: 0;
  background: var(--bg);
  color: var(--tekst);
  font-family: var(--font);
  font-size: var(--t-md);
  -webkit-font-smoothing: antialiased;
}

/* Elk cijfer in het dashboard krijgt deze klasse.
   tabular-nums zorgt dat elk cijfer even breed is, zodat 1.111 en 8.888
   exact even breed zijn en de decimalen recht onder elkaar staan. */
.cijfer {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  text-align: right;
  white-space: nowrap;
}

/* Het kleine hoofdletterlabel boven een sectie, zoals in het concept:
   "HET OVERZICHT", "PRODUCTEN · LAATSTE 30 DAGEN" */
.sectielabel {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tekst-zacht);
}

/* ---- Store-identiteit ----
   Een storechip draagt ALTIJD de code (ZL/SW/AI) naast de kleur.
   Zo blijft hij leesbaar in grijstinten, op een screenshot en voor kleurenblinden. */
.store-chip {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: 2px var(--s2);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  border: 1px solid;
}
.store-chip::before {
  content: ""; width: 8px; height: 8px; border-radius: 2px; background: currentColor;
}
.store-zl { color: var(--zl-inkt); border-color: var(--zl-rand); background: var(--zl-tint); }
.store-sw { color: var(--sw-inkt); border-color: var(--sw-rand); background: var(--sw-tint); }
.store-ai { color: var(--ai-inkt); border-color: var(--ai-rand); background: var(--ai-tint); }

/* Massief vlak met lichte tekst: hier komt de EXACTE merkkleur tot zijn recht
   (wit op Sola = 11,4:1 en op Amy = 10,9:1 — uitstekend leesbaar). */
.store-vlak-zl { background: var(--zl-merk); color: #16100F; }
.store-vlak-sw { background: var(--sw-merk); color: #FFFFFF; }
.store-vlak-ai { background: var(--ai-merk); color: #FFFFFF; }

/* ---- Ontbrekende data. Nooit een geschat cijfer. ---- */
.ontbreekt { color: var(--ontbreekt); font-style: normal; }
.ontbreekt::before { content: "— "; }


/* ---- Beweging ----
   HIG motion: "voeg beweging doelbewust toe" en "vermijd animatie bij handelingen
   die vaak voorkomen". Daarom GEEN intro-animatie op secties of tabelrijen: daar
   kijkt Jailen honderd keer per dag naar, en een pagina die eerst leeg is voelt traag.

   Wel beweging, want Jailen wil een levend portaal:
   1. grafieklijnen tekenen zichzelf, staven rijzen op, de donut vult zich (elk 1x)
   2. het versheidsbolletje pulseert (dit staat live)
   3. panelen kantelen licht onder de muis, afgeknepen op requestAnimationFrame
   4. overgangen bij hover en focus (dit is aanklikbaar)

   VERWIJDERD op 09-09-2026 omdat het dashboard te traag werd (Jailen):
   - de doorlopende lichtveeg over elk glaspaneel (animeerde 'left' = herschilderen
     per frame, op elk paneel tegelijk)
   - de canvas-sfeerlaag die 60x per seconde een blur van 64px tekende. Vervangen
     door een statische gradient: visueel gelijk, kost niets.

   HARDE UITZONDERING: getallen tellen NOOIT op vanaf nul. Tijdens zo'n animatie
   staat er even een fout bedrag op het scherm (gemeten: EUR 50.956 terwijl het
   EUR 81.338 moest zijn) en dat botst met regel 1. Kerncijfers staan direct goed. */
:root { --overgang: 0.15s ease; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}