/**
 * CNCA Custom CSS Variables
 * Brand colors and design tokens
 */

:root {
  /* Brand Colors (from existing design and logo) */
  --cnca-gray: #e1e1e1;           /* Header/Footer background */
  --cnca-primary: #2563eb;         /* Primary action color (Bootstrap blue) */
  --cnca-primary-dark: #1d4ed8;    /* Primary hover state */
  --cnca-secondary: #64748b;       /* Secondary elements */
  --cnca-success: #22c55e;         /* Success messages */
  --cnca-warning: #f59e0b;         /* Warning messages */
  --cnca-danger: #ef4444;          /* Error messages */
  --cnca-info: #3b82f6;            /* Info messages */
  
  /* Neutral Colors */
  --cnca-white: #ffffff;
  --cnca-black: #000000;
  --cnca-text: #1f2937;            /* Main text color */
  --cnca-text-muted: #6b7280;      /* Secondary text color */
  
  /* Spacing Scale (4px base unit) */
  --spacing-xs: 0.25rem;   /* 4px */
  --spacing-sm: 0.5rem;    /* 8px */
  --spacing-md: 1rem;      /* 16px */
  --spacing-lg: 1.5rem;    /* 24px */
  --spacing-xl: 2rem;      /* 32px */
  --spacing-2xl: 3rem;     /* 48px */
  --spacing-3xl: 4rem;     /* 64px */
  
  /* Typography */
  --font-family-base: system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-family-mono: 'Fira Code', 'Courier New', monospace;
  --font-size-xs: 0.75rem;   /* 12px */
  --font-size-sm: 0.875rem;  /* 14px */
  --font-size-base: 1rem;    /* 16px */
  --font-size-lg: 1.125rem;  /* 18px */
  --font-size-xl: 1.25rem;   /* 20px */
  --font-size-2xl: 1.5rem;   /* 24px */
  --font-size-3xl: 2rem;     /* 32px */
  --line-height-tight: 1.25;
  --line-height-base: 1.5;
  --line-height-relaxed: 1.75;
  
  /* Transitions */
  --transition-fast: 200ms;
  --transition-base: 300ms;
  --transition-slow: 500ms;
  --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Border Radius */
  --radius-sm: 0.25rem;    /* 4px */
  --radius-md: 0.375rem;   /* 6px */
  --radius-lg: 0.5rem;     /* 8px */
  --radius-xl: 0.75rem;    /* 12px */
  --radius-2xl: 1rem;      /* 16px */
  --radius-full: 9999px;   /* Pills/Circles */
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  
  /* Layout */
  --max-width-content: 1400px;
  --header-height: 80px;
  --footer-height: 120px;
  
  /* Z-Index Scale */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-toast: 9999;
}

/* Override Bootstrap variables */
:root {
  --bs-primary: var(--cnca-primary);
  --bs-success: var(--cnca-success);
  --bs-danger: var(--cnca-danger);
  --bs-warning: var(--cnca-warning);
  --bs-info: var(--cnca-info);
  --bs-body-font-family: var(--font-family-base);
}