/* ════════════════════════════════════════════════════════════════════
   RM CRM — Design Tokens v2 (Linear-grade B2B)
   ──────────────────────────────────────────────────────────────────
   • Indigo primary (#5b5bd6) — deeper, more serious than the old #2563eb
   • Emerald accent for success / live status
   • True dual theme — light + dark with full token coverage
   • Tighter type scale, denser UI (13–14px base)
   • Hairline 1px borders, almost no drop shadows
   • Tighter radii (6–10px) — corporate, not friendly
   • Tabular numerics everywhere for data
   ──────────────────────────────────────────────────────────────────── */

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

/* ════════════════════════════════════════════════════════════════════
   1. PRIMITIVE SCALES  (theme-independent)
   ──────────────────────────────────────────────────────────────────── */
:root {
  /* ── Indigo (brand primary) ── */
  --rm-indigo-50:   #eef0ff;
  --rm-indigo-100:  #dde0ff;
  --rm-indigo-200:  #c0c5fc;
  --rm-indigo-300:  #9ca2f5;
  --rm-indigo-400:  #7a7fea;
  --rm-indigo-500:  #5b5bd6;   /* ← brand primary */
  --rm-indigo-600:  #4a48c4;
  --rm-indigo-700:  #3d3aa8;
  --rm-indigo-800:  #2f2d80;
  --rm-indigo-900:  #1f1e54;

  /* ── Emerald (success / live) ── */
  --rm-emerald-50:  #ecfdf5;
  --rm-emerald-100: #d1fae5;
  --rm-emerald-300: #6ee7b7;
  --rm-emerald-500: #10b981;
  --rm-emerald-600: #059669;
  --rm-emerald-700: #047857;

  /* ── Amber (warning) ── */
  --rm-amber-50:    #fffbeb;
  --rm-amber-100:   #fef3c7;
  --rm-amber-500:   #f59e0b;
  --rm-amber-600:   #d97706;

  /* ── Rose (danger) ── */
  --rm-rose-50:     #fff1f2;
  --rm-rose-100:    #ffe4e6;
  --rm-rose-500:    #f43f5e;
  --rm-rose-600:    #e11d48;
  --rm-rose-700:    #be123c;

  /* ── Sky (info) ── */
  --rm-sky-50:      #f0f9ff;
  --rm-sky-100:     #e0f2fe;
  --rm-sky-500:     #0ea5e9;
  --rm-sky-600:     #0284c7;

  /* ── Neutral (grayscale spine) ── */
  --rm-neutral-0:    #ffffff;
  --rm-neutral-25:   #fbfbfc;
  --rm-neutral-50:   #f7f7f8;
  --rm-neutral-75:   #f2f2f4;
  --rm-neutral-100:  #ebebed;
  --rm-neutral-200:  #dcdce0;
  --rm-neutral-300:  #c2c3ca;
  --rm-neutral-400:  #9ea0aa;
  --rm-neutral-500:  #767883;
  --rm-neutral-600:  #565862;
  --rm-neutral-700:  #3e404a;
  --rm-neutral-800:  #292a32;
  --rm-neutral-850:  #1f2027;
  --rm-neutral-900:  #15161c;
  --rm-neutral-950:  #0d0e12;

  /* ════════════════════════════════════════════════════════════════
     2. TYPE PRIMITIVES
     ────────────────────────────────────────────────────────────── */
  --rm-font-display: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --rm-font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --rm-font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale (denser than v1 — Linear-grade) */
  --rm-fs-display:   34px;   /* hero numbers, login splash */
  --rm-fs-h1:        24px;
  --rm-fs-h2:        18px;
  --rm-fs-h3:        15px;
  --rm-fs-h4:        13px;
  --rm-fs-body:      13px;   /* base body — was 14px in v1 */
  --rm-fs-body-lg:   14px;   /* mobile body, key surfaces */
  --rm-fs-small:     12px;
  --rm-fs-micro:     11px;   /* labels, table headers, eyebrow */
  --rm-fs-tiny:      10px;   /* badges, side-titles */

  --rm-fw-regular:   400;
  --rm-fw-medium:    500;
  --rm-fw-semibold:  600;
  --rm-fw-bold:      700;
  --rm-fw-black:     800;

  --rm-lh-tight:     1.2;
  --rm-lh-snug:      1.35;
  --rm-lh-normal:    1.5;
  --rm-lh-relaxed:   1.6;

  --rm-track-tight:  -0.022em;
  --rm-track-snug:   -0.014em;
  --rm-track-normal: -0.006em;
  --rm-track-wide:   0.04em;
  --rm-track-caps:   0.06em;

  /* ════════════════════════════════════════════════════════════════
     3. SPACING + RADIUS + MOTION
     ────────────────────────────────────────────────────────────── */
  --rm-s-0:  0;
  --rm-s-1:  2px;
  --rm-s-2:  4px;
  --rm-s-3:  6px;
  --rm-s-4:  8px;
  --rm-s-5:  10px;
  --rm-s-6:  12px;
  --rm-s-7:  14px;
  --rm-s-8:  16px;
  --rm-s-9:  20px;
  --rm-s-10: 24px;
  --rm-s-11: 32px;
  --rm-s-12: 40px;
  --rm-s-13: 56px;
  --rm-s-14: 80px;

  --rm-r-xs:   4px;
  --rm-r-sm:   6px;
  --rm-r:      8px;     /* default (buttons, inputs, chips) */
  --rm-r-md:   10px;    /* cards */
  --rm-r-lg:   12px;    /* large surfaces */
  --rm-r-xl:   16px;    /* modals, sheets */
  --rm-r-pill: 999px;

  --rm-ease:        cubic-bezier(.16,1,.3,1);
  --rm-ease-out:    cubic-bezier(.22,1,.36,1);
  --rm-dur-fast:    120ms;
  --rm-dur:         180ms;
  --rm-dur-slow:    280ms;
}

/* ════════════════════════════════════════════════════════════════════
   4. SEMANTIC TOKENS — LIGHT THEME (default)
   ──────────────────────────────────────────────────────────────────── */
:root,
:root.rm-light,
.rm-light {
  /* Brand */
  --rm-primary:       var(--rm-indigo-500);
  --rm-primary-hover: var(--rm-indigo-600);
  --rm-primary-press: var(--rm-indigo-700);
  --rm-primary-fg:    #ffffff;
  --rm-primary-tint:  var(--rm-indigo-50);
  --rm-primary-tint-2:var(--rm-indigo-100);
  --rm-primary-ring:  rgba(91, 91, 214, 0.32);

  --rm-accent:        var(--rm-emerald-600);
  --rm-accent-hover:  var(--rm-emerald-700);
  --rm-accent-tint:   var(--rm-emerald-50);

  /* Status */
  --rm-success:       var(--rm-emerald-600);
  --rm-success-tint:  var(--rm-emerald-50);
  --rm-warning:       var(--rm-amber-600);
  --rm-warning-tint:  var(--rm-amber-50);
  --rm-danger:        var(--rm-rose-600);
  --rm-danger-tint:   var(--rm-rose-50);
  --rm-info:          var(--rm-sky-600);
  --rm-info-tint:     var(--rm-sky-50);

  /* Surfaces — layered, all near-white (Linear-style) */
  --rm-bg:            var(--rm-neutral-50);    /* app shell */
  --rm-bg-subtle:     var(--rm-neutral-75);    /* alt rows, sidebars on light */
  --rm-surface:       var(--rm-neutral-0);     /* cards, panels */
  --rm-surface-2:     var(--rm-neutral-25);    /* nested surface */
  --rm-surface-hover: var(--rm-neutral-75);
  --rm-surface-press: var(--rm-neutral-100);
  --rm-overlay:       rgba(13, 14, 18, 0.40);  /* modal scrim */

  /* Text */
  --rm-fg:            var(--rm-neutral-900);
  --rm-fg-strong:     var(--rm-neutral-950);
  --rm-fg-muted:      var(--rm-neutral-600);
  --rm-fg-subtle:     var(--rm-neutral-400);
  --rm-fg-disabled:   var(--rm-neutral-300);
  --rm-fg-inverse:    var(--rm-neutral-0);
  --rm-fg-on-primary: #ffffff;
  --rm-fg-on-accent:  #ffffff;

  /* Borders — hairline */
  --rm-border:        var(--rm-neutral-100);
  --rm-border-strong: var(--rm-neutral-200);
  --rm-border-focus:  var(--rm-indigo-500);
  --rm-divider:       var(--rm-neutral-100);

  /* Elevation — Linear keeps this minimal: 1px line + tiny shadow */
  --rm-shadow-xs:  0 1px 0 rgba(15, 16, 22, 0.04);
  --rm-shadow-sm:  0 1px 2px rgba(15, 16, 22, 0.04), 0 0 0 1px rgba(15, 16, 22, 0.04);
  --rm-shadow:     0 4px 12px -4px rgba(15, 16, 22, 0.08), 0 1px 0 rgba(15, 16, 22, 0.03);
  --rm-shadow-md:  0 8px 24px -8px rgba(15, 16, 22, 0.12), 0 1px 0 rgba(15, 16, 22, 0.04);
  --rm-shadow-lg:  0 24px 48px -12px rgba(15, 16, 22, 0.18);
  --rm-shadow-xl:  0 32px 80px -16px rgba(15, 16, 22, 0.24);
  --rm-shadow-focus: 0 0 0 3px var(--rm-primary-ring);

  /* Brand gradients (kept, but tuned indigo) */
  --rm-gradient-brand:    linear-gradient(135deg, #5b5bd6 0%, #4a48c4 50%, #3d3aa8 100%);
  --rm-gradient-login:    linear-gradient(135deg, #1f1e54 0%, #2f2d80 50%, #4a48c4 100%);
  --rm-gradient-sidebar:  linear-gradient(180deg, #15161c 0%, #1f2027 100%);
  --rm-gradient-shimmer:  linear-gradient(90deg, transparent, rgba(91, 91, 214, 0.10), transparent);

  /* Data viz palette (color-blind safe, harmonious) */
  --rm-chart-1: #5b5bd6;  /* indigo */
  --rm-chart-2: #10b981;  /* emerald */
  --rm-chart-3: #f59e0b;  /* amber */
  --rm-chart-4: #f43f5e;  /* rose */
  --rm-chart-5: #06b6d4;  /* cyan */
  --rm-chart-6: #a855f7;  /* violet */
  --rm-chart-7: #84cc16;  /* lime */
  --rm-chart-grid: var(--rm-neutral-100);
}

/* ════════════════════════════════════════════════════════════════════
   5. SEMANTIC TOKENS — DARK THEME
   ──────────────────────────────────────────────────────────────────── */
:root.rm-dark,
.rm-dark {
  /* Brand — slightly lighter on dark for contrast */
  --rm-primary:       #7a7fea;
  --rm-primary-hover: #9ca2f5;
  --rm-primary-press: #c0c5fc;
  --rm-primary-fg:    #0d0e12;
  --rm-primary-tint:  rgba(91, 91, 214, 0.14);
  --rm-primary-tint-2:rgba(91, 91, 214, 0.22);
  --rm-primary-ring:  rgba(122, 127, 234, 0.40);

  --rm-accent:        #34d399;
  --rm-accent-hover:  #6ee7b7;
  --rm-accent-tint:   rgba(16, 185, 129, 0.14);

  /* Status — desaturated, brighter foregrounds */
  --rm-success:       #34d399;
  --rm-success-tint:  rgba(16, 185, 129, 0.14);
  --rm-warning:       #fbbf24;
  --rm-warning-tint:  rgba(245, 158, 11, 0.14);
  --rm-danger:        #fb7185;
  --rm-danger-tint:   rgba(244, 63, 94, 0.14);
  --rm-info:          #38bdf8;
  --rm-info-tint:     rgba(14, 165, 233, 0.14);

  /* Surfaces */
  --rm-bg:            var(--rm-neutral-950);   /* app shell — near black */
  --rm-bg-subtle:     var(--rm-neutral-900);
  --rm-surface:       var(--rm-neutral-900);   /* cards on bg */
  --rm-surface-2:     var(--rm-neutral-850);   /* nested surface */
  --rm-surface-hover: var(--rm-neutral-800);
  --rm-surface-press: var(--rm-neutral-700);
  --rm-overlay:       rgba(0, 0, 0, 0.65);

  /* Text */
  --rm-fg:            #e6e7eb;
  --rm-fg-strong:     #f4f5f7;
  --rm-fg-muted:      #9ea0aa;
  --rm-fg-subtle:     #6b6e78;
  --rm-fg-disabled:   #3e404a;
  --rm-fg-inverse:    var(--rm-neutral-950);
  --rm-fg-on-primary: #0d0e12;
  --rm-fg-on-accent:  #0d0e12;

  /* Borders */
  --rm-border:        rgba(255, 255, 255, 0.06);
  --rm-border-strong: rgba(255, 255, 255, 0.10);
  --rm-border-focus:  #7a7fea;
  --rm-divider:       rgba(255, 255, 255, 0.06);

  /* Elevation — almost no shadow on dark, rely on surface lifts */
  --rm-shadow-xs:  0 1px 0 rgba(0, 0, 0, 0.4);
  --rm-shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --rm-shadow:     0 4px 12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --rm-shadow-md:  0 8px 24px rgba(0, 0, 0, 0.55);
  --rm-shadow-lg:  0 24px 48px rgba(0, 0, 0, 0.65);
  --rm-shadow-xl:  0 32px 80px rgba(0, 0, 0, 0.75);
  --rm-shadow-focus: 0 0 0 3px var(--rm-primary-ring);

  /* Gradients — deeper on dark */
  --rm-gradient-brand:    linear-gradient(135deg, #7a7fea 0%, #5b5bd6 50%, #4a48c4 100%);
  --rm-gradient-login:    linear-gradient(135deg, #0d0e12 0%, #1f1e54 50%, #2f2d80 100%);
  --rm-gradient-sidebar:  linear-gradient(180deg, #0d0e12 0%, #15161c 100%);
  --rm-gradient-shimmer:  linear-gradient(90deg, transparent, rgba(122, 127, 234, 0.16), transparent);

  /* Data viz — slightly desaturated for dark */
  --rm-chart-1: #7a7fea;
  --rm-chart-2: #34d399;
  --rm-chart-3: #fbbf24;
  --rm-chart-4: #fb7185;
  --rm-chart-5: #22d3ee;
  --rm-chart-6: #c084fc;
  --rm-chart-7: #a3e635;
  --rm-chart-grid: rgba(255, 255, 255, 0.06);
}

/* ════════════════════════════════════════════════════════════════════
   6. SEMANTIC TYPE CLASSES
   ──────────────────────────────────────────────────────────────────── */
.rm-text {
  font-family: var(--rm-font-sans);
  font-size:   var(--rm-fs-body);
  font-weight: var(--rm-fw-regular);
  line-height: var(--rm-lh-normal);
  letter-spacing: var(--rm-track-normal);
  color: var(--rm-fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.rm-display {
  font-family: var(--rm-font-display);
  font-size: var(--rm-fs-display);
  font-weight: var(--rm-fw-bold);
  line-height: var(--rm-lh-tight);
  letter-spacing: var(--rm-track-tight);
  color: var(--rm-fg-strong);
  margin: 0;
}
.rm-h1 {
  font-family: var(--rm-font-display);
  font-size: var(--rm-fs-h1);
  font-weight: var(--rm-fw-bold);
  line-height: var(--rm-lh-tight);
  letter-spacing: var(--rm-track-tight);
  color: var(--rm-fg-strong);
  margin: 0;
}
.rm-h2 {
  font-family: var(--rm-font-display);
  font-size: var(--rm-fs-h2);
  font-weight: var(--rm-fw-semibold);
  line-height: var(--rm-lh-snug);
  letter-spacing: var(--rm-track-snug);
  color: var(--rm-fg-strong);
  margin: 0;
}
.rm-h3 {
  font-family: var(--rm-font-sans);
  font-size: var(--rm-fs-h3);
  font-weight: var(--rm-fw-semibold);
  line-height: var(--rm-lh-snug);
  letter-spacing: var(--rm-track-snug);
  color: var(--rm-fg-strong);
  margin: 0;
}
.rm-h4 {
  font-family: var(--rm-font-sans);
  font-size: var(--rm-fs-h4);
  font-weight: var(--rm-fw-semibold);
  line-height: var(--rm-lh-snug);
  color: var(--rm-fg);
  margin: 0;
}
.rm-body {
  font-family: var(--rm-font-sans);
  font-size: var(--rm-fs-body);
  font-weight: var(--rm-fw-regular);
  line-height: var(--rm-lh-normal);
  color: var(--rm-fg);
}
.rm-body-lg {
  font-family: var(--rm-font-sans);
  font-size: var(--rm-fs-body-lg);
  font-weight: var(--rm-fw-regular);
  line-height: var(--rm-lh-normal);
  color: var(--rm-fg);
}
.rm-small {
  font-family: var(--rm-font-sans);
  font-size: var(--rm-fs-small);
  font-weight: var(--rm-fw-regular);
  line-height: var(--rm-lh-snug);
  color: var(--rm-fg-muted);
}
.rm-micro {
  font-family: var(--rm-font-sans);
  font-size: var(--rm-fs-micro);
  font-weight: var(--rm-fw-medium);
  line-height: var(--rm-lh-snug);
  color: var(--rm-fg-muted);
}
.rm-eyebrow {
  font-family: var(--rm-font-sans);
  font-size: var(--rm-fs-tiny);
  font-weight: var(--rm-fw-semibold);
  line-height: 1;
  color: var(--rm-fg-muted);
  text-transform: uppercase;
  letter-spacing: var(--rm-track-caps);
}
.rm-mono {
  font-family: var(--rm-font-mono);
  font-size: var(--rm-fs-small);
  letter-spacing: 0;
  font-feature-settings: "ss01", "cv11";
}
.rm-num {
  font-family: var(--rm-font-display);
  font-feature-settings: "tnum", "ss01";
  font-variant-numeric: tabular-nums;
  font-weight: var(--rm-fw-semibold);
  letter-spacing: var(--rm-track-tight);
}

/* Sidebar/section titles (uppercase, low-contrast) */
.rm-side-title {
  font-family: var(--rm-font-sans);
  font-size: var(--rm-fs-tiny);
  font-weight: var(--rm-fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--rm-track-caps);
  color: var(--rm-fg-subtle);
}

/* ════════════════════════════════════════════════════════════════════
   7. PREVIEW CARD CHROME (used by /preview/*.html)
   ──────────────────────────────────────────────────────────────────── */
.rm-preview-shell {
  font-family: var(--rm-font-sans);
  background: var(--rm-bg);
  color: var(--rm-fg);
  min-height: 100vh;
  padding: 32px;
  -webkit-font-smoothing: antialiased;
}
.rm-preview-card {
  background: var(--rm-surface);
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-r-lg);
  padding: 28px;
  max-width: 1080px;
  margin: 0 auto;
  box-shadow: var(--rm-shadow-sm);
}
.rm-preview-eyebrow {
  font-size: var(--rm-fs-tiny);
  font-weight: var(--rm-fw-semibold);
  letter-spacing: var(--rm-track-caps);
  text-transform: uppercase;
  color: var(--rm-fg-subtle);
  margin: 0 0 6px;
}
.rm-preview-title {
  font-family: var(--rm-font-display);
  font-size: var(--rm-fs-h1);
  font-weight: var(--rm-fw-bold);
  letter-spacing: var(--rm-track-tight);
  color: var(--rm-fg-strong);
  margin: 0 0 4px;
}
.rm-preview-sub {
  font-size: var(--rm-fs-small);
  color: var(--rm-fg-muted);
  margin: 0 0 24px;
}