/* ============================================================
   BASE, design tokens, reset, typography
   Abdulmumin Abdulwahab · operator-terminal design system
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  /* Surfaces, deep-space ink ramp */
  --ink-900: #04060a;
  --ink-850: #06090e;
  --ink-800: #080c12;
  --ink-750: #0b1017;
  --ink-700: #0e141d;
  --ink-600: #141c27;
  --ink-500: #1b2531;

  /* Hairlines */
  --line:        #1a2431;
  --line-soft:   #131b25;
  --line-strong: #26374a;

  /* Text */
  --txt-1: #e8eff6;
  --txt-2: #93a5b6;
  --txt-3: #5f7285;
  --txt-4: #3d4b59;

  /* Accents */
  --acc:      #4ff0b7;   /* phosphor mint, primary signal */
  --acc-dim:  #1f8f6a;
  --acc-glow: rgba(79, 240, 183, .16);
  --amber:    #ffb84d;
  --azure:    #6ea8ff;
  --violet:   #b388ff;
  --danger:   #ff6b6b;

  /* Semantic */
  --bg:        var(--ink-900);
  --bg-elev:   var(--ink-800);
  --bg-elev-2: var(--ink-750);
  --panel:     rgba(11, 16, 23, .72);

  /* Type */
  --f-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --f-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Fluid scale */
  --t-xs:  clamp(.66rem, .62rem + .18vw, .74rem);
  --t-sm:  clamp(.78rem, .74rem + .2vw,  .87rem);
  --t-md:  clamp(.92rem, .88rem + .22vw, 1rem);
  --t-lg:  clamp(1.06rem, 1rem + .4vw,   1.22rem);
  --t-xl:  clamp(1.35rem, 1.2rem + .8vw, 1.9rem);
  --t-2xl: clamp(1.9rem, 1.5rem + 2vw,   3rem);
  --t-3xl: clamp(2.6rem, 1.7rem + 4.4vw, 5.6rem);
  --t-4xl: clamp(2.9rem, 2rem + 4.1vw,  5.4rem);

  /* Space */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 140px;

  /* Geometry */
  --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-xl: 22px;
  --maxw: 1280px;
  --gutter: clamp(20px, 5vw, 72px);

  /* Motion */
  --e-out:  cubic-bezier(.16, 1, .3, 1);
  --e-in:   cubic-bezier(.7, 0, .84, 0);
  --e-soft: cubic-bezier(.4, 0, .2, 1);
  --d-fast: .18s;
  --d-mid:  .38s;
  --d-slow: .8s;

  /* Elevation */
  --sh-1: 0 1px 2px rgba(0,0,0,.5);
  --sh-2: 0 10px 30px -12px rgba(0,0,0,.8);
  --sh-3: 0 30px 70px -20px rgba(0,0,0,.85);
  --ring: 0 0 0 1px var(--line);
}

/* ---------- Light theme ---------- */
[data-theme="light"] {
  --ink-900: #f7f9fb;
  --ink-850: #f2f5f8;
  --ink-800: #ffffff;
  --ink-750: #ffffff;
  --ink-700: #eef2f6;
  --ink-600: #e3e9f0;
  --ink-500: #d5dee7;

  --line:        #dde5ee;
  --line-soft:   #e9eef4;
  --line-strong: #c3d0de;

  --txt-1: #0b1420;
  --txt-2: #4a5c6f;
  --txt-3: #6f8398;
  --txt-4: #9db0c2;

  --acc:      #00875a;
  --acc-dim:  #7ad2b2;
  --acc-glow: rgba(0, 135, 90, .12);
  --amber:    #b06f00;
  --azure:    #2563d8;
  --violet:   #6d3ecf;
  --danger:   #d13333;

  --panel: rgba(255, 255, 255, .82);
  --sh-2: 0 10px 30px -14px rgba(15, 35, 60, .22);
  --sh-3: 0 30px 70px -24px rgba(15, 35, 60, .26);
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-color: var(--line-strong) transparent;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg);
  color: var(--txt-1);
  font-family: var(--f-body);
  font-size: var(--t-md);
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  min-height: 100svh;
  transition: background var(--d-mid) var(--e-soft), color var(--d-mid) var(--e-soft);
}
body.is-locked { overflow: hidden; }

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
table { border-collapse: collapse; }
:where(h1, h2, h3, h4) { line-height: 1.05; font-weight: 600; letter-spacing: -.02em; }

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

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line-strong); border-radius: 99px;
  border: 3px solid var(--bg); background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--txt-4); background-clip: padding-box; }

/* ---------- 3. Focus ---------- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* ---------- 4. Utility ---------- */
.u-mono { font-family: var(--f-mono); }
.u-display { font-family: var(--f-display); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 9999;
  padding: 10px 18px; background: var(--acc); color: var(--ink-900);
  font-family: var(--f-mono); font-size: var(--t-sm); font-weight: 600;
  border-radius: var(--r-md);
  transform: translateY(-160%);
  transition: transform var(--d-fast) var(--e-out);
}
.skip-link:focus-visible { transform: translateY(0); }

/* Micro-label: the small mono tag used across the site */
.tag {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--txt-3);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.tag::before {
  content: "";
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--acc);
  box-shadow: 0 0 0 3px var(--acc-glow);
  flex: none;
}
.tag--plain::before { display: none; }

.mut { color: var(--txt-2); }
.dim { color: var(--txt-3); }
.acc { color: var(--acc); }

/* Print */
@media print {
  .bg-canvas, .cursor, .nav, .cmdk, .scanlines, .boot { display: none !important; }
  body { background: #fff; color: #000; }
}