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

:root{
  --paper:#EEF3F8;
  --paper-2:#E2EAF3;
  --ink:#0F2038;
  --ink-soft:#3A5170;
  --blueprint:#2C5F8A;
  --blueprint-light:#8CB4D6;
  --signal:#F2A93B;
  --success:#2E8B57;
  --danger:#D64550;
}

html{scroll-behavior:smooth;}
body{background:var(--paper); color:var(--ink); font-family:'Inter',sans-serif;}

.font-display{font-family:'Space Grotesk',sans-serif;}
.font-mono{font-family:'JetBrains Mono',monospace;}

.bp-grid{
  background-image:
    linear-gradient(rgba(44,95,138,0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(44,95,138,0.10) 1px, transparent 1px);
  background-size: 28px 28px;
}

.bp-grid-dark{
  background-color:#0F2038;
  background-image:
    linear-gradient(rgba(140,180,214,0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140,180,214,0.14) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* corner ticks used on panels to feel like drafting sheets */
.tick-panel{position:relative;}
.tick-panel::before, .tick-panel::after{
  content:"";
  position:absolute;
  width:10px; height:10px;
  border-top:2px solid var(--blueprint);
  border-left:2px solid var(--blueprint);
  top:-1px; left:-1px;
}
.tick-panel::after{
  top:auto; left:auto; bottom:-1px; right:-1px;
  border-top:none; border-left:none;
  border-bottom:2px solid var(--blueprint);
  border-right:2px solid var(--blueprint);
}

/* signature: sweeping scan line */
.scan-wrap{position:relative; overflow:hidden;}
.scan-line{
  position:absolute; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--signal), transparent);
  box-shadow:0 0 12px 2px rgba(242,169,59,0.6);
  animation: scan 3.2s ease-in-out infinite;
}
@keyframes scan{
  0%{ top:0%; opacity:0; }
  8%{ opacity:1; }
  50%{ top:100%; opacity:1; }
  58%{ opacity:0; }
  100%{ top:100%; opacity:0; }
}

.module-tag{
  font-family:'JetBrains Mono',monospace;
  font-size:11px; letter-spacing:0.12em;
  color:var(--blueprint);
  border:1px solid var(--blueprint-light);
  padding:2px 8px; border-radius:2px;
  background:rgba(140,180,214,0.12);
}

.nav-link{position:relative; color:var(--ink-soft);}
.nav-link::after{
  content:""; position:absolute; left:0; bottom:-4px; height:2px; width:0%;
  background:var(--signal); transition:width .2s ease;
}
.nav-link:hover::after, .nav-link.active::after{width:100%;}
.nav-link.active{color:var(--ink); font-weight:600;}

.btn-primary{
  background:var(--ink); color:var(--paper);
  font-family:'Space Grotesk',sans-serif; font-weight:600;
  transition:transform .15s ease, background .2s ease;
}
.btn-primary:hover{background:var(--blueprint); transform:translateY(-1px);}

.btn-outline{
  border:1.5px solid var(--ink); color:var(--ink);
  font-family:'Space Grotesk',sans-serif; font-weight:600;
  transition:all .15s ease;
}
.btn-outline:hover{background:var(--ink); color:var(--paper);}

.caret{display:inline-block; width:8px; background:var(--signal); animation:blink 1s steps(1) infinite;}
@keyframes blink{50%{opacity:0;}}

::selection{background:var(--signal); color:var(--ink);}

input, textarea, select{font-family:'Inter',sans-serif;}
.data-input{
  background:#fff; border:1.5px solid var(--paper-2);
  outline:none;
}
.data-input:focus{border-color:var(--blueprint);}

/* scrollbar for readouts */
.readout::-webkit-scrollbar{width:8px;}
.readout::-webkit-scrollbar-thumb{background:var(--blueprint-light); border-radius:4px;}