/* ============================================
   DESIGN TOKENS — Apartment & Building Management System
   ============================================ */

:root {
  /* Brand */
  --primary: #1E3A8A;
  --primary-dark: #152a63;
  --primary-light: #3B5BC4;
  --primary-tint: #EEF2FF;
  --secondary: #F59E0B;
  --secondary-dark: #B45309;
  --secondary-tint: #FFFBEB;

  /* Surfaces */
  --bg: #F8FAFC;
  --surface: #FFFFFF;
  --surface-alt: #F1F5F9;

  /* Text */
  --text: #1E293B;
  --text-muted: #64748B;
  --text-faint: #94A3B8;
  --on-primary: #FFFFFF;

  /* Borders */
  --border: #E2E8F0;
  --border-strong: #CBD5E1;

  /* Status */
  --success: #10B981;
  --success-bg: #ECFDF5;
  --pending: #F59E0B;
  --pending-bg: #FFFBEB;
  --overdue: #EF4444;
  --overdue-bg: #FEF2F2;

  /* Sidebar (dashboards) */
  --sidebar-bg: #17296E;
  --sidebar-bg-2: #1E3A8A;
  --sidebar-text: #B9C3EE;
  --sidebar-text-active: #FFFFFF;
  --sidebar-active-bg: rgba(245, 158, 11, 0.16);
  --sidebar-border: rgba(255, 255, 255, 0.08);

  /* Radii */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-full: 999px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 20px 48px rgba(15, 23, 42, 0.16);

  /* Type */
  --font-display: 'Lexend', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --fast: 150ms;
  --med: 240ms;
}

[data-theme="dark"] {
  --bg: #0A0F1E;
  --surface: #10182B;
  --surface-alt: #151F38;

  --text: #E7ECF7;
  --text-muted: #9AA7C7;
  --text-faint: #6B7899;

  --border: #223055;
  --border-strong: #2E3E6B;

  --primary: #4C6EF5;
  --primary-dark: #3654D6;
  --primary-light: #7C93F7;
  --primary-tint: #16204A;

  --secondary: #F5A623;
  --secondary-tint: #2A2010;

  --success: #34D399;
  --success-bg: rgba(52, 211, 153, 0.12);
  --pending: #FBBF24;
  --pending-bg: rgba(251, 191, 36, 0.12);
  --overdue: #F87171;
  --overdue-bg: rgba(248, 113, 113, 0.12);

  --sidebar-bg: #060A16;
  --sidebar-bg-2: #0A1024;
  --sidebar-text: #8291BB;
  --sidebar-text-active: #FFFFFF;
  --sidebar-active-bg: rgba(245, 166, 35, 0.14);
  --sidebar-border: rgba(255, 255, 255, 0.06);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 24px 56px rgba(0, 0, 0, 0.55);
}