/* tokens.css — GIT app palette + type. SPLICE family: ink, panel, safety orange. */

:root {
  --bg:      #101214;
  --panel:   #16191d;
  --raised:  #1b2027;
  --line:    #262c35;
  --text:    #d4dae2;
  --dim:     #79828e;
  --orange:  #ff6a00;
  --orange-soft: rgba(255, 106, 0, 0.12);
  --ok:      #43b581;
  --warn:    #e5c07b;
  --err:     #e06c75;

  --mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", "Cascadia Code",
          "Fira Code", Menlo, Consolas, "DejaVu Sans Mono", monospace;
}

html { background: var(--bg); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--orange); color: #101214; }

a { color: var(--orange); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

code, kbd, pre { font-family: var(--mono); }

code {
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0 4px;
  font-size: 0.93em;
  white-space: nowrap;
}

kbd {
  background: var(--raised);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 3px;
  padding: 0 5px;
  font-size: 0.9em;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}