/* ==========================================================================
   Revnexa design tokens
   Edit this file to re-brand the whole template.
   Light theme is the default; dark theme is activated with
   <html data-theme="dark"> (set by assets/js/core/theme.js).
   ========================================================================== */

:root {
  /* Brand */
  --rx-brand-50:  #eef3ff;
  --rx-brand-100: #dce6ff;
  --rx-brand-200: #bccdff;
  --rx-brand-500: #3b63e6;
  --rx-brand-600: #2f52c9;
  --rx-brand-700: #2543a3;

  /* Semantic colors */
  --rx-success: #116b33;
  --rx-success-bg: #e3f4ea;
  --rx-warning: #8a5200;
  --rx-warning-bg: #fdf0d8;
  --rx-danger: #c0312b;
  --rx-danger-bg: #fbe5e3;
  --rx-info: #0b6b8a;
  --rx-info-bg: #def2f8;
  --rx-neutral: #4b5565;
  --rx-neutral-bg: #eaedf2;

  /* Surfaces & text (light) */
  --rx-bg: #f4f6fa;
  --rx-surface: #ffffff;
  --rx-surface-2: #f8f9fc;
  --rx-border: #e2e6ee;
  --rx-border-strong: #cdd3df;
  --rx-text: #1b2230;
  --rx-text-muted: #5d6779;
  --rx-text-faint: #667085;
  --rx-focus: #3b63e6;

  /* Sidebar (stays dark in both themes) */
  --rx-sidebar-bg: #121a2c;
  --rx-sidebar-text: #aeb8cc;
  --rx-sidebar-text-active: #ffffff;
  --rx-sidebar-hover: rgba(255, 255, 255, .06);
  --rx-sidebar-active: rgba(91, 127, 255, .22);
  --rx-sidebar-border: rgba(255, 255, 255, .08);

  /* Chart palette (categorical, validated for both themes) */
  --rx-chart-1: #3b63e6;
  --rx-chart-2: #14a58a;
  --rx-chart-3: #e0902b;
  --rx-chart-4: #8a5cd6;
  --rx-chart-5: #d9534f;
  --rx-chart-6: #5d6779;
  --rx-chart-grid: #e8ebf2;
  --rx-chart-text: #5d6779;

  /* Typography */
  --rx-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --rx-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --rx-fs-xs: .75rem;
  --rx-fs-sm: .8125rem;
  --rx-fs-base: .9rem;
  --rx-fs-lg: 1.05rem;
  --rx-fs-xl: 1.35rem;
  --rx-fs-2xl: 1.75rem;

  /* Shape & elevation */
  --rx-radius-sm: 6px;
  --rx-radius: 10px;
  --rx-radius-lg: 14px;
  --rx-shadow-sm: 0 1px 2px rgba(18, 26, 44, .06);
  --rx-shadow: 0 2px 8px rgba(18, 26, 44, .07), 0 1px 2px rgba(18, 26, 44, .05);
  --rx-shadow-lg: 0 12px 32px rgba(18, 26, 44, .16);

  /* Layout */
  --rx-sidebar-w: 260px;
  --rx-sidebar-w-collapsed: 72px;
  --rx-topbar-h: 64px;
  --rx-content-max: 1480px;
  --rx-space: 1.5rem;
}

html[data-theme="dark"] {
  --rx-brand-50:  #1b2547;
  --rx-brand-100: #222f5c;
  --rx-brand-200: #34478c;
  --rx-brand-500: #6f8dff;
  --rx-brand-600: #4262e6; /* background with white text (5.1:1); use --rx-brand-700 for text on dark surfaces */
  --rx-brand-700: #8fa6ff;

  --rx-success: #4cc27e;
  --rx-success-bg: #12301f;
  --rx-warning: #f0b04a;
  --rx-warning-bg: #3a2a0c;
  --rx-danger: #ff7a73;
  --rx-danger-bg: #3d1816;
  --rx-info: #5cc3e3;
  --rx-info-bg: #0f2f3a;
  --rx-neutral: #aab3c4;
  --rx-neutral-bg: #262d3c;

  --rx-bg: #0d1220;
  --rx-surface: #151c2e;
  --rx-surface-2: #1a2236;
  --rx-border: #263049;
  --rx-border-strong: #34405e;
  --rx-text: #e6eaf3;
  --rx-text-muted: #a2adc2;
  --rx-text-faint: #8490a8;
  --rx-focus: #8fa6ff;

  --rx-sidebar-bg: #0a0f1c;

  --rx-chart-1: #6f8dff;
  --rx-chart-2: #3cc5a8;
  --rx-chart-3: #f0b04a;
  --rx-chart-4: #b08cf0;
  --rx-chart-5: #ff7a73;
  --rx-chart-6: #9aa5ba;
  --rx-chart-grid: #263049;
  --rx-chart-text: #a2adc2;

  --rx-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --rx-shadow: 0 2px 8px rgba(0, 0, 0, .35);
  --rx-shadow-lg: 0 12px 32px rgba(0, 0, 0, .55);
  color-scheme: dark;
}