/* =============================================================
 * revolv® Design Tokens — v1.45.44
 *
 * BoomTown-inspired foundation for the CRM redesign. PURELY
 * additive — defines CSS custom properties under the --rd-* prefix.
 * Existing CSS that uses hardcoded values is unaffected; new code
 * (Phases 1–6) consumes these tokens to get a consistent shell.
 *
 * Conventions:
 *   --rd-color-…    palette
 *   --rd-text-…     typography
 *   --rd-space-…    spacing scale (4px base)
 *   --rd-radius-…   border radius
 *   --rd-shadow-…   elevation
 *   --rd-z-…        z-index layers
 *   --rd-ease-…     transition timing
 *
 * Brand: orange accent (#FF6B35). Do not introduce a second accent.
 * Heat scale (cold→fire) is reserved for predictive lead scoring.
 * ============================================================= */

:root {

  /* ─── Surfaces (white-on-white hierarchy) ────────────────── */
  --rd-bg-canvas:        #f8fafc;   /* page background */
  --rd-bg-surface:       #ffffff;   /* cards, panels */
  --rd-bg-raised:        #ffffff;   /* modals, popovers (pair with --rd-shadow-lg) */
  --rd-bg-subtle:        #f1f5f9;   /* hover state, input bg */
  --rd-bg-muted:         #e2e8f0;   /* disabled bg, skeleton */
  --rd-bg-inverse:       #0f172a;   /* dark surfaces (rare) */

  /* ─── Text scale (slate hierarchy) ───────────────────────── */
  --rd-text-primary:     #0f172a;   /* slate-900 — headings, primary body */
  --rd-text-secondary:   #475569;   /* slate-600 — body */
  --rd-text-muted:       #64748b;   /* slate-500 — labels, meta */
  --rd-text-subtle:      #94a3b8;   /* slate-400 — placeholders, timestamps */
  --rd-text-on-accent:   #ffffff;   /* on orange / dark surfaces */
  --rd-text-on-dark:     #f1f5f9;
  --rd-text-link:        #FF6B35;
  --rd-text-link-hover:  #e0651e;

  /* ─── Borders ────────────────────────────────────────────── */
  --rd-border-default:   #e2e8f0;
  --rd-border-strong:    #cbd5e1;
  --rd-border-subtle:    #f1f5f9;
  --rd-border-accent:    #FF6B35;
  --rd-border-focus:     #FF6B35;

  /* ─── Brand accent (revolv orange) ──────────────────────── */
  --rd-accent:           #FF6B35;
  --rd-accent-hover:     #e0651e;
  --rd-accent-active:    #c2541a;
  --rd-accent-soft:      #fff5e6;   /* light tint for accent-bg pills */
  --rd-accent-subtle:    #fde2c4;   /* border on accent surfaces */
  --rd-accent-deep:      #9a3412;   /* dark accent for text on light accent bg */

  /* ─── Status / semantic ─────────────────────────────────── */
  --rd-success:          #15803d;
  --rd-success-soft:     #dcfce7;
  --rd-success-border:   #86efac;
  --rd-warning:          #b45309;
  --rd-warning-soft:     #fef3c7;
  --rd-warning-border:   #fcd34d;
  --rd-danger:           #b91c1c;
  --rd-danger-soft:      #fee2e2;
  --rd-danger-border:    #fca5a5;
  --rd-info:             #1d4ed8;
  --rd-info-soft:        #dbeafe;
  --rd-info-border:      #93c5fd;

  /* ─── Predictive heat scale (lead score) ─────────────────
   * BoomTown signature. Apply via background or border on score chip.
   * Reserved exclusively for score visualization — do not reuse for
   * unrelated UI. */
  --rd-heat-cold:        #94a3b8;   /* ≤ 25 */
  --rd-heat-cool:        #38bdf8;   /* 26–49 */
  --rd-heat-warm:        #f59e0b;   /* 50–69 */
  --rd-heat-hot:         #ea580c;   /* 70–89 */
  --rd-heat-fire:        #dc2626;   /* ≥ 90 */
  --rd-heat-cold-soft:   #f1f5f9;
  --rd-heat-cool-soft:   #e0f2fe;
  --rd-heat-warm-soft:   #fef3c7;
  --rd-heat-hot-soft:    #fff5e6;
  --rd-heat-fire-soft:   #fee2e2;

  /* ─── Spacing scale (4px base) ──────────────────────────── */
  --rd-space-0:    0;
  --rd-space-1:    4px;
  --rd-space-2:    8px;
  --rd-space-3:   12px;
  --rd-space-4:   16px;
  --rd-space-5:   20px;
  --rd-space-6:   24px;
  --rd-space-8:   32px;
  --rd-space-10:  40px;
  --rd-space-12:  48px;
  --rd-space-16:  64px;
  --rd-space-20:  80px;
  --rd-space-24:  96px;

  /* ─── Typography ────────────────────────────────────────── */
  --rd-font-sans:        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --rd-font-mono:        ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;

  --rd-text-xs:          11px;
  --rd-text-sm:          13px;
  --rd-text-base:        14px;     /* body default */
  --rd-text-md:          16px;
  --rd-text-lg:          18px;
  --rd-text-xl:          22px;
  --rd-text-2xl:         28px;
  --rd-text-3xl:         34px;
  --rd-text-4xl:         42px;

  --rd-leading-tight:    1.2;
  --rd-leading-snug:     1.35;
  --rd-leading-normal:   1.5;
  --rd-leading-relaxed:  1.625;
  --rd-leading-loose:    1.75;

  --rd-font-normal:      400;
  --rd-font-medium:      500;
  --rd-font-semibold:    600;
  --rd-font-bold:        700;
  --rd-font-extrabold:   800;

  --rd-letter-tight:     -0.01em;
  --rd-letter-normal:    0;
  --rd-letter-wide:      0.025em;
  --rd-letter-eyebrow:   0.08em;    /* uppercase label kerning */

  /* ─── Border radius ─────────────────────────────────────── */
  --rd-radius-xs:        4px;
  --rd-radius-sm:        6px;
  --rd-radius-md:        8px;
  --rd-radius-lg:        12px;
  --rd-radius-xl:        16px;
  --rd-radius-2xl:       20px;
  --rd-radius-pill:      999px;
  --rd-radius-circle:    50%;

  /* ─── Elevation (shadows) ───────────────────────────────── */
  --rd-shadow-none:      none;
  --rd-shadow-xs:        0 1px 2px rgba(15, 23, 42, 0.04);
  --rd-shadow-sm:        0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --rd-shadow-md:        0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04);
  --rd-shadow-lg:        0 12px 32px rgba(15, 23, 42, 0.10), 0 4px 8px rgba(15, 23, 42, 0.06);
  --rd-shadow-xl:        0 24px 56px rgba(15, 23, 42, 0.14), 0 8px 16px rgba(15, 23, 42, 0.08);
  --rd-shadow-focus:     0 0 0 3px rgba(255, 107, 53, 0.18);
  --rd-shadow-focus-danger: 0 0 0 3px rgba(185, 28, 28, 0.20);

  /* ─── Z-index scale ─────────────────────────────────────── */
  --rd-z-base:           1;
  --rd-z-raised:         10;
  --rd-z-dropdown:       100;
  --rd-z-sticky:         200;
  --rd-z-overlay:        800;
  --rd-z-modal-backdrop: 900;
  --rd-z-modal:          1000;
  --rd-z-popover:        1100;
  --rd-z-tooltip:        1200;
  --rd-z-toast:          1300;

  /* ─── Transition timing ─────────────────────────────────── */
  --rd-ease-snap:        cubic-bezier(0.4, 0, 0.2, 1);
  --rd-ease-out:         cubic-bezier(0.0, 0, 0.2, 1);
  --rd-ease-in:          cubic-bezier(0.4, 0, 1, 1);
  --rd-dur-fast:         120ms;
  --rd-dur-base:         200ms;
  --rd-dur-slow:         320ms;
  --rd-trans-default:    var(--rd-dur-base) var(--rd-ease-snap);

  /* ─── Layout primitives ─────────────────────────────────── */
  --rd-container-narrow: 720px;
  --rd-container-base:   960px;
  --rd-container-wide:   1200px;
  --rd-container-full:   1440px;
  --rd-sidebar-w:        240px;
  --rd-sidebar-w-collapsed: 64px;
  --rd-topbar-h:         64px;

  /* ─── Focus ring (keyboard-only by default) ─────────────── */
  --rd-focus-outline:    2px solid var(--rd-accent);
  --rd-focus-offset:     2px;
}

/* =============================================================
 * Utility classes (opt-in — components apply these directly)
 * ============================================================= */

/* Card primitive — base white surface */
.rd-card {
  background: var(--rd-bg-surface);
  border: 1px solid var(--rd-border-default);
  border-radius: var(--rd-radius-lg);
  padding: var(--rd-space-5);
}
.rd-card--raised { box-shadow: var(--rd-shadow-md); }
.rd-card--floating { box-shadow: var(--rd-shadow-lg); }
.rd-card--accent { border-color: var(--rd-accent-subtle); background: linear-gradient(135deg, var(--rd-bg-surface) 0%, var(--rd-accent-soft) 100%); }

/* Pills + chips */
.rd-pill {
  display: inline-flex; align-items: center; gap: var(--rd-space-1);
  padding: var(--rd-space-1) var(--rd-space-3);
  font-size: var(--rd-text-xs); font-weight: var(--rd-font-bold);
  text-transform: uppercase; letter-spacing: var(--rd-letter-eyebrow);
  border-radius: var(--rd-radius-pill); line-height: 1;
  background: var(--rd-bg-subtle); color: var(--rd-text-secondary);
}
.rd-pill--accent  { background: var(--rd-accent-soft);  color: var(--rd-accent-deep); }
.rd-pill--success { background: var(--rd-success-soft); color: var(--rd-success); }
.rd-pill--warning { background: var(--rd-warning-soft); color: var(--rd-warning); }
.rd-pill--danger  { background: var(--rd-danger-soft);  color: var(--rd-danger); }
.rd-pill--info    { background: var(--rd-info-soft);    color: var(--rd-info); }

/* Heat indicator chip — for predictive lead score (Phase 4) */
.rd-heat { display: inline-flex; align-items: center; gap: var(--rd-space-1); padding: 3px 9px; font-size: var(--rd-text-xs); font-weight: var(--rd-font-bold); border-radius: var(--rd-radius-pill); line-height: 1; }
.rd-heat--cold  { background: var(--rd-heat-cold-soft);  color: var(--rd-heat-cold); }
.rd-heat--cool  { background: var(--rd-heat-cool-soft);  color: var(--rd-heat-cool); }
.rd-heat--warm  { background: var(--rd-heat-warm-soft);  color: var(--rd-heat-warm); }
.rd-heat--hot   { background: var(--rd-heat-hot-soft);   color: var(--rd-heat-hot); }
.rd-heat--fire  { background: var(--rd-heat-fire-soft);  color: var(--rd-heat-fire); }

/* Eyebrow label (uppercase mini-heading) */
.rd-eyebrow { font-size: var(--rd-text-xs); font-weight: var(--rd-font-extrabold); text-transform: uppercase; letter-spacing: var(--rd-letter-eyebrow); color: var(--rd-text-muted); }

/* Truncation helper */
.rd-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Numeric (tabular figures) — use for prices, scores, dates */
.rd-numeric { font-variant-numeric: tabular-nums; }

/* Visually hidden (a11y) */
.rd-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Stack + cluster spacing */
.rd-stack-1 > * + * { margin-top: var(--rd-space-1); }
.rd-stack-2 > * + * { margin-top: var(--rd-space-2); }
.rd-stack-3 > * + * { margin-top: var(--rd-space-3); }
.rd-stack-4 > * + * { margin-top: var(--rd-space-4); }
.rd-stack-6 > * + * { margin-top: var(--rd-space-6); }
.rd-stack-8 > * + * { margin-top: var(--rd-space-8); }
.rd-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rd-space-2); }
.rd-cluster--3 { gap: var(--rd-space-3); }
.rd-cluster--4 { gap: var(--rd-space-4); }

/* Divider */
.rd-divider { height: 1px; background: var(--rd-border-default); margin: var(--rd-space-4) 0; border: 0; }

/* Focus ring for interactive elements */
.rd-focusable:focus-visible {
  outline: var(--rd-focus-outline);
  outline-offset: var(--rd-focus-offset);
  border-radius: var(--rd-radius-sm);
}

/* Subtle fade-in for content that hot-loads */
@keyframes rd-fade-in { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }
.rd-fade-in { animation: rd-fade-in var(--rd-dur-base) var(--rd-ease-out); }

/* Prefers-reduced-motion respect */
@media (prefers-reduced-motion: reduce) {
  .rd-fade-in { animation: none; }
}