/* ChillBills Design System — Color Tokens
   Source of truth: chillBillsApp @ develop — src/theme/colors.ts,
   themeColors.ts, tokens.ts (light mode only; dark mode noted but
   not built out as a parallel token set here). */
:root {
  /* Base palette */
  --cb-blue: #10B8F2;          /* Primary brand — Bright Blue */
  --cb-blue-pressed: #0E9BD8;  /* Pressed / active state */
  --cb-blue-light: #E6F7FE;    /* Light tint — selected backgrounds */
  --cb-coral: #F43F5E;         /* Secondary brand accent — Coral/Rose */

  --cb-success: #10B981;
  --cb-success-light: #D1FAE5;
  --cb-warning: #F59E0B;
  --cb-warning-light: #FEF3C7;
  --cb-error: #EF4444;
  --cb-error-light: #FEE2E2;

  --cb-white: #FFFFFF;
  --cb-gray-50: #F9FAFB;
  --cb-gray-100: #F3F4F6;
  --cb-gray-200: #E5E7EB;
  --cb-gray-300: #D1D5DB;
  --cb-gray-400: #9CA3AF;
  --cb-gray-500: #6B7280;
  --cb-gray-600: #4B5563;
  --cb-gray-700: #374151;
  --cb-gray-800: #1F2937;
  --cb-gray-900: #111827;

  /* Semantic aliases — use these in components/screens */
  --surface-app: #F5F7FA;         /* Main app background */
  --surface-app-secondary: #F9FAFB;
  --surface-card: #FFFFFF;        /* Cards, surfaces, elevated modals */
  --surface-elevated: #FFFFFF;

  --text-primary: var(--cb-gray-800);
  --text-secondary: var(--cb-gray-500);
  --text-tertiary: var(--cb-gray-400);
  --text-inverse: #FFFFFF;
  --text-link: var(--cb-blue);

  --border-primary: var(--cb-gray-200);
  --border-secondary: var(--cb-gray-100);
  --border-focus: var(--cb-blue);

  --card-bg: #FFFFFF;
  --card-border: var(--cb-gray-200);
  --card-shadow: rgba(0, 0, 0, 0.06);

  --input-bg: #FFFFFF;
  --input-bg-disabled: var(--cb-gray-50);
  --input-border: var(--cb-gray-200);
  --input-border-focus: var(--cb-blue);
  --input-placeholder: var(--cb-gray-400);

  --btn-primary-bg: var(--cb-blue);
  --btn-primary-bg-pressed: var(--cb-blue-pressed);
  --btn-secondary-bg: var(--cb-gray-100);
  --btn-secondary-bg-pressed: var(--cb-gray-200);
  --btn-disabled-bg: var(--cb-gray-200);
}