/* ============================================================
   Revoloox theme — tokens derived from horizon-crm.html
   ("International Style"). Components read these through
   var(--rx-*) with built-in fallbacks.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --rx-canvas: #F1F2F4;
  --rx-surface: #FFFFFF;
  --rx-surface-2: #F7F8F9;
  --rx-bar: #0C0D0F;
  --rx-bar-2: #1E2024;
  --rx-bar-txt: #8A9099;
  --rx-ink: #0C0D0F;
  --rx-ink-2: #565C66;
  --rx-ink-3: #8B919B;
  --rx-line: #E4E6EA;
  --rx-line-2: #CBCFD6;
  --rx-blue: #1447FF;
  --rx-blue-dark: #0B33CC;
  --rx-blue-wash: #EEF2FF;
  --rx-red: #E5342B;
  --rx-green: #0E8A5F;
  --rx-amber: #C77700;
  --rx-violet: #6B4FE0;
  --rx-r-sm: 3px;
  --rx-r-md: 5px;
  --rx-r-lg: 7px;
  --rx-side-w: 238px;
  --rx-bar-h: 52px;
  --rx-sh-2: 0 10px 30px rgba(12, 13, 15, .10), 0 2px 6px rgba(12, 13, 15, .05);
  --rx-sh-3: 0 40px 90px rgba(12, 13, 15, .30);
  --rx-ff-display: "Inter Tight", system-ui, sans-serif;
  --rx-ff-body: "Inter", system-ui, sans-serif;
  --rx-ff-mono: "JetBrains Mono", ui-monospace, monospace;
  --rx-fs: 13.5px;
  --rx-gap-xs: 4px;
  --rx-gap-sm: 8px;
  --rx-gap-md: 14px;
  --rx-gap-lg: 22px;
  --rx-gap-xl: 32px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  font-family: var(--rx-ff-body);
  font-size: var(--rx-fs);
  line-height: 1.5;
  color: var(--rx-ink);
  background: var(--rx-canvas);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--rx-blue); color: #fff; }

h1, h2, h3, h4 { font-family: var(--rx-ff-display); letter-spacing: -.02em; font-weight: 600; margin: 0; }

.rx-mono { font-family: var(--rx-ff-mono); font-feature-settings: "tnum"; }

.rx-eyebrow {
  font-family: var(--rx-ff-mono);
  font-size: 9.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--rx-ink-3);
  font-weight: 500;
}

@keyframes rx-rise { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}