/**
 * SmartTenant design tokens — rent management visual system
 * Trust navy brand + cool neutrals + clear financial status colors.
 * Typography: Inter with tabular figures for amounts/dates.
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* Brand — Kuetu accent */
  --st-brand-rgb: 68, 77, 219;
  --st-brand: #444DDB;
  --st-brand-hover: #353cbc;
  --st-brand-light: rgba(68, 77, 219, 0.12);
  --st-brand-dark: #2c33a8;

  /* Accent secondaire (CTA secondaires / liens doux) */
  --st-accent: #444DDB;
  --st-accent-rgb: 68, 77, 219;

  /* États métier */
  --st-success: #059669; /* payé, libre, actif */
  --st-success-light: rgba(5, 150, 105, 0.12);
  --st-warning: #d97706; /* échéance proche */
  --st-warning-light: rgba(217, 119, 6, 0.14);
  --st-danger: #dc2626; /* impayé, retard */
  --st-danger-light: rgba(220, 38, 38, 0.12);
  --st-info: #0284c8; /* visite, pipeline */
  --st-info-light: rgba(2, 132, 200, 0.12);
  --st-coral: #e11d48;

  /* Neutrals — soft fin surfaces */
  --st-text: #1a2332;
  --st-text-secondary: #64748b;
  --st-muted: #64748b;
  --st-surface: #ffffff;
  --st-bg: #f4f7fb;
  --st-bg-secondary: #eef2f6;
  --st-border: #e2e8f0;
  --st-border-subtle: #edf1f5;
  --st-hover: rgba(68, 77, 219, 0.08);

  /* Legacy aliases */
  --st-x-gray-1: var(--st-brand);
  --st-x-gray-2: var(--st-brand);
  --st-x-gray-3: var(--st-brand);

  /* Elevation — soft brand-tinted shadows */
  --st-shadow: 0 4px 24px rgba(44, 51, 168, 0.08);
  --st-shadow-sm: 0 2px 10px rgba(44, 51, 168, 0.06);
  --st-shadow-lg: 0 20px 60px rgba(44, 51, 168, 0.14);

  /* Radius */
  --st-radius-sm: 8px;
  --st-radius-md: 12px;
  --st-radius-lg: 16px;
  --st-radius-pill: 9999px;
  --st-radius-input: 8px;
  --st-radius-btn: 10px;

  /* Typography — Inter, densités dashboard */
  --st-font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --st-font-mono: "Inter", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --st-text-xs: 11px;
  --st-text-sm: 13px;
  --st-text-base: 15px;
  --st-text-md: 15px;
  --st-text-lg: 17px;
  --st-text-xl: 20px;
  --st-text-2xl: 23px;
  --st-leading-tight: 1.15;
  --st-leading-snug: 1.25;
  --st-leading-body: 1.45;
  --st-weight-regular: 400;
  --st-weight-medium: 500;
  --st-weight-bold: 700;
  --st-weight-heavy: 800;

  --st-space-xs: 4px;
  --st-space-sm: 8px;
  --st-space-md: 12px;
  --st-space-lg: 16px;
  --st-space-xl: 20px;
  --st-space-2xl: 32px;
}

/* Dim — slate dark */
[data-pc-theme="dark"] {
  --st-surface: #1e293b;
  --st-bg: #0f172a;
  --st-bg-secondary: #1e293b;
  --st-border: #334155;
  --st-border-subtle: #334155;
  --st-hover: rgba(47, 111, 237, 0.15);
  --st-text: #e2e8f0;
  --st-text-secondary: #94a3b8;
  --st-muted: #94a3b8;
  --st-brand: #3b82f6;
  --st-brand-hover: #60a5fa;
  --st-brand-light: rgba(59, 130, 246, 0.18);
  --st-brand-rgb: 59, 130, 246;
  --st-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
  --st-shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.28);
  --st-x-gray-1: var(--st-brand);
  --st-x-gray-2: var(--st-brand);
  --st-x-gray-3: var(--st-brand);
}

/* Lights out */
[data-pc-theme="lights-out"] {
  --st-surface: #16181c;
  --st-bg: #000000;
  --st-bg-secondary: #0a0a0a;
  --st-border: #2f3336;
  --st-border-subtle: #2f3336;
  --st-hover: #080808;
  --st-text: #e7e9ea;
  --st-text-secondary: #71767b;
  --st-muted: #71767b;
  --st-brand: #3b82f6;
  --st-brand-hover: #60a5fa;
  --st-brand-light: rgba(59, 130, 246, 0.18);
  --st-brand-rgb: 59, 130, 246;
  --st-x-gray-1: var(--st-brand);
  --st-x-gray-2: var(--st-brand);
  --st-x-gray-3: var(--st-brand);
}

/* Unit / occupancy badges */
.badge-unit-available {
  background: var(--st-info);
  color: #fff;
}
.badge-unit-occupied {
  background: var(--st-brand);
  color: #fff;
}
.badge-unit-visit {
  background: var(--st-warning);
  color: #fff;
}

/* Payment / lease status */
.badge-status-paid,
.badge-status-active {
  background: var(--st-success-light);
  color: var(--st-success);
}
.badge-status-due,
.badge-status-pending {
  background: var(--st-warning-light);
  color: var(--st-warning);
}
.badge-status-overdue,
.badge-status-late {
  background: var(--st-danger-light);
  color: var(--st-danger);
}
.badge-status-info {
  background: var(--st-info-light);
  color: var(--st-info);
}

/* Amounts & dates: aligned columns */
.st-amount,
.st-money,
.table .amount,
.table td.numeric,
.price-format {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-weight: var(--st-weight-bold);
}

body {
  font-variant-numeric: tabular-nums;
}