/* Design tokens — eigendom van GPT.
   Waarden vrij te wijzigen; namen niet verwijderen of hernoemen,
   de motor (canvas) leest ze via getComputedStyle. Zie README.md. */

:root{
  /* schrijfvel — gebruikt door de canvas-engine */
  --papier:    #FDFCF7;  /* achtergrond schrijfvel */
  --lijn:      #C3DCEC;  /* bovenlijn, middenlijn, onderlijn */
  --basislijn: #E29B92;  /* basislijn — moet duidelijk afwijken van --lijn */
  --inkt:      #22324A;  /* standaardpen en UI-tekst */
  --voorbeeld: #DCD6C7;  /* overtrek-letter */
  --startpunt: #BDD8C4;  /* bolletje waar de streek begint */

  /* algemene UI */
  --balk:      #07162F;  /* achtergrond boven- en onderbalk */

  /* Sterrenexpeditie — rustige ruimte rondom het heldere oefenpapier */
  --nacht:           #07162F;
  --nacht-diep:      #030A1A;
  --nacht-licht:     #102A55;
  --hemel:           #174EBD;
  --hemel-licht:     #4E8DFF;
  --ster:            #FFE884;
  --maan:            #FFF4C7;
  --koraal:          #FF7664;
  --oranje:          #FF9F43;
  --mint:            #68DDB9;
  --groen:           #39B77A;
  --lila:            #A68BFA;
  --ijs:             #CDEAFF;
  --wit:             #FFFFFF;
  --tekst-op-donker: #F7FAFF;
  --tekst-zacht:     #B9C7E4;
  --kaart:           #FFF8E6;
  --kaart-af:        #D8F7E8;
  --kaart-op-slot:   #16294A;
  --vlak-leeg:       #FFFFFF;
  --fout:            #E8414F;
  --melding:         rgba(7,22,47,.94);
  --focus:           #FFE56B;

  --rand-dun: 2px;
  --rand-dik: 4px;
  --radius-klein: .8rem;
  --radius: 1.25rem;
  --radius-groot: 2rem;
  --schaduw-knop: 0 4px 0 rgba(1,7,20,.34), 0 10px 24px rgba(1,7,20,.18);
  --schaduw-kaart: 0 8px 0 rgba(1,7,20,.22), 0 22px 48px rgba(1,7,20,.22);

  /* magische kleurorbs */
  --orb-maat: 3.35rem;
  --orb-maat-smal: 2.75rem;
  --orb-maat-peuter: 4.15rem;
  --orb-maat-peuter-smal: 3.75rem;
  --orb-tussenruimte: .7rem;
  --orb-tussenruimte-smal: .25rem;
  --orb-rij-breedte: 31rem;
  --orb-rij-breedte-peuter: 19rem;
  --orb-paneel-breedte: 9.2rem;
  --orb-paneel-breedte-peuter: 10.6rem;
  --orb-paneel-afstand: .8rem;
  --orb-paneel-padding: .62rem;
  --orb-rand: rgba(255,255,255,.86);
  --orb-binnenrand: rgba(255,255,255,.34);
  --orb-licht: rgba(255,255,255,.92);
  --orb-glans: rgba(255,255,255,.28);
  --orb-reflectie: rgba(255,255,255,.38);
  --orb-letter: #07162F;
  --orb-letter-gloed: rgba(255,255,255,.7);
  --orb-gloed: rgba(102,199,255,.72);
  --orb-vink: #163C86;
  --orb-vink-tekst: #FFF4C7;
  --orb-schaduw: inset 0 -.42rem .65rem rgba(1,7,20,.22),
                 inset 0 .18rem .35rem rgba(255,255,255,.38),
                 0 .3rem .7rem rgba(1,7,20,.34);
  --orb-schaduw-actief: 0 0 0 3px #FFF4C7,0 0 0 7px rgba(255,232,132,.64),
                        0 0 1.35rem .45rem rgba(102,199,255,.72),
                        inset 0 -.42rem .65rem rgba(1,7,20,.2),
                        inset 0 .18rem .35rem rgba(255,255,255,.42);
  --orb-paneel: rgba(3,10,26,.48);
  --orb-paneel-rand: rgba(255,255,255,.13);
  --orb-paneel-schaduw: inset 0 1px 0 rgba(255,255,255,.06),0 .65rem 1.5rem rgba(1,7,20,.2);
  --snel: 120ms;
  --rustig: 240ms;
}