/*
 * Sitewide design tokens (fonts, colors, shadows, radii).
 * Loaded early in both the admin layout (userHome.php) and the POS screen
 * (sale/POS/main_screen.php) so both share one source of truth without a
 * build step. Keep this file dependency-free (no @import, no framework refs).
 */
:root {
  /* Font */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Neutrals (gray scale) */
  --gray-50: #F9FAFB;
  --gray-100: #F3F4F6;
  --gray-200: #E5E7EB;
  --gray-300: #D1D5DB;
  --gray-400: #9CA3AF;
  --gray-500: #6B7280;
  --gray-600: #4B5563;
  --gray-700: #374151;
  --gray-800: #1F2937;
  --gray-900: #111827;

  /* Top bar (dark slate/graphite) */
  --topbar-bg: #1E1E2A;
  --topbar-bg-alt: #242434;
  --topbar-border: #2E2E40;
  --topbar-text: #E4E4EB;
  --topbar-text-muted: #9A9AB0;

  /* Accent (indigo-blue) */
  --accent: #4F46E5;
  --accent-hover: #4338CA;
  --accent-active: #3730A3;
  --accent-tint: #EEF2FF;
  --accent-ring: rgba(79, 70, 229, 0.15);

  /* Semantic */
  --success: #16A34A;
  --warning: #D97706;
  --danger: #DC2626;
  --info: #0EA5E9;

  /* Surfaces */
  --card-bg: #FFFFFF;
  --card-border: var(--gray-200);
  --card-radius: 8px;
  --card-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
  --card-shadow-hover: 0 2px 4px rgba(16, 24, 40, 0.06), 0 4px 12px rgba(16, 24, 40, 0.08);

  /* Inputs */
  --input-border: var(--gray-300);
  --input-radius: 6px;
  --input-height: 42px;

  /* Buttons */
  --btn-radius: 6px;
}