/* Den Gulden Middenweg — huisstijl (Pine / Bone / Sage, Hanken Grotesk + JetBrains Mono) */
:root {
  /* DGM-palet: Pine #28412F · Bone #F4F1EA · Sage #CDE0C8 · Stone #9A958A
     Donkere variant "Bone op Pine" voor de bar; tinten zijn afgeleid van Pine. */
  --pine-950: #142219;
  --pine-900: #1C3023;
  --pine-850: #213827;
  --pine-800: #28412F;   /* Pine */
  --pine-750: #2E4A36;
  --pine-700: #36553F;
  --pine-600: #44654D;
  --pine-500: #557A5F;
  --sage: #CDE0C8;       /* Sage */
  --sage-hi: #E3EEE0;
  --sage-dim: #8FA78A;
  --bone: #F4F1EA;       /* Bone */
  --bone-2: #D8D4CA;
  --bone-3: #A8A396;     /* Stone, iets lichter voor leesbaarheid op Pine */
  --stone: #9A958A;      /* Stone */
  --ink: #1C1B19;
  --brass: var(--sage);  /* accent = Sage (geen extra merkkleuren) */
  --ember: #B04A32;      /* waarschuwing */
  --line: rgba(244, 241, 234, .10);
  --line-2: rgba(244, 241, 234, .18);
  --shadow: 0 16px 40px rgba(10, 20, 14, .45);
  --r-lg: 22px;
  --r-md: 14px;
  --r-sm: 10px;
  --sans: "Hanken Grotesk", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--pine-900);
  color: var(--bone);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none; user-select: none;
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
  overscroll-behavior: none;
}
input, textarea, select { -webkit-user-select: text; user-select: text; font: inherit; color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
img { display: block; }

.mono { font-family: var(--mono); font-feature-settings: "zero" 0; }
.eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sage);
}
.muted { color: var(--bone-3); }

/* merkteken: gulden-snede-cirkels */
.mark { width: 34px; height: 34px; flex: none; }
.mark { color: var(--bone); --mark-bg: var(--pine-900); }

/* knoppen */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 18px; border-radius: 999px;
  background: var(--pine-700); color: var(--bone); font-weight: 600; font-size: 15px;
  border: 1px solid var(--line); transition: background .15s, transform .08s;
  white-space: nowrap;
}
.btn:active { transform: scale(.97); background: var(--pine-600); }
.btn.primary { background: var(--sage); color: var(--pine-900); border-color: transparent; }
.btn.primary:active { background: var(--sage-hi); }
.btn.ghost { background: transparent; }
.btn.danger { background: rgba(176, 74, 50, .22); color: #F0B8A6; border-color: rgba(176, 74, 50, .45); }
.btn.small { min-height: 38px; padding: 0 14px; font-size: 14px; }
.btn.on { background: var(--sage); color: var(--pine-900); }
.btn[disabled] { opacity: .4; pointer-events: none; }
.icon-btn {
  width: 48px; height: 48px; border-radius: 50%; display: inline-grid; place-items: center;
  color: var(--bone-2); transition: background .15s, color .15s, transform .08s; flex: none;
}
.icon-btn:active { transform: scale(.92); background: var(--pine-700); }
.icon-btn.on { color: var(--sage); background: rgba(205, 224, 200, .14); }
.icon-btn svg, .btn svg { width: 22px; height: 22px; }

svg.i { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
svg.i.solid { fill: currentColor; stroke: none; }

/* schuifregelaar: groot en vingervriendelijk */
input[type=range] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; margin: 0;
  --p: 50%;
}
input[type=range]::-webkit-slider-runnable-track {
  height: 10px; border-radius: 99px;
  background: linear-gradient(to right, var(--sage) 0 var(--p), var(--pine-600) var(--p) 100%);
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 30px; height: 30px; border-radius: 50%; margin-top: -10px;
  background: var(--bone); box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}
input[type=range]::-moz-range-track { height: 10px; border-radius: 99px; background: var(--pine-600); }
input[type=range]::-moz-range-progress { height: 10px; border-radius: 99px; background: var(--sage); }
input[type=range]::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; background: var(--bone); border: 0; }
input[type=range].thin::-webkit-slider-runnable-track { height: 6px; }
input[type=range].thin::-webkit-slider-thumb { width: 24px; height: 24px; margin-top: -9px; }

input[type=text], input[type=search], input[type=time], input[type=number], textarea, select {
  background: var(--pine-850); border: 1px solid var(--line-2); border-radius: var(--r-sm);
  padding: 12px 14px; min-height: 48px; width: 100%; outline: none;
}
input:focus, textarea:focus, select:focus { border-color: var(--sage); }

/* hoesjes */
.art {
  background: var(--pine-700) center/cover no-repeat; border-radius: 8px; flex: none; position: relative; overflow: hidden;
}
.art.empty::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 70% 30%, rgba(205, 224, 200, .18), transparent 60%);
}

/* speelt-animatie */
.eq { display: inline-flex; gap: 2px; align-items: flex-end; height: 14px; width: 14px; }
.eq i { width: 3px; background: var(--sage); border-radius: 2px; animation: eq 1s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: -.35s; }
.eq i:nth-child(3) { animation-delay: -.7s; }
.eq.paused i { animation: none; height: 3px; background: var(--bone-3); }
@keyframes eq { 0%, 100% { height: 4px; } 50% { height: 14px; } }

.toasts { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); display: grid; gap: 8px; z-index: 200; pointer-events: none; }
.toast {
  background: var(--bone); color: var(--pine-900); padding: 12px 20px; border-radius: 999px; font-weight: 600;
  box-shadow: var(--shadow); animation: toastin .25s ease-out; max-width: 80vw; text-align: center;
}
.toast.error { background: var(--ember); color: var(--bone); }
.toast.request { background: var(--sage); color: var(--pine-800); }
@keyframes toastin { from { opacity: 0; transform: translateY(10px); } }

::-webkit-scrollbar { width: 0; height: 0; }