/* ============================================================
   KOPIK — Dark-technical design foundation
   Sibling to Pure Online: black-first, acid green #C3F73A,
   PP Neue Montreal + SangBleu Empire (accent), JetBrains Mono (data).
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap");

/* ---- Brand faces (paths relative to /kopik) ---- */
@font-face{font-family:"Neue Montreal";src:url("../fonts/PPNeueMontreal-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Neue Montreal";src:url("../fonts/PPNeueMontreal-Book.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Neue Montreal";src:url("../fonts/PPNeueMontreal-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Neue Montreal";src:url("../fonts/PPNeueMontreal-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Neue Montreal";src:url("../fonts/PPNeueMontreal-Italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Neue Montreal Reg";src:url("../fonts/PPNeueMontreal-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"SangBleu Empire";src:url("../fonts/SangBleuEmpire-Regular.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"SangBleu Empire";src:url("../fonts/SangBleuEmpire-RegularItalic.otf") format("opentype");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"SangBleu Empire";src:url("../fonts/SangBleuEmpire-Medium.otf") format("opentype");font-weight:500;font-style:normal;font-display:swap}

:root{
  /* fonts */
  --sans:"Neue Montreal",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --sans-ui:"Neue Montreal Reg","Neue Montreal",sans-serif;
  --serif:"SangBleu Empire",Georgia,serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* surfaces — warm-tinted OLED stack */
  --bg:#000000;
  --s1:#08080A;   /* sunken / alt sections */
  --s2:#0E0E11;   /* panels */
  --s3:#151518;   /* cards */
  --s4:#1C1C20;   /* card hover / elevated */
  --s5:#232328;   /* popovers / top elevation */
  --line:#26262B;
  --line2:#34343B;
  --line3:#454550;

  /* text */
  --ink:#FAFAFA;
  --ink2:#ADADB4;
  --ink3:#73737B;
  --ink4:#4B4B52;

  /* accent — Pure acid green, rationed */
  --acid:#C3F73A;
  --acid-hi:#D4FF59;
  --acid-dim:#A6D72F;
  --acid-soft:#191F08;
  --acid-line:#2E3A12;
  --acid-ink:#0A0A0A;
  --glow:0 0 0 1px rgba(195,247,58,.35), 0 0 22px -4px rgba(195,247,58,.45);

  /* semantic */
  --ok:#86E0A0;   --ok-soft:#0E1B12;
  --err:#FF6B6B;  --err-soft:#1E0F10;
  --warn:#F5B544; --warn-soft:#1E1708;
  --info:#74A9FF; --info-soft:#0D1320;

  /* radii (tightened from Pure for a denser tool) */
  --r-xs:5px; --r-sm:8px; --r-md:11px; --r-lg:16px; --r-xl:22px; --r-pill:999px;

  /* spacing 4/8 base */
  --sp1:4px; --sp2:8px; --sp3:12px; --sp4:16px; --sp5:20px; --sp6:24px; --sp7:32px; --sp8:48px; --sp9:64px;

  /* elevation */
  --sh-xs:0 1px 2px rgba(0,0,0,.5);
  --sh-sm:0 2px 8px rgba(0,0,0,.55);
  --sh-md:0 12px 32px -8px rgba(0,0,0,.7);
  --sh-lg:0 30px 70px -16px rgba(0,0,0,.8);

  /* motion */
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,.05,.36,1);
  --fast:140ms; --dur:240ms; --slow:480ms;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.serif{font-family:var(--serif)}
::selection{background:rgba(195,247,58,.28);color:#fff}

/* keyboard chip */
.kbd{
  font-family:var(--mono);font-size:10.5px;font-weight:500;
  color:var(--ink2);background:var(--s4);
  border:1px solid var(--line2);border-bottom-width:2px;
  border-radius:5px;padding:1px 5px;line-height:1.5;
  display:inline-flex;align-items:center;gap:2px;
}

/* thin scrollbars for panels */
.kp-scroll::-webkit-scrollbar{width:9px;height:9px}
.kp-scroll::-webkit-scrollbar-thumb{background:var(--line2);border-radius:9px;border:2px solid transparent;background-clip:content-box}
.kp-scroll::-webkit-scrollbar-thumb:hover{background:var(--line3)}
.kp-scroll::-webkit-scrollbar-track{background:transparent}

/* streaming caret */
@keyframes kp-caret{0%,49%{opacity:1}50%,100%{opacity:0}}
.kp-caret{display:inline-block;width:8px;height:1.05em;transform:translateY(2px);
  background:var(--acid);margin-left:2px;border-radius:1px;animation:kp-caret 1s steps(1) infinite;
  box-shadow:0 0 10px rgba(195,247,58,.7)}

/* generation pulse */
@keyframes kp-pulse{0%,100%{opacity:.45}50%{opacity:1}}
.kp-pulse{animation:kp-pulse 1.4s var(--ease-io) infinite}