/**
 * =========================================================
 * INRTAX BRAND COLOR SYSTEM
 * =========================================================
 * Use these CSS variables throughout the project for
 * consistent branding and easy theme updates.
 */

:root {
  /* === PRIMARY COLORS === */
  --color-primary-dark: #0f172a;        /* slate-900 */
  --color-primary-navy: #1e3a8a;        /* blue-900 */
  --color-primary-blue: #1e40af;        /* blue-800 */
  
  /* === ACCENT COLORS === */
  --color-accent: #f59e0b;              /* amber-500 - Main CTA */
  --color-accent-hover: #d97706;        /* amber-600 */
  --color-accent-dark: #b45309;         /* amber-700 */
  --color-accent-light: #fbbf24;        /* amber-400 */
  
  /* === TRUST & SUCCESS === */
  --color-success: #10b981;             /* emerald-600 */
  --color-trust: #10b981;               /* emerald-600 */
  
  /* === NEUTRAL BACKGROUNDS === */
  --color-bg-light: #f8fafc;            /* slate-50 */
  --color-bg-blue-tint: #eff6ff;        /* blue-50 */
  --color-bg-white: #ffffff;
  
  /* === TEXT COLORS === */
  --color-text-primary: #334155;        /* slate-700 */
  --color-text-secondary: #64748b;      /* slate-500 */
  --color-text-light: #94a3b8;          /* slate-400 */
  --color-text-white: #ffffff;
  
  /* === BORDERS === */
  --color-border-light: #e2e8f0;        /* slate-200 */
  --color-border-subtle: #cbd5e1;       /* slate-300 */
  
  /* === SHADOWS === */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
  --shadow-xl: 0 20px 25px rgba(0,0,0,0.1);
  --shadow-2xl: 0 25px 50px rgba(0,0,0,0.25);
  
  /* === GRADIENTS === */
  --gradient-primary: linear-gradient(to right, #0f172a, #1e3a8a, #0f172a);
  --gradient-accent: linear-gradient(to right, #f59e0b, #d97706);
  --gradient-accent-hover: linear-gradient(to right, #d97706, #b45309);
}