:root{
  --bg: #f5f7fb;
  --panel: #ffffff;
  --border: #c9cdd3;
  --text: #263238;
  --muted: #607d8b;
  --accent: #1a1a1a;
  --shadow: 0 1px 2px rgba(0,0,0,.08), 0 8px 30px rgba(0,0,0,.08);
  --hero-gradient: linear-gradient(180deg,#f9fafe,#eef1f7);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: linear-gradient(180deg, var(--bg), #eef1f7);
  color: var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ===== Header ===== */
.site-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 28px;
  background:var(--panel);
  border-bottom:1px solid var(--border);
  box-shadow:var(--shadow);
  position:sticky; top:0; z-index:50;
  border-radius:0 0 16px 16px;
}
.brand {
  font-weight:700; font-size:22px; color:var(--accent);
}
.site-nav { display:flex; align-items:center; gap:14px; }
.site-nav a {
  color:var(--text); text-decoration:none; padding:8px 12px;
  border-radius:10px;
}
.site-nav a:hover {
  background:rgba(63,81,181,0.08);
}


/* ===== Hero ===== */
.hero {
  text-align:center;
  padding:80px 24px 40px;
  background:var(--hero-gradient);
  border-bottom:1px solid var(--border);
}
.hero h1 {
  font-size:clamp(28px,4vw,44px);
  margin:0 0 10px;
}
.hero p {
  max-width:60ch;
  margin:0 auto 22px;
  color:var(--muted);
}
.actions {
  display:flex; justify-content:center; flex-wrap:wrap; gap:12px;
}
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:12px;
  border:1px solid var(--border); background:var(--panel);
  color:var(--text); text-decoration:none;
  box-shadow:var(--shadow);
  transition:all 0.12s ease;
}
.btn:hover { filter:brightness(0.98); transform:translateY(-1px); }
.btn.primary { background:var(--accent); color:#fff; border:none; }
.btn.ghost { background:transparent; border:1px solid var(--border); }
.btn.small { padding:8px 12px; border-radius:10px; }

/* ===== Apps Section ===== */
.apps-section {
  padding:24px; max-width:1100px; margin:0 auto;
}
.toolbar {
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:12px; margin-bottom:16px;
}
.search input {
  padding:10px 14px; border-radius:12px;
  border:1px solid var(--border);
  background:var(--panel); color:var(--text);
}
.tags { display:flex; flex-wrap:wrap; gap:8px; }
.tag {
  padding:8px 12px; border-radius:999px;
  border:1px solid var(--border);
  background:var(--panel); color:var(--muted);
  cursor:pointer;
}
.tag.active {
  background:var(--accent); color:#fff; border:none;
}
.grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px;
}
.card {
  display:flex; flex-direction:column; justify-content:space-between; gap:12px;
  padding:16px; border-radius:16px;
  background:var(--panel); border:1px solid var(--border);
  box-shadow:var(--shadow); min-height:220px;
}
.card .title { margin:8px 0 6px; font-size:20px; }
.card .desc { color:var(--muted); margin:0; }
.card .meta { display:flex; align-items:center; justify-content:space-between; gap:8px; color:var(--muted); font-size:12px; }
.card .buttons { display:flex; gap:8px; }

.empty { text-align:center; color:var(--muted); padding:16px; }
.hidden { display:none!important; }

/* Mobile */
@media(max-width:600px){
  .toolbar{flex-direction:column;align-items:stretch;}
}


/* ====== Thema (licht/donker/systeem) ====== */
/* System = geen data-theme attribuut; volgt prefers-color-scheme */

/* Donker thema variabelen wanneer geforceerd */
:root[data-theme="dark"]{
  --bg: #0e1217;
  --panel: #111827;
  --border: #263241;
  --text: #e6edf3;
  --muted: #9fb0c0;
  --accent: #90caf9;
  --shadow: 0 1px 2px rgba(0,0,0,.35), 0 8px 30px rgba(0,0,0,.35);
  --hero-gradient: linear-gradient(180deg,#0b1016,#0e1217);
}

/* Licht thema variabelen wanneer geforceerd */
:root[data-theme="light"]{
  --bg: #f5f7fb;
  --panel: #ffffff;
  --border: #c9cdd3;
  --text: #263238;
  --muted: #607d8b;
  --accent: #1a1a1a;
  --shadow: 0 1px 2px rgba(0,0,0,.08), 0 8px 30px rgba(0,0,0,.08);
  --hero-gradient: linear-gradient(180deg,#f9fafe,#eef1f7);
}

/* Systeem-gedreven donker thema */
@media (prefers-color-scheme: dark){
  :root{
    --bg: #0e1217;
    --panel: #111827;
    --border: #263241;
    --text: #e6edf3;
    --muted: #9fb0c0;
    --accent: #90caf9;
    --shadow: 0 1px 2px rgba(0,0,0,.35), 0 8px 30px rgba(0,0,0,.35);
    --hero-gradient: linear-gradient(180deg,#0b1016,#0e1217);
  }
  .site-nav a:hover { background:rgba(144,202,249,0.12); }
}

/* Hero achtergrond terug naar licht wanneer data-theme=light ondanks dark system */
:root[data-theme="light"] .hero{ background:linear-gradient(180deg,#f9fafe,#eef1f7); }

/* ====== Switch styling ====== */
.visually-hidden{ position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; border:0; clip:rect(0 0 0 0); overflow:hidden; }

.theme-switch{
  display:flex; align-items:center; gap:6px;
  padding:4px; border-radius:999px;
  background:var(--panel); border:1px solid var(--border);
  box-shadow:var(--shadow);
}
.theme-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border:0; border-radius:999px;
  background:transparent; cursor:pointer; color:var(--muted);
}
.theme-btn[aria-pressed="true"]{
  background:var(--accent); color:#fff;
}
.theme-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }


/* ====== Verbeterde achtergrond voor thema's ====== */
:root {
  --bg-gradient: linear-gradient(180deg, #f5f7fb, #eef1f7);
  --hero-gradient: linear-gradient(180deg,#f9fafe,#eef1f7);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-gradient: linear-gradient(180deg, #0b1016, #0e1217);
    --hero-gradient: linear-gradient(180deg,#0b1016,#0e1217);
  }
}

:root[data-theme="light"] {
  --bg-gradient: linear-gradient(180deg, #f5f7fb, #eef1f7);
  --hero-gradient: linear-gradient(180deg,#f9fafe,#eef1f7);
}

:root[data-theme="dark"] {
  --bg-gradient: linear-gradient(180deg, #0b1016, #0e1217);
  --hero-gradient: linear-gradient(180deg,#0b1016,#0e1217);
}

body {
  background: var(--bg-gradient);
}