/* RentConnect Design System v1.0.0 — Modern Slate & Emerald palette with System UI and Inter font stack */

:root {
  /* Color Palette Tokens */
  --rc-primary: #0f172a;        /* Slate 900 - Dark executive headers & primary actions */
  --rc-secondary: #059669;      /* Emerald 600 - Fresh rental trust & success accents */
  --rc-accent: #2563eb;         /* Royal Blue 600 - Interactive links & focus outlines */
  --rc-surface: #ffffff;        /* Pure White surface card backgrounds */
  --rc-background: #f8fafc;     /* Slate 50 subtle background canvas */
  --rc-text-main: #1e293b;      /* Slate 800 high contrast body text */
  --rc-text-muted: #64748b;     /* Slate 500 secondary label text */
  --rc-border: #e2e8f0;         /* Slate 200 crisp borders */
  --rc-border-hover: #cbd5e1;   /* Slate 300 interactive border hover */

  /* UI Tokens */
  --rc-radius: 8px;             /* Standard border radius across components */
  --rc-radius-sm: 4px;          /* Small elements like badges & pills */
  --rc-radius-lg: 12px;         /* Modals & feature cards */

  /* 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;
  
  /* Elevation Shadows */
  --rc-shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
  --rc-shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
  --rc-shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.1), 0 4px 6px -4px rgba(15, 23, 42, 0.05);
}

/* 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: #1e293b;
  box-shadow: var(--rc-shadow-sm);
}

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

.rc-btn-secondary:hover {
  background-color: #047857;
}

.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);
}

.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);
}