/* ==========================================================================
   KAMP EFFECTS — design tokens & base components · v1.1
   Import this FIRST in every Kamp plugin UI. Never hard-code a hex.
   Pair with kamp-design-rules.md (.cursor/rules/kamp-design.mdc)
   ========================================================================== */

:root{
  /* Color — sampled from the master logo */
  --nacht:#050107;            /* base background */
  --doek:#0E0A15;             /* cards, panels, chrome */
  --paneel:#151020;           /* raised controls, inputs */
  --rand:rgba(250,246,241,0.08);
  --rand-sterk:rgba(250,246,241,0.16);
  --linnen:#FAF6F1;           /* warm white — never #FFF */
  --linnen-60:rgba(250,246,241,0.6);
  --linnen-40:rgba(250,246,241,0.42);
  --violet:#9248E8;           /* the single accent */
  --gloed:#D597F3;            /* glow core — always with blur */
  --schemer:#461B7F;
  --diep:#2B075E;
  --signaal:#EFB65A;          /* peaks & warnings ONLY */
  --aurora:linear-gradient(180deg,#FAF6F1 0%,#D597F3 18%,#9248E8 48%,#461B7F 78%,#2B075E 100%);

  /* Spacing — 4pt grid, ten steps, nothing in between */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;
  --s6:32px;--s7:48px;--s8:64px;--s9:96px;--s10:144px;

  /* Shape */
  --r-s:8px;      /* chips, inputs */
  --r-m:14px;     /* controls, graphs */
  --r-l:22px;     /* panels, cards */
  --r-pill:999px; /* buttons, toggles */

  /* Type */
  --display:'Outfit',sans-serif;
  --body:'Hanken Grotesk',sans-serif;
  --mono:'IBM Plex Mono',monospace;

  /* Motion */
  --ease-hill:cubic-bezier(.33,0,.16,1);
  --t-micro:150ms;
  --t-std:250ms;

  /* Glows */
  --glow-violet:0 0 26px rgba(146,72,232,.45);
  --glow-gloed:0 0 12px rgba(213,151,243,.9);
  --glow-linnen:0 0 26px rgba(250,246,241,.28);
}

/* ---------- Base ---------- */
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--nacht);color:var(--linnen);font-family:var(--body);
  font-weight:300;font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
::selection{background:var(--violet);color:var(--linnen)}
:focus-visible{outline:2px solid var(--gloed);outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- Labels & values ---------- */
.k-label{font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--linnen-40)}
.k-value{font-family:var(--mono);font-size:12px;color:var(--gloed)}

/* ---------- Plugin chrome ---------- */
.k-plugin{background:var(--doek);border:1px solid var(--rand-sterk);
  border-radius:var(--r-l);overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 120px rgba(146,72,232,.07)}
.k-plugin-head{display:flex;align-items:center;justify-content:space-between;
  padding:var(--s3) var(--s4);border-bottom:1px solid var(--rand);
  background:rgba(250,246,241,0.02)}
.k-plugin-title{font-family:var(--display);font-weight:400;font-size:12px;
  letter-spacing:.24em;text-transform:uppercase}
.k-preset{font-family:var(--mono);font-size:11px;color:var(--linnen-60);
  border:1px solid var(--rand);border-radius:var(--r-pill);padding:5px 14px}
.k-plugin-body{padding:var(--s5);display:grid;gap:var(--s5)}
/* Horizon mini-mark for headers */
.k-mark{width:26px;height:26px;border-radius:7px;background:var(--nacht);
  border:1px solid var(--rand-sterk);position:relative;overflow:hidden}
.k-mark::after{content:"";position:absolute;left:-45%;right:-45%;bottom:-2%;
  height:64%;border-radius:50% 50% 0 0/100% 100% 0 0;background:var(--nacht);
  box-shadow:0 -6px 14px 2px rgba(146,72,232,.9),0 -2px 5px rgba(213,151,243,.9)}

/* ---------- Buttons ---------- */
.btn{font-family:var(--body);font-weight:500;font-size:14px;letter-spacing:.02em;
  border-radius:var(--r-pill);padding:11px 24px;cursor:pointer;
  border:1px solid transparent;background:none;color:var(--linnen);
  transition:transform var(--t-micro) var(--ease-hill),
             box-shadow var(--t-std) var(--ease-hill),
             border-color var(--t-std) var(--ease-hill)}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--linnen);color:var(--nacht)}
.btn-primary:hover{box-shadow:var(--glow-linnen)}
.btn-glow{background:linear-gradient(135deg,#9248E8,#6E2BC4);color:var(--linnen)}
.btn-glow:hover{box-shadow:0 0 30px rgba(146,72,232,.5)}
.btn-secondary{border-color:var(--rand-sterk)}
.btn-secondary:hover{border-color:var(--gloed)}
.btn-ghost{color:var(--linnen-60)}
.btn-ghost:hover{color:var(--linnen)}

/* ---------- Toggle ---------- */
.toggle{width:46px;height:26px;border-radius:var(--r-pill);background:var(--paneel);
  border:1px solid var(--rand-sterk);position:relative;cursor:pointer;flex:none;
  transition:background var(--t-std) var(--ease-hill),border-color var(--t-std) var(--ease-hill)}
.toggle::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;
  border-radius:50%;background:var(--linnen-60);
  transition:transform var(--t-std) var(--ease-hill),background var(--t-std),box-shadow var(--t-std)}
.toggle.on{background:var(--schemer);border-color:var(--violet)}
.toggle.on::after{transform:translateX(20px);background:var(--linnen);box-shadow:var(--glow-gloed)}

/* ---------- Slider (input[type=range].kslider, set --fill: N%) ---------- */
.kslider{-webkit-appearance:none;appearance:none;width:100%;height:26px;
  background:transparent;cursor:pointer}
.kslider::-webkit-slider-runnable-track{height:4px;border-radius:2px;
  background:linear-gradient(90deg,var(--violet) var(--fill,50%),rgba(250,246,241,.1) var(--fill,50%))}
.kslider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;
  border-radius:50%;background:var(--linnen);margin-top:-6px;
  box-shadow:0 0 12px rgba(213,151,243,.8),0 0 3px rgba(213,151,243,1)}
.kslider::-moz-range-track{height:4px;border-radius:2px;background:rgba(250,246,241,.1)}
.kslider::-moz-range-progress{height:4px;border-radius:2px;background:var(--violet)}
.kslider::-moz-range-thumb{width:16px;height:16px;border:none;border-radius:50%;
  background:var(--linnen);box-shadow:0 0 12px rgba(213,151,243,.8)}

/* ---------- Knob (set --sweep: 0–270deg, --rot: -135–135deg) ---------- */
.knob{width:64px;height:64px;border-radius:50%;position:relative;
  background:radial-gradient(circle at 32% 28%,#1D1730,#0B0812 70%);
  border:1px solid var(--rand-sterk);box-shadow:inset 0 2px 6px rgba(0,0,0,.7)}
.knob::before{content:"";position:absolute;inset:-5px;border-radius:50%;
  background:conic-gradient(from 225deg,var(--violet) 0deg,var(--gloed) var(--sweep,190deg),
    transparent var(--sweep,190deg) 270deg,transparent);
  -webkit-mask:radial-gradient(circle,transparent 33px,#000 34px);
  mask:radial-gradient(circle,transparent 33px,#000 34px)}
.knob::after{content:"";position:absolute;left:50%;top:6px;width:2px;height:14px;
  background:var(--linnen);border-radius:1px;transform-origin:50% 26px;
  transform:translateX(-50%) rotate(var(--rot,55deg));
  box-shadow:0 0 6px rgba(250,246,241,.7)}

/* ---------- Meter (column of .meter-seg, toggle .lit/.hi/.peak from JS) ---------- */
.meter-col{display:flex;flex-direction:column-reverse;gap:3px;height:170px;width:22px}
.meter-seg{flex:1;border-radius:2px;background:rgba(250,246,241,.06);
  transition:background 80ms,box-shadow 80ms}
.meter-seg.lit{background:var(--violet);box-shadow:0 0 8px rgba(146,72,232,.7)}
.meter-seg.lit.hi{background:var(--gloed);box-shadow:0 0 8px rgba(213,151,243,.8)}
.meter-seg.lit.peak{background:var(--signaal);box-shadow:0 0 10px rgba(239,182,90,.8)}

/* ---------- Graph container ---------- */
.k-graph{background:var(--nacht);border:1px solid var(--rand);
  border-radius:var(--r-m);overflow:hidden}
/* SVG conventions inside .k-graph:
   gridlines  stroke rgba(250,246,241,.05) 1px
   curve      1.5px var(--linnen) over a 4px var(--gloed) blurred glow stroke
   fill       vertical aurora gradient fading to transparent (the horizon)
   labels     IBM Plex Mono 10px, rgba(250,246,241,.35) */