/* Innixa — merktokens (huisstijl aug 2026, werktitel; merkonderzoek loopt).
   Petrol draagt, mist vult, amber accentueert spaarzaam. */
:root {
  --ix-petrol: #0B4A54;   /* primair: koppen, donkere vlakken, knoppen */
  --ix-teal: #127C7C;     /* secundair: illustratielijnen, hover, grafieken */
  --ix-mist: #E7F2F1;     /* achtergrondvlakken en kaarten */
  --ix-amber: #D98E32;    /* accent: de merkpunt, kerncijfers, één primaire CTA per pagina */
  --ix-ink: #22302F;      /* lopende tekst */
  --ix-grey: #9FB0AF;     /* gedempte tekst, randen, uitgeschakelde staten */
  --ix-white: #FFFFFF;    /* paginagrond */

  --ix-font-sans: "Space Grotesk", "Inter", Arial, sans-serif;
  --ix-font-numeric: "Inter", Arial, sans-serif; /* tabulaire cijfers voor kerncijfers */

  --ix-radius: 10px;
  --ix-radius-card: 14px;
  --ix-space-1: 8px;
  --ix-space-2: 16px;
  --ix-space-3: 24px;
  --ix-space-4: 40px;
  --ix-space-5: 64px;
  --ix-shadow-card: 0 2px 10px rgba(11, 74, 84, 0.08);
}

/* Innixa huisstijl — style-only seed (er is bewust geen componentenbibliotheek).
   Ontwerpen ontvangen dit bestand plus zijn imports; alle kleuren via de tokens. */

body {
  background: var(--ix-white);
  color: var(--ix-ink);
  font-family: var(--ix-font-sans);
  line-height: 1.55;
}

h1, h2, h3 { color: var(--ix-petrol); line-height: 1.15; letter-spacing: -0.01em; }

a { color: var(--ix-teal); }

.ix-wordmark { font-weight: 700; color: var(--ix-petrol); letter-spacing: -0.02em; }
.ix-wordmark::after { content: "."; color: var(--ix-amber); }

.ix-surface { background: var(--ix-mist); border-radius: var(--ix-radius-card); }
.ix-dark { background: var(--ix-petrol); color: var(--ix-white); }
.ix-stat { font-family: var(--ix-font-numeric); font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ix-petrol); }
.ix-stat--accent { color: var(--ix-amber); }

.ix-btn-primary {
  background: var(--ix-amber); color: var(--ix-white);
  border: none; border-radius: var(--ix-radius); padding: 12px 22px; font-weight: 600;
}
.ix-btn-secondary {
  background: transparent; color: var(--ix-petrol);
  border: 1.5px solid var(--ix-petrol); border-radius: var(--ix-radius); padding: 12px 22px; font-weight: 600;
}

/* Verbergen moet het winnen van een inline display. */
[hidden] { display: none !important; }

/* De linkrij in de voettekst liep op een telefoon het scherm uit; op een breed scherm past hij
   nog steeds op één regel, dus dit verandert daar niets. */
[data-ix-voetlinks] { flex-wrap: wrap; row-gap: 10px; }