/* Proxim · Design Tokens
   Dark-first. Navy surfaces, a single orange accent used sparingly. */

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

:root {
  --bg-primary:    #0f172a;
  --bg-secondary:  #131d36;
  --bg-tertiary:   #18223b;
  --bg-hover:      #222e4a;
  --bg-active:     #323f5e;
  --bg-overlay:    rgba(15, 23, 42, 0.72);

  --border-subtle: #1f2a44;
  --border-default:#2a3753;
  --border-strong: #3a4a6e;

  --text-primary:   #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted:     #64748b;
  --text-inverse:   #0f172a;

  --accent:       #f48b0c;
  --accent-hover: #ff9a22;
  --accent-press: #d9770a;
  --accent-soft:  rgba(244, 139, 12, 0.14);
  --accent-ring:  rgba(244, 139, 12, 0.35);

  --status-connected: #4ade80;
  --status-away:      #fbbf24;
  --status-busy:      #ef4444;
  --status-offline:   #64748b;

  --font-ui:      'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-display: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  18px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
  --shadow-inset-hairline: inset 0 1px 0 rgba(255, 255, 255, 0.04);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 120ms;

  --width-content: 1120px;
}

html, body {
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

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

*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}