/* Stijlgids: alleen opmaak voor de pagina /stijlgids zelf. De componenten die daar getoond worden gebruiken de klassen van de app.
   Alles met het voorvoegsel sg-; alleen tokens uit basis.css, geen losse kleuren of lettergroottes. */

/* ---------- kleurstalen: een klasse per kleurtoken, want style="" mag niet (CSP) ---------- */
.sg-staal { display: inline-block; width: 44px; height: 28px; border: 1px solid var(--lijn); border-radius: var(--straal-klein); vertical-align: middle; }
.sg-staal-zij { background: var(--zij); }
.sg-staal-zij-actief { background: var(--zij-actief); }
.sg-staal-zij-hover { background: var(--zij-hover); }
.sg-staal-zij-lijn { background: var(--zij-lijn); }
.sg-staal-zij-tekst { background: var(--zij-tekst); }
.sg-staal-zij-tekst-sterk { background: var(--zij-tekst-sterk); }
.sg-staal-zij-tekst-zwak { background: var(--zij-tekst-zwak); }
.sg-staal-zij-focus { background: var(--zij-focus); }
.sg-staal-vlak { background: var(--vlak); }
.sg-staal-paneel { background: var(--paneel); }
.sg-staal-paneel-2 { background: var(--paneel-2); }
.sg-staal-lijn { background: var(--lijn); }
.sg-staal-lijn-sterk { background: var(--lijn-sterk); }
.sg-staal-lijn-zacht { background: var(--lijn-zacht); }
.sg-staal-inkt { background: var(--inkt); }
.sg-staal-inkt-2 { background: var(--inkt-2); }
.sg-staal-inkt-3 { background: var(--inkt-3); }
.sg-staal-rood { background: var(--rood); }
.sg-staal-rood-vlak { background: var(--rood-vlak); }
.sg-staal-geel { background: var(--geel); }
.sg-staal-geel-merk { background: var(--geel-merk); }
.sg-staal-geel-vlak { background: var(--geel-vlak); }
.sg-staal-groen { background: var(--groen); }
.sg-staal-groen-merk { background: var(--groen-merk); }
.sg-staal-groen-vlak { background: var(--groen-vlak); }
.sg-staal-blauw { background: var(--blauw); }
.sg-staal-blauw-vlak { background: var(--blauw-vlak); }
.sg-staal-focus { background: var(--focus); }
.sg-staal-accent { background: var(--accent); }
.sg-staal-accent-sterk { background: var(--accent-sterk); }
.sg-staal-accent-vlak { background: var(--accent-vlak); }
.sg-staal-serie-lijst { background: var(--serie-lijst); }
.sg-staal-serie-kost { background: var(--serie-kost); }
.sg-staal-serie-neutraal { background: var(--serie-neutraal); }
.sg-staal-serie-staaf { background: var(--serie-staaf); }

/* ---------- uitleg en voorbeelden ---------- */
.sg-demo { padding: var(--r-4); border: 1px solid var(--lijn-zacht); border-radius: var(--straal); background: var(--paneel-2); min-width: 0; overflow-x: auto; }
.sg-demo > * + * { margin-top: var(--r-3); }
.sg-demo .paneel { background: var(--paneel); }
.sg-donker { background: var(--zij); border-color: var(--zij-lijn); }
.sg-code { margin: 0; padding: var(--r-3) var(--r-4); border: 1px solid var(--lijn-zacht); border-radius: var(--straal-klein); background: var(--paneel); color: var(--inkt-2); font-size: var(--t-mini); line-height: 1.5; overflow-x: auto; white-space: pre; }
.sg-noot { color: var(--inkt-3); font-size: var(--t-mini); }
.sg-regels { padding-left: var(--r-5); list-style: disc; display: grid; gap: var(--r-2); }
.sg-tweekoloms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--r-4); }
.sg-kop-klein { font-size: var(--t-ui); }
.sg-geheel { display: grid; gap: var(--r-4); }

/* ---------- typografie ---------- */
.sg-t-label { font-size: var(--t-mini); font-weight: 650; font-stretch: var(--breed-label); }
.sg-t-mini { font-size: var(--t-mini); }
.sg-t-ui { font-size: var(--t-ui); }
.sg-t-basis { font-size: var(--t-basis); }
.sg-t-kop { font-size: var(--t-kop); font-weight: 640; }
.sg-t-sectie { font-size: var(--t-sectie); font-weight: 640; font-stretch: var(--breed-label); }
.sg-t-titel { font-size: var(--t-titel); font-weight: 640; letter-spacing: -0.015em; font-stretch: var(--breed-label); line-height: 1.15; }
.sg-t-cijfer, .sg-t-cijfer-groot { font-weight: 520; font-stretch: var(--breed-cijfer); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.05; white-space: nowrap; }
.sg-t-cijfer { font-size: var(--t-cijfer); }
.sg-t-cijfer-groot { font-size: var(--t-cijfer-groot); }
.sg-t-archivo { font-family: var(--letter); font-size: var(--t-titel); font-weight: 560; font-stretch: var(--breed-label); line-height: 1.1; }
.sg-t-mono { font-family: var(--mono); font-size: var(--t-kop); }
.sg-breed { font-size: var(--t-cijfer); font-weight: 520; font-stretch: var(--breed-cijfer); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.sg-smal { font-size: var(--t-cijfer); font-weight: 520; font-stretch: 100%; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.sg-tab { font-size: var(--t-ui); font-variant-numeric: tabular-nums; font-family: var(--letter); }
.sg-geen-tab { font-size: var(--t-ui); font-variant-numeric: proportional-nums; font-family: var(--letter); }

/* ---------- ruimte en maat ---------- */
.sg-ruimte { display: grid; gap: var(--r-2); }
.sg-ruimte-rij { display: grid; grid-template-columns: 3rem 4rem minmax(0, 1fr); gap: var(--r-3); align-items: center; font-size: var(--t-ui); }
.sg-balkje { display: block; height: var(--r-3); background: var(--inkt-3); border-radius: var(--straal-klein); max-width: 100%; }
.sg-r-1 { width: var(--r-1); } .sg-r-2 { width: var(--r-2); } .sg-r-3 { width: var(--r-3); } .sg-r-4 { width: var(--r-4); }
.sg-r-5 { width: var(--r-5); } .sg-r-6 { width: var(--r-6); } .sg-r-7 { width: var(--r-7); } .sg-r-8 { width: var(--r-8); }
.sg-rondingen { display: flex; flex-wrap: wrap; gap: var(--r-5); }
.sg-rond { display: grid; gap: var(--r-2); justify-items: start; font-size: var(--t-ui); }
.sg-rond-vlak { display: block; width: var(--r-8); height: var(--r-8); border: 1px solid var(--lijn-sterk); background: var(--paneel); }
.sg-rond-straal { border-radius: var(--straal); }
.sg-rond-klein { border-radius: var(--straal-klein); }
.sg-maten { display: grid; gap: var(--r-4); }
.sg-maat { display: grid; gap: var(--r-1); font-size: var(--t-ui); }
.sg-maat-zijbalk { display: block; height: var(--r-4); width: var(--zijbalk); max-width: 100%; background: var(--zij); border-radius: var(--straal-klein); }
.sg-maat-inhoud { display: block; height: var(--r-4); width: var(--inhoud-max); max-width: 100%; background: var(--lijn-sterk); border-radius: var(--straal-klein); }
.sg-maat-rij { display: block; width: var(--r-8); height: var(--rij); border: 1px solid var(--lijn-sterk); background: var(--paneel); }

/* ---------- iconen ---------- */
.sg-iconen { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: var(--r-2); }
.sg-icoon { display: grid; justify-items: center; gap: var(--r-2); padding: var(--r-3) var(--r-2); border: 1px solid var(--lijn-zacht); border-radius: var(--straal-klein); background: var(--paneel); color: var(--inkt); min-width: 0; }
.sg-icoon .ic { width: var(--r-6); height: var(--r-6); }
.sg-icoon code { font-size: var(--t-mini); color: var(--inkt-2); overflow-wrap: anywhere; text-align: center; }

/* ---------- smal scherm ---------- */
@media (max-width: 640px) {
  .sg-tweekoloms { grid-template-columns: minmax(0, 1fr); }
  .sg-demo { padding: var(--r-3); }
  .sg-ruimte-rij { grid-template-columns: 2.5rem 3.5rem minmax(0, 1fr); gap: var(--r-2); }
}