/* =============================================
   STOKE SACCO BRAND COLORS & STYLES
   Based on Official Logo Color Palette
   ============================================= */

/* Google Fonts Import - Professional Typography */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* Custom SACCO Colors - Based on Official Logo */
:root {
    --sacco-primary-green: #85bc4d;    /* Main green from logo */
    --sacco-primary-blue: #0a4770;     /* Main navy blue from logo */
    --sacco-light-green: #aed581;      /* Light green accent */
    --sacco-dark-green: #689f38;       /* Dark green for depth */
    --sacco-accent-blue: #3b82f6;      /* Medium blue accent */
    --sacco-text-gray: #4a5568;        /* Secondary text color */
    
    /* Additional System Colors */
    --sacco-error-red: #ef4444;        /* Error/validation red */
    --sacco-bg-light: #f8fff1;         /* Light background green tint */
    --sacco-bg-super-light: #d4ffa6;   /* Super light green background */
    --sacco-border-gray: #e5e7eb;      /* Light gray borders */
    --sacco-black: #000000;            /* Pure black for high contrast */
    
    /* Typography Variables */
    --sacco-font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    --sacco-font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    
    /* Maintain backward compatibility */
    --section-green: var(--sacco-primary-green);
    --section-blue: var(--sacco-primary-blue);
}

/* =============================================
   BACKGROUND COLORS
   ============================================= */
.bg-section-green, 
.bg-sacco-green { 
    background-color: var(--sacco-primary-green); 
}

.bg-section-blue, 
.bg-sacco-blue { 
    background-color: var(--sacco-primary-blue); 
}

.bg-sacco-light-green { 
    background-color: var(--sacco-light-green); 
}

.bg-sacco-dark-green { 
    background-color: var(--sacco-dark-green); 
}

.bg-sacco-accent-blue { 
    background-color: var(--sacco-accent-blue); 
}

/* =============================================
   TEXT COLORS
   ============================================= */
.text-section-green, 
.text-sacco-green { 
    color: var(--sacco-primary-green); 
}

.text-section-blue, 
.text-sacco-blue { 
    color: var(--sacco-primary-blue); 
}

.text-sacco-light-green { 
    color: var(--sacco-light-green); 
}

.text-sacco-dark-green { 
    color: var(--sacco-dark-green); 
}

.text-sacco-accent-blue { 
    color: var(--sacco-accent-blue); 
}

.text-sacco-gray { 
    color: var(--sacco-text-gray); 
}

.text-red-500 {
    color: var(--sacco-error-red);
}

.text-red-600 {
    color: #DC2626;
}

.text-amber-500 {
    color: #F59E0B;
}

/* =============================================
   BORDER COLORS
   ============================================= */
.border-section-green, 
.border-sacco-green { 
    border-color: var(--sacco-primary-green); 
}

.border-section-blue, 
.border-sacco-blue { 
    border-color: var(--sacco-primary-blue); 
}

.border-sacco-light-green { 
    border-color: var(--sacco-light-green); 
}

.border-sacco-dark-green { 
    border-color: var(--sacco-dark-green); 
}

.border-sacco-accent-blue { 
    border-color: var(--sacco-accent-blue); 
}

/* =============================================
   OPACITY VARIANTS
   ============================================= */
.bg-sacco-light-green-opacity-20 { 
    background-color: rgba(174, 213, 129, 0.2); 
}

.bg-sacco-light-green-opacity-30 { 
    background-color: rgba(174, 213, 129, 0.3); 
}

.bg-sacco-accent-blue-opacity-10 { 
    background-color: rgba(59, 130, 246, 0.1); 
}

.border-sacco-green-opacity-20 { 
    border-color: rgba(133, 188, 77, 0.2); 
}

.border-sacco-green-opacity-30 { 
    border-color: rgba(133, 188, 77, 0.3); 
}

.border-sacco-accent-blue-opacity-20 { 
    border-color: rgba(59, 130, 246, 0.2); 
}

/* =============================================
   SUCCESS/PAYMENT COLORS
   ============================================= */
.bg-sacco-success-light { 
    background-color: rgba(133, 188, 77, 0.1); 
}

.bg-sacco-success { 
    background-color: rgba(133, 188, 77, 0.15); 
}

.border-sacco-success-light { 
    border-color: rgba(133, 188, 77, 0.3); 
}

.border-sacco-success { 
    border-color: rgba(133, 188, 77, 0.5); 
}

.text-sacco-success { 
    color: #5a7c2a; 
}

.text-sacco-success-light { 
    color: #689f38; 
}

/* =============================================
   HOVER VARIANTS
   ============================================= */
.hover-bg-sacco-blue-opacity-90:hover { 
    background-color: rgba(10, 71, 112, 0.9); 
}

.hover-text-white-opacity-80:hover { 
    color: rgba(255, 255, 255, 0.8); 
}

/* =============================================
   GRADIENT BACKGROUNDS
   ============================================= */
.bg-custom-gradient {
    background: linear-gradient(to right, var(--section-green), var(--section-blue));
}

.bg-sacco-green-gradient {
    background: linear-gradient(to right, var(--sacco-primary-green), var(--sacco-dark-green));
}

.hover-bg-sacco-green-gradient-dark:hover {
    background: linear-gradient(to right, var(--sacco-dark-green), #5a7c2a);
}

.bg-sacco-blue-gradient {
    background: linear-gradient(to right, var(--sacco-primary-blue), var(--sacco-accent-blue));
}

.hover-bg-sacco-blue-gradient-dark:hover {
    background: linear-gradient(to right, #083d5f, var(--sacco-primary-blue));
}

/* Button-specific gradients */
.sacco-btn-gradient {
    background: linear-gradient(135deg, var(--sacco-primary-green), var(--sacco-primary-blue));
}

.sacco-btn-gradient-reverse {
    background: linear-gradient(135deg, var(--sacco-primary-blue), var(--sacco-primary-green));
}

.sacco-gradient-bg {
    background: linear-gradient(135deg, var(--sacco-primary-green), var(--sacco-primary-blue));
}

/* =============================================
   TYPOGRAPHY SYSTEM
   ============================================= */
/* Base font family for the entire application */
body {
    font-family: var(--sacco-font-primary);
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Headings use Poppins for better visual hierarchy */
h1, h2, h3, h4, h5, h6,
.sacco-heading {
    font-family: var(--sacco-font-heading);
    font-feature-settings: 'cv02', 'cv11';
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.025em;
}

/* Form labels for consistency */
label,
.sacco-label {
    font-family: var(--sacco-font-primary);
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.25rem;
    letter-spacing: 0.025em;
}

/* Button text styling */
button,
.sacco-button {
    font-family: var(--sacco-font-primary);
    font-weight: 600;
    letter-spacing: 0.025em;
}

/* Input field styling */
input, select, textarea,
.sacco-input {
    font-family: var(--sacco-font-primary);
    font-weight: 400;
    line-height: 1.5;
}

/* Text utility classes */
.sacco-text-xs { font-size: 0.75rem; line-height: 1rem; }
.sacco-text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.sacco-text-base { font-size: 1rem; line-height: 1.5rem; }
.sacco-text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.sacco-text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.sacco-text-2xl { font-size: 1.5rem; line-height: 2rem; }

/* Font weight utilities */
.sacco-font-light { font-weight: 300; }
.sacco-font-normal { font-weight: 400; }
.sacco-font-medium { font-weight: 500; }
.sacco-font-semibold { font-weight: 600; }
.sacco-font-bold { font-weight: 700; }
.sacco-font-extrabold { font-weight: 800; }

/* =============================================
   FORM & UI ENHANCEMENTS
   ============================================= */

/* Mobile responsive styles */
@media (max-width: 640px) {
    .form-input, select, textarea {
        font-size: 16px !important; /* Prevents iOS zoom on focus */
        padding: 0.625rem !important;
        font-family: var(--sacco-font-primary);
    }
    
    /* Improve spacing for mobile */
    .mb-4 {
        margin-bottom: 1rem !important;
    }
    
    /* Fix phone input container on small screens */
    .phone-container {
        flex-direction: column;
    }
    
    /* Ensure buttons are large enough for touch targets */
    button {
        min-height: 44px;
        font-family: var(--sacco-font-primary);
    }
    
    /* Reduce padding on mobile */
    .p-6 {
        padding: 1rem !important;
    }
    
    /* Responsive typography */
    h1, .sacco-heading-1 { font-size: 1.875rem; line-height: 2.25rem; }
    h2, .sacco-heading-2 { font-size: 1.5rem; line-height: 2rem; }
    h3, .sacco-heading-3 { font-size: 1.25rem; line-height: 1.75rem; }
}

/* Error animations */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* Error styling enhancements */
.border-red-500 {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.border-green-500 {
    border-color: #22c55e !important;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
}

/* Table row hover states */
.sacco-table-row-hover:hover {
    background: linear-gradient(to right, var(--sacco-bg-super-light), var(--sacco-primary-green));
    border-left-color: var(--sacco-primary-green);
}

/* Badge styles */
.sacco-badge {
    background-color: var(--sacco-bg-super-light);
    color: var(--sacco-primary-blue);
}

/* SVG stroke colors */
.sacco-stroke-primary {
    stroke: var(--sacco-primary-green);
}

.sacco-stroke-light {
    stroke: var(--sacco-bg-super-light);
}

/* =============================================
   MISSING CLASSES FOR PAYMENT TEMPLATES
   ============================================= */

/* Additional Background Classes */
.bg-sacco-super-light {
    background-color: var(--sacco-bg-super-light);
}

.bg-sacco-gradient-bg {
    background: linear-gradient(135deg, var(--sacco-bg-super-light) 0%, var(--sacco-primary-green) 50%, var(--sacco-primary-blue) 100%);
}

.bg-sacco-light-green-gradient {
    background: linear-gradient(135deg, var(--sacco-bg-super-light), var(--sacco-light-green));
}

/* Additional Text Color Classes */
.text-sacco-text-gray {
    color: var(--sacco-text-gray);
}

/* Additional Border Classes */
.border-sacco-green-2 {
    border: 2px solid var(--sacco-primary-green);
}

.border-sacco-blue-2 {
    border: 2px solid var(--sacco-primary-blue);
}

.border-sacco-super-light {
    border-color: var(--sacco-bg-super-light);
}

/* Typography Size Classes */
.sacco-heading-xl {
    font-family: var(--sacco-font-heading);
    font-size: 2.25rem;
    line-height: 2.5rem;
    font-weight: 700;
    letter-spacing: -0.025em;
}

.sacco-heading-lg {
    font-family: var(--sacco-font-heading);
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 600;
    letter-spacing: -0.025em;
}

.sacco-heading-base {
    font-family: var(--sacco-font-heading);
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.025em;
}