/* Distance Fields shared UI kit: the "midnight command deck" tokens, type, buttons, inputs and cards. */

:root {
  --onyx: #08090a;
  --charcoal: #0f1011;
  --obsidian: #161718;
  --graphite: #23252a;
  --iron: #323334;
  --steel: #383b3f;
  --slate: #62666d;
  --fog: #8a8f98;
  --mist: #d0d6e0;
  --platinum: #e5e5e6;
  --snow: #f7f8f8;
  --lime: #e4f222;
  --indigo: #5e6ad2;
  --emerald: #27a644;
  --crimson: #eb5757;
  --cyan: #02b8cc;

  --font-sans: 'Helvetica', 'Arial', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --r-sm: 2px; --r-md: 6px; --r-xl: 12px; --r-pill: 9999px;
  --inset: inset 0 0 0 1px var(--graphite);
  --shadow-card: 0 2px 4px 0 rgba(0,0,0,0.4);
  --shadow-float: 0 4px 32px 0 rgba(8,9,10,0.6);
}

* { box-sizing: border-box; }

body {
  background: var(--onyx);
  color: var(--snow);
  font-family: var(--font-sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { font-weight: 510; letter-spacing: -0.012em; color: var(--snow); margin: 0; }
.label { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate); }
.mono { font-family: var(--font-mono); }

.btn-primary {
  background: var(--lime); color: #08090a; border: none; border-radius: var(--r-md);
  font-family: inherit; font-weight: 510; font-size: 14px; padding: 9px 18px; cursor: pointer;
  box-shadow: 0 5px 2px 0 rgba(0,0,0,.01), 0 3px 2px 0 rgba(0,0,0,.04), 0 1px 1px 0 rgba(0,0,0,.07);
}
.btn-primary:hover { filter: brightness(1.06); }

.btn-ghost {
  background: transparent; color: var(--fog); border: 1px solid var(--graphite);
  border-radius: var(--r-md); font-family: inherit; font-size: 13px; padding: 8px 14px; cursor: pointer;
}
.btn-ghost:hover { color: var(--snow); background: var(--obsidian); }

input[type=text], textarea, select {
  font-family: inherit; color: var(--snow); background: var(--steel);
  border: none; border-radius: var(--r-md); box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); outline: none;
}
input[type=text]:focus, textarea:focus, select:focus { box-shadow: inset 0 0 0 1px var(--indigo); }
input::placeholder, textarea::placeholder { color: var(--slate); }

.card { background: var(--charcoal); border-radius: var(--r-xl); box-shadow: var(--inset), var(--shadow-card); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--iron); border-radius: 6px; }
::-webkit-scrollbar-track { background: transparent; }