/* ========================================
   GCB 8-POINT GRID SYSTEM
   Consistent spacing and sizing based on 8px grid
======================================== */

:root {
    /* ========================================
       8-POINT GRID SPACING SCALE
    ======================================== */
    --gcb-0: 0;           /* 0px */
    --gcb-1: 0.125rem;    /* 2px */
    --gcb-2: 0.25rem;     /* 4px */
    --gcb-4: 0.5rem;      /* 8px - base unit */
    --gcb-6: 0.75rem;     /* 12px */
    --gcb-8: 1rem;        /* 16px */
    --gcb-10: 1.25rem;    /* 20px */
    --gcb-12: 1.5rem;     /* 24px */
    --gcb-16: 2rem;       /* 32px */
    --gcb-20: 2.5rem;     /* 40px */
    --gcb-24: 3rem;       /* 48px */
    --gcb-32: 4rem;       /* 64px */
    --gcb-40: 5rem;       /* 80px */
    --gcb-48: 6rem;       /* 96px */
    --gcb-56: 7rem;       /* 112px */
    --gcb-64: 8rem;       /* 128px */
    --gcb-72: 9rem;       /* 144px */
    --gcb-80: 10rem;      /* 160px */
    --gcb-96: 12rem;      /* 192px */
    
    /* ========================================
       SEMANTIC COLORS USING GCB BRAND PALETTE
    ======================================== */
    
    /* Primary Blue - As shown in brand colors */
    --gcb-primary-blue: #004789;
    --gcb-primary-blue-light: #0066cc;
    --gcb-primary-blue-dark: #002f5c;
    --gcb-primary-blue-bg: rgba(0, 71, 137, 0.1);
    --gcb-primary-blue-border: rgba(0, 71, 137, 0.2);
    
    /* Success - Using GCB Forest Green (or brand green #10b981) */
    --gcb-success: #10b981;                  /* Brand Success Green */
    --gcb-success-light: #34d399;
    --gcb-success-dark: #047857;
    --gcb-success-bg: rgba(16, 185, 129, 0.1);
    --gcb-success-border: rgba(16, 185, 129, 0.2);
    
    /* Danger/Error - Using brand red #ef4444 */
    --gcb-danger: #ef4444;                   /* Brand Danger Red */
    --gcb-danger-light: #f87171;
    --gcb-danger-dark: #dc2626;
    --gcb-danger-bg: rgba(239, 68, 68, 0.1);
    --gcb-danger-border: rgba(239, 68, 68, 0.2);
    
    /* Warning - Using GCB Amber/Gold #ffc52a */
    --gcb-warning: #ffc52a;                  /* Brand Primary Gold */
    --gcb-warning-light: #ffd54f;
    --gcb-warning-dark: #f9a825;
    --gcb-warning-bg: rgba(255, 197, 42, 0.1);
    --gcb-warning-border: rgba(255, 197, 42, 0.2);
    
    /* Info - Using Primary Blue */
    --gcb-info: var(--gcb-primary-blue);     /* #004789 */
    --gcb-info-light: var(--gcb-primary-blue-light);
    --gcb-info-dark: var(--gcb-primary-blue-dark);
    --gcb-info-bg: var(--gcb-primary-blue-bg);
    --gcb-info-border: var(--gcb-primary-blue-border);
    
    /* ========================================
       TYPOGRAPHY SCALE (8-POINT ALIGNED)
    ======================================== */
    --gcb-text-xs: 0.75rem;     /* 12px */
    --gcb-text-sm: 0.875rem;    /* 14px */
    --gcb-text-base: 1rem;      /* 16px */
    --gcb-text-lg: 1.125rem;    /* 18px */
    --gcb-text-xl: 1.25rem;     /* 20px */
    --gcb-text-2xl: 1.5rem;     /* 24px */
    --gcb-text-3xl: 2rem;       /* 32px */
    --gcb-text-4xl: 2.5rem;     /* 40px */
    --gcb-text-5xl: 3rem;       /* 48px */
    --gcb-text-6xl: 4rem;       /* 64px */
    
    /* Line heights (8-point aligned) */
    --gcb-leading-none: 1;
    --gcb-leading-tight: 1.25;   /* 20px for 16px text */
    --gcb-leading-snug: 1.375;   /* 22px for 16px text */
    --gcb-leading-normal: 1.5;   /* 24px for 16px text */
    --gcb-leading-relaxed: 1.75; /* 28px for 16px text */
    --gcb-leading-loose: 2;      /* 32px for 16px text */
}

/* ========================================
   SPACING UTILITIES (8-POINT GRID)
======================================== */

/* Padding */
.p-0 { padding: var(--gcb-0); }
.p-2 { padding: var(--gcb-2); }
.p-4 { padding: var(--gcb-4); }
.p-8 { padding: var(--gcb-8); }
.p-12 { padding: var(--gcb-12); }
.p-16 { padding: var(--gcb-16); }
.p-24 { padding: var(--gcb-24); }
.p-32 { padding: var(--gcb-32); }
.p-40 { padding: var(--gcb-40); }
.p-48 { padding: var(--gcb-48); }
.p-64 { padding: var(--gcb-64); }

/* Padding X-axis */
.px-0 { padding-left: var(--gcb-0); padding-right: var(--gcb-0); }
.px-4 { padding-left: var(--gcb-4); padding-right: var(--gcb-4); }
.px-8 { padding-left: var(--gcb-8); padding-right: var(--gcb-8); }
.px-12 { padding-left: var(--gcb-12); padding-right: var(--gcb-12); }
.px-16 { padding-left: var(--gcb-16); padding-right: var(--gcb-16); }
.px-24 { padding-left: var(--gcb-24); padding-right: var(--gcb-24); }
.px-32 { padding-left: var(--gcb-32); padding-right: var(--gcb-32); }

/* Padding Y-axis */
.py-0 { padding-top: var(--gcb-0); padding-bottom: var(--gcb-0); }
.py-4 { padding-top: var(--gcb-4); padding-bottom: var(--gcb-4); }
.py-8 { padding-top: var(--gcb-8); padding-bottom: var(--gcb-8); }
.py-12 { padding-top: var(--gcb-12); padding-bottom: var(--gcb-12); }
.py-16 { padding-top: var(--gcb-16); padding-bottom: var(--gcb-16); }
.py-24 { padding-top: var(--gcb-24); padding-bottom: var(--gcb-24); }
.py-32 { padding-top: var(--gcb-32); padding-bottom: var(--gcb-32); }

/* Margin */
.m-0 { margin: var(--gcb-0); }
.m-2 { margin: var(--gcb-2); }
.m-4 { margin: var(--gcb-4); }
.m-8 { margin: var(--gcb-8); }
.m-12 { margin: var(--gcb-12); }
.m-16 { margin: var(--gcb-16); }
.m-24 { margin: var(--gcb-24); }
.m-32 { margin: var(--gcb-32); }

/* Margin X-axis */
.mx-0 { margin-left: var(--gcb-0); margin-right: var(--gcb-0); }
.mx-4 { margin-left: var(--gcb-4); margin-right: var(--gcb-4); }
.mx-8 { margin-left: var(--gcb-8); margin-right: var(--gcb-8); }
.mx-auto { margin-left: auto; margin-right: auto; }

/* Margin Y-axis */
.my-0 { margin-top: var(--gcb-0); margin-bottom: var(--gcb-0); }
.my-4 { margin-top: var(--gcb-4); margin-bottom: var(--gcb-4); }
.my-8 { margin-top: var(--gcb-8); margin-bottom: var(--gcb-8); }
.my-12 { margin-top: var(--gcb-12); margin-bottom: var(--gcb-12); }
.my-16 { margin-top: var(--gcb-16); margin-bottom: var(--gcb-16); }
.my-24 { margin-top: var(--gcb-24); margin-bottom: var(--gcb-24); }
.my-32 { margin-top: var(--gcb-32); margin-bottom: var(--gcb-32); }

/* Margin Bottom */
.mb-0 { margin-bottom: var(--gcb-0); }
.mb-2 { margin-bottom: var(--gcb-2); }
.mb-4 { margin-bottom: var(--gcb-4); }
.mb-8 { margin-bottom: var(--gcb-8); }
.mb-12 { margin-bottom: var(--gcb-12); }
.mb-16 { margin-bottom: var(--gcb-16); }
.mb-24 { margin-bottom: var(--gcb-24); }
.mb-32 { margin-bottom: var(--gcb-32); }

/* Margin Top */
.mt-0 { margin-top: var(--gcb-0); }
.mt-4 { margin-top: var(--gcb-4); }
.mt-8 { margin-top: var(--gcb-8); }
.mt-12 { margin-top: var(--gcb-12); }
.mt-16 { margin-top: var(--gcb-16); }
.mt-24 { margin-top: var(--gcb-24); }
.mt-32 { margin-top: var(--gcb-32); }

/* Gap (for flexbox/grid) */
.gap-0 { gap: var(--gcb-0); }
.gap-2 { gap: var(--gcb-2); }
.gap-4 { gap: var(--gcb-4); }
.gap-8 { gap: var(--gcb-8); }
.gap-12 { gap: var(--gcb-12); }
.gap-16 { gap: var(--gcb-16); }
.gap-24 { gap: var(--gcb-24); }
.gap-32 { gap: var(--gcb-32); }

/* ========================================
   HEIGHT & WIDTH (8-POINT GRID)
======================================== */

.h-8 { height: var(--gcb-8); }
.h-16 { height: var(--gcb-16); }
.h-24 { height: var(--gcb-24); }
.h-32 { height: var(--gcb-32); }
.h-40 { height: var(--gcb-40); }
.h-48 { height: var(--gcb-48); }
.h-56 { height: var(--gcb-56); }
.h-64 { height: var(--gcb-64); }

.w-8 { width: var(--gcb-8); }
.w-16 { width: var(--gcb-16); }
.w-24 { width: var(--gcb-24); }
.w-32 { width: var(--gcb-32); }
.w-40 { width: var(--gcb-40); }
.w-48 { width: var(--gcb-48); }
.w-56 { width: var(--gcb-56); }
.w-64 { width: var(--gcb-64); }

/* ========================================
   COMPONENT SIZING (8-POINT ALIGNED)
======================================== */

/* Buttons */
.btn-xs {
    padding: var(--gcb-2) var(--gcb-8);
    font-size: var(--gcb-text-xs);
    min-height: var(--gcb-24);
}

.btn-sm {
    padding: var(--gcb-4) var(--gcb-12);
    font-size: var(--gcb-text-sm);
    min-height: var(--gcb-32);
}

.btn-md {
    padding: var(--gcb-8) var(--gcb-16);
    font-size: var(--gcb-text-base);
    min-height: var(--gcb-40);
}

.btn-lg {
    padding: var(--gcb-12) var(--gcb-24);
    font-size: var(--gcb-text-lg);
    min-height: var(--gcb-48);
}

.btn-xl {
    padding: var(--gcb-16) var(--gcb-32);
    font-size: var(--gcb-text-xl);
    min-height: var(--gcb-56);
}

/* Form Controls */
.form-control-sm {
    padding: var(--gcb-4) var(--gcb-8);
    font-size: var(--gcb-text-sm);
    min-height: var(--gcb-32);
}

.form-control-md {
    padding: var(--gcb-8) var(--gcb-12);
    font-size: var(--gcb-text-base);
    min-height: var(--gcb-40);
}

.form-control-lg {
    padding: var(--gcb-12) var(--gcb-16);
    font-size: var(--gcb-text-lg);
    min-height: var(--gcb-48);
}

/* Cards */
.card-compact {
    padding: var(--gcb-16);
}

.card-normal {
    padding: var(--gcb-24);
}

.card-spacious {
    padding: var(--gcb-32);
}

/* ========================================
   SEMANTIC COLOR CLASSES
======================================== */

/* Success */
.text-success { color: var(--gcb-success) !important; }
.bg-success { 
    background-color: var(--gcb-success) !important; 
    color: white !important;
}
.bg-success-light { background-color: var(--gcb-success-bg) !important; }
.border-success { border-color: var(--gcb-success-border) !important; }

.btn-success {
    background-color: var(--gcb-success);
    border-color: var(--gcb-success);
    color: white;
}

.btn-success:hover {
    background-color: var(--gcb-success-dark);
    border-color: var(--gcb-success-dark);
    color: white;
}

.alert-success {
    background-color: var(--gcb-success-bg);
    border-color: var(--gcb-success-border);
    color: var(--gcb-success-dark);
}

/* Danger */
.text-danger { color: var(--gcb-danger) !important; }
.bg-danger { 
    background-color: var(--gcb-danger) !important; 
    color: white !important;
}
.bg-danger-light { background-color: var(--gcb-danger-bg) !important; }
.border-danger { border-color: var(--gcb-danger-border) !important; }

.btn-danger {
    background-color: var(--gcb-danger);
    border-color: var(--gcb-danger);
    color: white;
}

.btn-danger:hover {
    background-color: var(--gcb-danger-dark);
    border-color: var(--gcb-danger-dark);
    color: white;
}

.alert-danger {
    background-color: var(--gcb-danger-bg);
    border-color: var(--gcb-danger-border);
    color: var(--gcb-danger-dark);
}

/* Warning */
.text-warning { color: var(--gcb-warning) !important; }
.bg-warning { 
    background-color: var(--gcb-warning) !important; 
    color: var(--gcb-black) !important;
}
.bg-warning-light { background-color: var(--gcb-warning-bg) !important; }
.border-warning { border-color: var(--gcb-warning-border) !important; }

.btn-warning {
    background-color: var(--gcb-warning);
    border-color: var(--gcb-warning);
    color: var(--gcb-black);
}

.btn-warning:hover {
    background-color: var(--gcb-warning-dark);
    border-color: var(--gcb-warning-dark);
    color: var(--gcb-black);
}

.alert-warning {
    background-color: var(--gcb-warning-bg);
    border-color: var(--gcb-warning-border);
    color: var(--gcb-warning-dark);
}

/* Info */
.text-info { color: var(--gcb-info) !important; }
.bg-info { 
    background-color: var(--gcb-info) !important; 
    color: white !important;
}
.bg-info-light { background-color: var(--gcb-info-bg) !important; }
.border-info { border-color: var(--gcb-info-border) !important; }

.btn-info {
    background-color: var(--gcb-info);
    border-color: var(--gcb-info);
    color: white;
}

.btn-info:hover {
    background-color: var(--gcb-info-dark);
    border-color: var(--gcb-info-dark);
    color: white;
}

.alert-info {
    background-color: var(--gcb-info-bg);
    border-color: var(--gcb-info-border);
    color: var(--gcb-info-dark);
}

/* ========================================
   ICON ALIGNMENT UTILITIES
======================================== */

.icon-text {
    display: inline-flex;
    align-items: center;
    gap: var(--gcb-4);
}

.icon-sm {
    width: var(--gcb-16);
    height: var(--gcb-16);
}

.icon-md {
    width: var(--gcb-24);
    height: var(--gcb-24);
}

.icon-lg {
    width: var(--gcb-32);
    height: var(--gcb-32);
}

/* Icon containers for perfect alignment */
.icon-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--gcb-40);
    height: var(--gcb-40);
}

.icon-container-sm {
    width: var(--gcb-32);
    height: var(--gcb-32);
}

.icon-container-lg {
    width: var(--gcb-48);
    height: var(--gcb-48);
}