@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Light Theme */
  --bg-primary: #FFFFFF;
  --bg-secondary: #F3F4F6;
  --bg-tertiary: #F9FAFB;
  --bg-sidebar: #FFFFFF;
  --bg-card: #FFFFFF;
  --bg-input: #FFFFFF;
  --bg-nav-active: #EFF6FF;
  --bg-danger: #FEF2F2;

  --text-primary: #111827;
  --text-secondary: #6B7280;
  --text-muted: #9CA3AF;
  --text-accent: #3B82F6;
  --text-danger: #EF4444;
  --text-danger-dark: #991B1B;

  --border-primary: #E5E7EB;
  --border-input: #D1D5DB;
  --border-accent: #3B82F6;
  --border-danger: #FECACA;

  --status-active-bg: #DCFCE7;
  --status-active-text: #166534;
  --status-active-dot: #22C55E;
  --status-inactive-bg: #FEE2E2;
  --status-inactive-text: #991B1B;
  --status-inactive-dot: #EF4444;
  --status-pending-bg: #FEF3C7;
  --status-pending-text: #92400E;
  --status-pending-dot: #F59E0B;
  --status-recognized-bg: #DCFCE7;
  --status-recognized-text: #166534;
  --status-recognized-dot: #22C55E;
  --status-unrecognized-bg: #F3F4F6;
  --status-unrecognized-text: #6B7280;
  --status-unrecognized-dot: #9CA3AF;
  --status-processing-bg: #DBEAFE;
  --status-processing-text: #1E40AF;
  --status-processing-dot: #3B82F6;
  --status-confirmed-bg: #DCFCE7;
  --status-confirmed-text: #166534;
  --status-confirmed-dot: #22C55E;
  --status-failed-bg: #FEE2E2;
  --status-failed-text: #991B1B;
  --status-failed-dot: #EF4444;

  --shadow-card: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  --shadow-login: 0px 20px 25px -5px rgba(229, 231, 235, 0.5), 0px 8px 10px -6px rgba(229, 231, 235, 0.5);
  --shadow-toast: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.1);

  /* Typography */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Spacing */
  --sidebar-width: 240px;
  --header-height: 64px;

  --bg-avatar: #E5E7EB;
  --bg-accent-subtle: #EFF6FF;

  /* Border radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
}

[data-theme="dark"] {
  --bg-primary: #111827;
  --bg-secondary: #0F172A;
  --bg-tertiary: rgba(30, 41, 59, 0.5);
  --bg-sidebar: #111827;
  --bg-card: #1E293B;
  --bg-input: #1E293B;
  --bg-nav-active: #1E293B;
  --bg-danger: rgba(127, 29, 29, 0.15);

  --text-primary: #F8FAFC;
  --text-secondary: #94A3B8;
  --text-muted: #64748B;
  --text-accent: #3B82F6;
  --text-danger: #F87171;
  --text-danger-dark: #FCA5A5;

  --border-primary: #334155;
  --border-input: #334155;
  --border-accent: #3B82F6;
  --border-danger: rgba(153, 27, 27, 0.5);

  --status-active-bg: rgba(20, 83, 45, 0.3);
  --status-active-text: #4ADE80;
  --status-active-dot: #22C55E;
  --status-inactive-bg: rgba(127, 29, 29, 0.3);
  --status-inactive-text: #F87171;
  --status-inactive-dot: #EF4444;
  --status-pending-bg: rgba(120, 53, 15, 0.3);
  --status-pending-text: #FCD34D;
  --status-pending-dot: #F59E0B;
  --status-recognized-bg: rgba(20, 83, 45, 0.3);
  --status-recognized-text: #4ADE80;
  --status-recognized-dot: #22C55E;
  --status-unrecognized-bg: rgba(51, 65, 85, 0.5);
  --status-unrecognized-text: #94A3B8;
  --status-unrecognized-dot: #64748B;
  --status-processing-bg: rgba(30, 64, 175, 0.3);
  --status-processing-text: #93C5FD;
  --status-processing-dot: #3B82F6;
  --status-confirmed-bg: rgba(20, 83, 45, 0.3);
  --status-confirmed-text: #4ADE80;
  --status-confirmed-dot: #22C55E;
  --status-failed-bg: rgba(127, 29, 29, 0.3);
  --status-failed-text: #F87171;
  --status-failed-dot: #EF4444;

  --bg-avatar: #334155;
  --bg-accent-subtle: rgba(59, 130, 246, 0.15);

  --shadow-card: 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
  --shadow-login: 0px 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-toast: 0px 25px 50px -12px rgba(0, 0, 0, 0.25);
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family);
  background: var(--bg-secondary);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}