/* =========================================================================
   Qompanio — Tokens v0 ("Gastvrije basislijn")                 07/11/2026
   Zusterhuisstijl van Meetriq (zelfde familie: Archivo, papier, marine,
   geen schaduwen). Verschil: de basislijn is CYAAN (gastvrij, "aan staat"),
   geel is enkel het punt in het logo en één warme accentwaarde per stuk.
   Regels:
   - Geen schaduwen, geen gradients. Diepte = bg-elevated + 1px rand.
   - Cyaan (--accent) is een LIJN, nooit tekst op licht (1,65:1).
   - Tekst op papier in --signal (#0F766E, 5,1:1).
   - Geel enkel: logopunt + max. 1 highlight per pagina/flyer.
   ========================================================================= */

:root {
  /* Palet (gedeeld met Meetriq / All Things Local) */
  --marine-900: #06122A;
  --marine-800: #0B2545;   /* merkkleur */
  --marine-700: #133A66;
  --marine-500: #2E5D8F;
  --marine-100: #D7E5F2;
  --ink-black:  #0B0B0B;
  --ink-600:    #5A5854;
  --paper:      #FAF7F0;
  --paper-soft: #F2EFE6;
  --paper-line: #E6E2D6;
  --cyan:       #2FD9C8;   /* lijn / punt op marine */
  --cyan-deep:  #0F766E;   /* tekst/signaal op papier */
  --cyan-tint:  #D9F6F2;
  --yellow:     #FFD400;   /* enkel logopunt + 1 highlight */
  --positive:   #2E8B3D;
  --warning:    #E08A1A;

  /* Semantiek (licht) */
  --bg: var(--paper);
  --bg-elevated: #FFFFFF;
  --bg-subtle: var(--paper-soft);
  --fg: var(--ink-black);
  --fg-muted: var(--ink-600);
  --rule: var(--paper-line);
  --accent: var(--cyan);           /* de basislijn */
  --signal: var(--cyan-deep);
  --action: var(--marine-800);
  --action-hover: var(--marine-700);
  --on-action: var(--paper);

  --baseline-width: 3px;
  --baseline-width-sm: 2px;

  --font-display: 'Archivo', system-ui, sans-serif;
  --font-body: 'Archivo', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --container: 1180px;
}

[data-theme="dark"] {
  --bg: var(--marine-900);
  --bg-elevated: var(--marine-800);
  --bg-subtle: var(--marine-800);
  --fg: var(--paper);
  --fg-muted: #6FA0CF;
  --rule: var(--marine-700);
  --signal: var(--cyan);
  --action: var(--marine-700);
  --action-hover: var(--marine-500);
}

/* ---------- Basiscomponenten (gebruikt door styleguide, homepage, flyers) ---------- */
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); line-height: 1.5; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 .5em; }
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.eyebrow { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--signal); margin-bottom: 12px; }
.muted { color: var(--fg-muted); }

.btn { display: inline-block; font: 700 1rem var(--font-body); padding: 12px 22px; border-radius: var(--radius-sm);
       background: var(--action); color: var(--on-action); text-decoration: none; border: 1px solid var(--action);
       border-bottom: var(--baseline-width) solid var(--accent); transition: background .15s; }
.btn:hover { background: var(--action-hover); }
.btn--ghost { background: transparent; color: var(--fg); border: 1px solid var(--rule); border-bottom: var(--baseline-width-sm) solid var(--rule); }

.card { background: var(--bg-elevated); border: 1px solid var(--rule); border-radius: var(--radius-md); padding: 24px; }
.card--line { border-top: var(--baseline-width) solid var(--accent); }
.chip { display: inline-block; font: 600 .8rem var(--font-body); padding: 4px 10px; border-radius: var(--radius-sm);
        background: var(--cyan-tint); color: #0B4F4A; border: 1px solid #A8E8E0; }
.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }