/* RentConnect Design System v1.1.0 — Premium refresh: refined neutrals, softer
   tinted elevation, warmer surface, consistent hover-state tokens. Builds on
   the existing Modern Slate & Emerald palette — no token names removed or
   renamed, so every child plugin that already references these tokens picks
   up the refresh automatically with no changes on their end. */

:root {
  /* Color Palette Tokens */
  --rc-primary: #0f172a;        /* Slate 900 - Dark executive headers & primary actions (unchanged) */
  --rc-primary-hover: #1e293b;  /* NEW: was hardcoded inline in .rc-btn-primary:hover — now a token so any component can use the same consistent hover shade */
  --rc-secondary: #059669;      /* Emerald 600 - Fresh rental trust & success accents (unchanged) */
  --rc-secondary-hover: #047857;/* NEW: was hardcoded inline in .rc-btn-secondary:hover — now a token */
  --rc-accent: #2563eb;         /* Royal Blue 600 - Interactive links & focus outlines (unchanged) */
  --rc-accent-hover: #1d4ed8;   /* NEW: consistent hover shade for accent-colored elements */
  --rc-surface: #ffffff;        /* Pure White surface card backgrounds (unchanged) */
  --rc-background: #faf9f7;     /* CHANGED: was flat Slate 50 (#f8fafc, cool-toned); shifted to a subtle warm off-white — a small, deliberate shift that reads noticeably more "boutique/premium" than a cool-gray canvas without looking out of place next to existing surfaces */
  --rc-text-main: #1e293b;      /* Slate 800 high contrast body text (unchanged) */
  --rc-text-muted: #64748b;     /* Slate 500 secondary label text (unchanged) */
  --rc-border: #e2e8f0;         /* Slate 200 crisp borders (unchanged) */
  --rc-border-hover: #cbd5e1;   /* Slate 300 interactive border hover (unchanged) */

  /* UI Tokens */
  --rc-radius: 10px;            /* CHANGED: was 8px — slightly softer, more contemporary without becoming rounded/playful */
  --rc-radius-sm: 6px;          /* CHANGED: was 4px */
  --rc-radius-lg: 16px;         /* CHANGED: was 12px */
  --rc-radius-xl: 24px;         /* NEW: for large feature cards / hero imagery */

  /* Typography Tokens */
  --rc-font-body: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --rc-font-heading: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* NEW: Type scale tokens. These are additive infrastructure — nothing in
     any plugin currently references var(--rc-text-*), since font-sizes are
     hardcoded per-component throughout Listings and elsewhere. Adding these
     here does NOT change any rendered size by itself; components need to be
     migrated to consume them individually (tracked as a follow-up). */
  --rc-text-xs: 0.75rem;    /* 12px */
  --rc-text-sm: 0.875rem;   /* 14px */
  --rc-text-base: 1rem;     /* 16px */
  --rc-text-lg: 1.125rem;   /* 18px */
  --rc-text-xl: 1.25rem;    /* 20px */
  --rc-text-2xl: 1.5rem;    /* 24px */
  --rc-text-3xl: 1.875rem;  /* 30px */

  /* NEW: Spacing scale tokens. Same caveat as above — additive, not yet
     consumed anywhere, since spacing is hardcoded per-component today. */
  --rc-space-1: 0.25rem;  /* 4px */
  --rc-space-2: 0.5rem;   /* 8px */
  --rc-space-3: 0.75rem;  /* 12px */
  --rc-space-4: 1rem;     /* 16px */
  --rc-space-5: 1.5rem;   /* 24px */
  --rc-space-6: 2rem;     /* 32px */
  --rc-space-8: 3rem;     /* 48px */

  /* Elevation Shadows — CHANGED: softer, more diffused, and tinted toward
     --rc-primary's hue rather than flat black, which is what most reliably
     reads as "premium" elevation versus a harsher default drop-shadow.
     Values increase blur/spread while lowering opacity relative to the
     original scale. */
  --rc-shadow-sm: 0 1px 3px 0 rgba(15, 23, 42, 0.06), 0 1px 2px -1px rgba(15, 23, 42, 0.04);
  --rc-shadow-md: 0 6px 10px -2px rgba(15, 23, 42, 0.08), 0 3px 6px -3px rgba(15, 23, 42, 0.06);
  --rc-shadow-lg: 0 16px 24px -6px rgba(15, 23, 42, 0.12), 0 6px 10px -6px rgba(15, 23, 42, 0.08);
  --rc-shadow-xl: 0 24px 40px -8px rgba(15, 23, 42, 0.18), 0 10px 20px -8px rgba(15, 23, 42, 0.1); /* NEW: for modals, hero cards, and other high-elevation surfaces */
}

/* Base Design System Resets & Utilities */
.rc-ds-scope {
  font-family: var(--rc-font-body);
  color: var(--rc-text-main);
  background-color: var(--rc-background);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.rc-heading {
  font-family: var(--rc-font-heading);
  color: var(--rc-primary);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Common Reusable UI Components */
.rc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: var(--rc-radius);
  transition: all 0.15s ease-in-out;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
}

.rc-btn-primary {
  background-color: var(--rc-primary);
  color: #ffffff;
}

.rc-btn-primary:hover {
  background-color: var(--rc-primary-hover);
  box-shadow: var(--rc-shadow-sm);
}

.rc-btn-secondary {
  background-color: var(--rc-secondary);
  color: #ffffff;
}

.rc-btn-secondary:hover {
  background-color: var(--rc-secondary-hover);
}

.rc-btn-outline {
  background-color: transparent;
  border-color: var(--rc-border);
  color: var(--rc-text-main);
}

.rc-btn-outline:hover {
  background-color: #f1f5f9;
  border-color: var(--rc-border-hover);
}

.rc-card {
  background-color: var(--rc-surface);
  border: 1px solid var(--rc-border);
  border-radius: var(--rc-radius);
  padding: 1.5rem;
  box-shadow: var(--rc-shadow-sm);
  transition: box-shadow 0.2s ease-in-out; /* NEW: smooths any hover-shadow change consuming components add */
}

.rc-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: var(--rc-radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.rc-badge-primary {
  background-color: #f1f5f9;
  color: var(--rc-primary);
}

.rc-badge-tenant {
  background-color: #eff6ff;
  color: var(--rc-accent);
}

.rc-badge-landlord {
  background-color: #ecfdf5;
  color: var(--rc-secondary);
}