/* Design tokens — Monero orange on deep neutral surfaces.
 * Single source of truth: every component reads var(--*) from this file.
 * No hardcoded color values anywhere else in the codebase. */

/* Vendored variable fonts. IDE-4: never load fonts from a CDN.
 * Files live at /lib/fonts/* and are populated by scripts/vendor-fonts.sh
 * at build time (Inter v4.0 + JetBrains Mono v2.304, both OFL-licensed).
 * font-display: swap means the system fallback paints first; the variable
 * fonts replace it as soon as they finish loading — no FOIT. */
@font-face {
  font-family: 'Inter';
  src: url('/lib/fonts/inter-variable.woff2') format('woff2-variations'),
       url('/lib/fonts/inter-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('/lib/fonts/jetbrains-mono-variable.woff2') format('woff2-variations'),
       url('/lib/fonts/jetbrains-mono-variable.woff2') format('woff2');
  font-weight: 100 800;
  font-display: swap;
  font-style: normal;
}

:root {
  /* Backgrounds — deepest to most-elevated */
  --bg-base:        #0d0d0d;
  --bg-surface:     #1a1a1a;
  --bg-elevated:    #2a2a2a;
  --bg-popover:     #333333;
  --bg-hover:       #2f2f2f;
  --bg-active:      #3a2410;

  /* Borders */
  --border-subtle:  #262626;
  --border-strong:  #3a3a3a;
  --border-focus:   #FF6600;

  /* Brand — Monero orange */
  --accent:         #FF6600;
  --accent-hover:   #FF8833;
  --accent-press:   #E65800;
  --accent-soft:    rgba(255, 102, 0, 0.12);
  --accent-glow:    rgba(255, 102, 0, 0.25);

  /* Text */
  --text-primary:   #f5f5f5;
  --text-secondary: #a0a0a0;
  --text-muted:     #6a6a6a;
  --text-inverse:   #0d0d0d;

  /* Semantic */
  --success:        #22c55e;
  --warning:        #f59e0b;
  --danger:         #ef4444;
  --info:           #38bdf8;

  /* Syntax */
  --syn-keyword:    #FF8833;
  --syn-type:       #facc15;
  --syn-string:     #86efac;
  --syn-number:     #f0abfc;
  --syn-comment:    #6a6a6a;
  --syn-fn:         #93c5fd;
  --syn-var:        #f5f5f5;
  --syn-error:      #ef4444;
  --syn-attr:       #c084fc;
  --syn-operator:   #d4d4d8;

  /* Geometry */
  --radius-sm:      4px;
  --radius-md:      6px;
  --radius-lg:      10px;
  --shadow-elev-1:  0 1px 2px rgba(0,0,0,0.4);
  --shadow-elev-2:  0 4px 12px rgba(0,0,0,0.6);
  --shadow-glow:    0 0 16px var(--accent-glow);

  /* Type scale */
  --font-ui:        'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:      'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --fs-xs:          11px;
  --fs-sm:          12px;
  --fs-base:        13px;
  --fs-md:          14px;
  --fs-lg:          16px;
  --fs-xl:          20px;
  --fs-2xl:         26px;
  --lh-tight:       1.25;
  --lh-normal:      1.5;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
*:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; border-radius: 2px; }

html, body {
  height: 100%;
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}

#app { width: 100vw; height: 100vh; display: flex; flex-direction: column; }

button, input, select, textarea {
  font-family: inherit;
  color: inherit;
  background: transparent;
  border: none;
}
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 120ms ease-out;
}
a:hover { color: var(--accent-hover); }

::selection { background: var(--accent-soft); color: var(--text-primary); }

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 6px;
  border: 3px solid var(--bg-base);
}
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

.mono { font-family: var(--font-mono); }
.tabular { font-variant-numeric: tabular-nums; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;
}

.sep {
  display: inline-block;
  width: 1px;
  height: 12px;
  background: var(--border-subtle);
  vertical-align: middle;
  margin: 0 4px;
}