/*
|--------------------------------------------------------------------------
| WHITE-LABEL CSS VARIABLES
|--------------------------------------------------------------------------
|
| DEPLOYMENT INSTRUCTIONS:
| For each new site, update ONLY this file with new brand colors.
| All other CSS files reference these variables automatically.
|
| Current Site: firstarive.com
| Last Updated: January 2025
|
|--------------------------------------------------------------------------
*/

:root {
  /* ===== PRIMARY BRAND COLORS ===== */
  --fa-primary-blue: #263C84;           /* First Arive primary blue */
  --fa-primary-blue-dark: #131E42;      /* Darker blue for text */
  --fa-primary-blue-light: #DAE0F4;     /* Light blue for borders/accents */
  --fa-primary-blue-verylight: #e9f0ff; /* Very light blue backgrounds */

  --fa-accent-coral: #F47A6B;           /* First Arive coral accent */
  --fa-accent-coral-dark: #ca7468;      /* Darker coral for borders */

  --fa-accent-yellow: #FDD79E;          /* Yellow accent */
  --fa-accent-yellow-light: #FEF2DF;    /* Light yellow backgrounds */

  /* ===== TEXT COLORS ===== */
  --fa-text-white: #FFFFFF;             /* White text */
  --fa-text-dark: #131E42;              /* Dark blue text */
  --fa-text-gray: #666666;              /* Gray text */
  --fa-text-error: #d23;                /* Error red */

  /* ===== BACKGROUND COLORS ===== */
  --fa-background-white: #FFFFFF;       /* White backgrounds */
  --fa-background-light: #f9f9f9;       /* Light gray backgrounds */
  --fa-background-blue-light: #e9f0ff;  /* Light blue backgrounds */

  /* ===== BORDER COLORS ===== */
  --fa-border-light: #DAE0F4;           /* Light blue borders */
  --fa-border-gray: #ccc;               /* Gray borders */
  --fa-border-yellow: #FDD79E;          /* Yellow borders */

  /* ===== GRADIENTS ===== */
  --fa-gradient-primary: linear-gradient(90deg, var(--fa-primary-blue) 0%, var(--fa-accent-coral) 100%);
  --fa-gradient-accent: linear-gradient(270deg, var(--fa-accent-yellow-light) 8.91%, var(--fa-primary-blue-light) 91.09%);

  /* ===== BUTTON STYLES ===== */
  --fa-button-bg: var(--fa-primary-blue);
  --fa-button-text: var(--fa-text-white);
  --fa-button-hover-bg: var(--fa-accent-coral);
  --fa-button-hover-text: var(--fa-text-dark);
  --fa-button-hover-border: var(--fa-accent-coral-dark);

  --fa-button-secondary-bg: var(--fa-gradient-accent);
  --fa-button-secondary-text: var(--fa-text-dark);
  --fa-button-secondary-border: var(--fa-border-yellow);

  /* ===== SPACING ===== */
  --fa-spacing-xs: 0.25rem;             /* 4px */
  --fa-spacing-sm: 0.5rem;              /* 8px */
  --fa-spacing-md: 1rem;                /* 16px */
  --fa-spacing-lg: 2rem;                /* 32px */
  --fa-spacing-xl: 3rem;                /* 48px */

  /* ===== BORDER RADIUS ===== */
  --fa-border-radius: 8px;              /* Standard border radius */
  --fa-border-radius-sm: 4px;           /* Small border radius */
  --fa-border-radius-lg: 16px;          /* Large border radius */
  --fa-border-radius-circle: 50%;       /* Circular */

  /* ===== TYPOGRAPHY ===== */
  --fa-font-size-xs: 0.85rem;           /* Small text */
  --fa-font-size-sm: 0.9rem;            /* Slightly small */
  --fa-font-size-base: 1rem;            /* Base font size */
  --fa-font-size-md: 1.25rem;           /* Medium heading */
  --fa-font-size-lg: 1.5rem;            /* Large heading */
  --fa-font-size-xl: 2rem;              /* Extra large heading */

  --fa-font-weight-normal: 400;
  --fa-font-weight-semibold: 600;
  --fa-font-weight-bold: 700;

  /* ===== Z-INDEX SYSTEM ===== */
  --fa-z-base: 1;
  --fa-z-dropdown: 999;
  --fa-z-header: 1000;
  --fa-z-modal: 9999;
  --fa-z-overlay: 10000;

  /* ===== FIELD HEIGHTS (for forms) ===== */
  --fa-field-height: 42px;              /* Standard input height */
  --fa-field-padding: 12px;             /* Standard input padding */

  /* ===== DUOTONE ICON COLORS ===== */
  --fa-icon-primary: var(--fa-accent-coral);
  --fa-icon-secondary: var(--fa-primary-blue);
}

/*
|--------------------------------------------------------------------------
| DEPLOYMENT CHECKLIST
|--------------------------------------------------------------------------
|
| When deploying to a new site:
|
| 1. Update the brand colors above (lines 16-26)
| 2. Test on local environment
| 3. Push to git
| 4. Deploy to new site
| 5. Verify all colors updated correctly
|
| That's it! All 1,675 lines of CSS will update automatically.
|
|--------------------------------------------------------------------------
*/