/* ============================================================================
   Cockpit — BASISLAAG (tokens + primitives) voor het hele platform.
   ----------------------------------------------------------------------------
   Uitgangspunt: licht, rustig en materieel. Panelen zijn lichtdoorlatend
   ("material") boven een zachte achtergrond, met haarlijnen in plaats van
   randen en lage, brede schaduwen in plaats van wolken. Geen massieve gekleurde
   koppen meer; kleur is accent en betekenisdrager, geen decor.

   De merkwaarden worden na dit bestand door een cockpit-theme-*.css adapter
   overschreven. De namen met `sg-` blijven voorlopig bestaan als historische
   compatibiliteitslaag; ze zijn niet langer specifiek voor Syncground.
   ========================================================================== */
:root{
  /* ---- Merk (per cockpit te overschrijven) ---------------------------- */
  --sg-brand:#1E88CE;
  --sg-brand-strong:#146AAA;
  --sg-brand-soft:#E9F3FB;
  --sg-brand-softer:#F4F9FD;
  --sg-accent-2:#7A8CFF;               /* tweede sfeerkleur in de achtergrond */
  --sg-accent-3:#5AE3F0;
  --sg-font:'Inter','SF Pro Text','Segoe UI',Arial,sans-serif;
  --sg-font-merk:'Archivo','Inter',sans-serif;
  --sg-sfeer-brand:rgba(30,136,206,.17);
  --sg-sfeer-accent-2:rgba(122,140,255,.15);
  --sg-sfeer-accent-3:rgba(90,227,240,.13);

  /* ---- Inkt ------------------------------------------------------------ */
  --sg-ink:#0B2136;
  --sg-ink-70:#394B5D;
  --sg-ink-55:#67788A;
  --sg-ink-40:#8C99A7;
  --sg-ink-25:#B7C2CC;

  /* ---- Oppervlakken ---------------------------------------------------- */
  --sg-canvas:#F1F3F7;
  --sg-surface:#FFFFFF;
  --sg-surface-2:#F8FAFC;
  --sg-surface-3:#EEF2F6;
  /* material: het paneel-oppervlak dat de achtergrond laat doorschemeren */
  --sg-material:rgba(255,255,255,.74);
  --sg-material-sterk:rgba(255,255,255,.88);
  --sg-material-rand:rgba(255,255,255,.62);
  --sg-blur:saturate(180%) blur(24px);

  /* ---- Lijnen ---------------------------------------------------------- */
  --sg-line:rgba(11,33,54,.09);
  --sg-line-soft:rgba(11,33,54,.055);
  --sg-line-strong:rgba(11,33,54,.16);

  /* ---- Status ---------------------------------------------------------- */
  --sg-ok:#17915F;
  --sg-warn:#A96A08;
  --sg-danger:#B3261E;

  /* ---- Ruimte (4px-raster) --------------------------------------------- */
  /* Eén marge voor alle pagina's: logo, titel en inhoud staan op dezelfde lijn. */
  --sg-pagina-pad:clamp(16px,3vw,32px);

  --sg-1:4px;  --sg-2:8px;  --sg-3:12px; --sg-4:16px;
  --sg-5:20px; --sg-6:24px; --sg-7:32px; --sg-8:40px;
  --sg-9:56px; --sg-10:72px;

  /* ---- Radius ---------------------------------------------------------- */
  --sg-r-xs:8px; --sg-r-sm:11px; --sg-r-md:14px; --sg-r-lg:18px;
  --sg-r-xl:24px; --sg-r-2xl:30px; --sg-r-paneel:26px; --sg-r-pill:999px;

  /* ---- Schaduw (laag en breed) ----------------------------------------- */
  --sg-sh-1:0 1px 2px rgba(11,33,54,.05);
  --sg-sh-2:0 1px 2px rgba(11,33,54,.05),0 10px 26px -14px rgba(11,33,54,.24);
  --sg-sh-3:0 2px 6px rgba(11,33,54,.07),0 22px 44px -22px rgba(11,33,54,.32);
  --sg-sh-paneel:0 1px 1px rgba(11,33,54,.04),0 12px 32px -14px rgba(11,33,54,.22);
  --sg-sh-zwevend:0 10px 20px -10px rgba(11,33,54,.24),0 34px 60px -28px rgba(11,33,54,.36);
  --sg-sh-venster:0 40px 90px -40px rgba(11,33,54,.5);

  /* ---- Typeschaal ------------------------------------------------------- */
  --sg-fs-display:clamp(30px,3.6vw,44px);
  --sg-fs-h1:24px;
  --sg-fs-h2:18px;
  --sg-fs-h3:15px;
  --sg-fs-body:14px;
  --sg-fs-sm:13px;
  --sg-fs-xs:12px;
  --sg-fs-micro:11px;
  --sg-track-display:-.03em;
  --sg-track-kop:-.02em;
  --sg-track-eyebrow:.06em;

  /* ---- Beweging --------------------------------------------------------- */
  --sg-ease:cubic-bezier(.22,1,.36,1);
  --sg-veer:cubic-bezier(.34,1.4,.5,1);
  --sg-dur-1:.16s;
  --sg-dur-2:.26s;
  --sg-dur-3:.45s;
}

/* ============================================================================
   PRIMITIVES
   ========================================================================== */

/* Zachte sfeerachtergrond voor een hele pagina. */
.sg-sfeer{position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(46% 42% at 10% 2%,var(--sg-sfeer-brand) 0%,transparent 62%),
  radial-gradient(42% 40% at 92% 0%,var(--sg-sfeer-accent-2) 0%,transparent 62%),
  radial-gradient(52% 46% at 74% 98%,var(--sg-sfeer-accent-3) 0%,transparent 60%),
  var(--sg-canvas)}

/* Paneel: het standaard oppervlak van het platform. */
.sg-paneel{background:var(--sg-material);-webkit-backdrop-filter:var(--sg-blur);
  backdrop-filter:var(--sg-blur);border:1px solid var(--sg-material-rand);
  border-radius:var(--sg-r-paneel);box-shadow:var(--sg-sh-paneel)}

/* Balk: doorschijnende werkbalk boven de inhoud. */
.sg-balk{background:rgba(242,244,248,.72);-webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--sg-line)}

/* Kleine kop boven een paneel. */
.sg-eyebrow{display:inline-flex;align-items:center;gap:7px;
  font:600 var(--sg-fs-xs)/1 var(--sg-font);letter-spacing:var(--sg-track-eyebrow);
  color:var(--sg-ink-55)}
.sg-eyebrow svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;color:var(--sg-brand)}

/* Icoontegel. */
.sg-icoon{display:grid;place-items:center;flex:none;width:40px;height:40px;
  border-radius:var(--sg-r-md);background:var(--sg-brand-soft);color:var(--sg-brand-strong);
  transition:background var(--sg-dur-2) var(--sg-ease),color var(--sg-dur-2) var(--sg-ease)}
.sg-icoon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}

/* Stille knop. */
.sg-knop{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px;
  border:1px solid var(--sg-line);border-radius:var(--sg-r-pill);
  background:var(--sg-material-sterk);color:var(--sg-ink);cursor:pointer;
  font:600 var(--sg-fs-sm) var(--sg-font);letter-spacing:-.006em;
  transition:background var(--sg-dur-2) var(--sg-ease),border-color var(--sg-dur-2) var(--sg-ease),
             transform var(--sg-dur-1) var(--sg-ease)}
.sg-knop svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.sg-knop:hover{background:#fff;border-color:var(--sg-line-strong)}
.sg-knop:active{transform:scale(.97)}
.sg-knop.actief{background:var(--sg-brand);border-color:var(--sg-brand);color:#fff}

/* Statusindicator. */
.sg-status{display:inline-flex;align-items:center;gap:var(--sg-2);padding:6px 12px 6px 10px;
  border-radius:var(--sg-r-pill);border:1px solid var(--sg-line);background:var(--sg-material-sterk);
  font:600 var(--sg-fs-micro) var(--sg-font);color:var(--sg-ink-55)}
.sg-status i{width:7px;height:7px;flex:none;border-radius:50%;background:var(--sg-ok);
  box-shadow:0 0 0 4px rgba(23,145,95,.14)}

/* Eén rustige focusring voor het hele platform. */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--sg-brand);outline-offset:3px;border-radius:var(--sg-r-sm)}

@media(prefers-reduced-motion:reduce){
  .sg-icoon,.sg-knop{transition:none}
}