/* ===== LEDGERWISE BRAND GUIDELINES ===== */
/* Brand Guidelines v2025 */

/* ===== CSS CUSTOM PROPERTIES (Variables) ===== */
:root {
    /* Primary Brand Colors */
    --lw-primary-dark: #020B2B;
    --lw-primary-blue: #3980A5;
    --lw-primary-gold: #EEB66F;
    --lw-primary-gold-dark: #80471F;

    /* Primary Gold Gradient */
    --lw-gradient-gold: linear-gradient(135deg, #EEB66F 0%, #80471F 100%);

    /* Grayscale Palette */
    --lw-gray-cloud: #EDEFF7;
    --lw-gray-smoke: #D3D6E0;
    --lw-gray-steel: #BCBFCC;
    --lw-gray-space: #9DA2B3;
    --lw-gray-graphite: #6E7180;
    --lw-gray-arsenic: #40424D;
    --lw-gray-phantom: #1E1E24;
    --lw-black: #000000;
    --lw-white: #FFFFFF;

    /* ===== BOOTSTRAP 5 COLOR OVERRIDES ===== */
    /* These override Bootstrap's default colors globally */
    
    /* Primary - Ledgerwise Blue */
    --bs-primary: #3980A5;
    --bs-primary-rgb: 57, 128, 165;
    
    /* Secondary - Ledgerwise Gray (Arsenic) */
    --bs-secondary: #40424D;
    --bs-secondary-rgb: 64, 66, 77;
    
    /* Info - Ledgerwise Blue (lighter usage) */
    --bs-info: #3980A5;
    --bs-info-rgb: 57, 128, 165;
    
    /* Dark - Ledgerwise Primary Dark */
    --bs-dark: #020B2B;
    --bs-dark-rgb: 2, 11, 43;
    
    /* Light - Ledgerwise Cloud */
    --bs-light: #EDEFF7;
    --bs-light-rgb: 237, 239, 247;
    
    /* Body colors */
    --bs-body-color: #020B2B;
    --bs-body-color-rgb: 2, 11, 43;
    --bs-body-bg: #FFFFFF;
    
    /* Link colors */
    --bs-link-color: #3980A5;
    --bs-link-color-rgb: 57, 128, 165;
    --bs-link-hover-color: #020B2B;
    --bs-link-hover-color-rgb: 2, 11, 43;
    
    /* Border colors */
    --bs-border-color: #D3D6E0;

    /* Typography - Manrope Font Family */
    --lw-font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Font Weights */
    --lw-font-light: 300;
    --lw-font-regular: 400;
    --lw-font-medium: 500;
    --lw-font-semibold: 600;
    --lw-font-bold: 700;
    --lw-font-extrabold: 800;

    /* Type Scale */
    --lw-heading-1: 4rem;      /* 64px */
    --lw-heading-2: 3rem;      /* 48px */
    --lw-subheader-1: 2rem;    /* 32px */
    --lw-subheader-2: 1.5rem;  /* 24px */
    --lw-paragraph-1: 1.125rem; /* 18px */
    --lw-paragraph-2: 1rem;    /* 16px */

    /* Spacing (based on 8px grid) */
    --lw-spacing-xs: 0.25rem;  /* 4px */
    --lw-spacing-sm: 0.5rem;   /* 8px */
    --lw-spacing-md: 1rem;     /* 16px */
    --lw-spacing-lg: 1.5rem;   /* 24px */
    --lw-spacing-xl: 2rem;     /* 32px */
    --lw-spacing-2xl: 3rem;    /* 48px */

    /* Border Radius */
    --lw-radius-sm: 0.25rem;
    --lw-radius-md: 0.5rem;
    --lw-radius-lg: 1rem;

    /* Shadows */
    --lw-shadow-sm: 0 1px 2px rgba(2, 11, 43, 0.05);
    --lw-shadow-md: 0 4px 6px rgba(2, 11, 43, 0.1);
    --lw-shadow-lg: 0 10px 15px rgba(2, 11, 43, 0.15);
}

/* ===== GOOGLE FONT IMPORT ===== */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap');

/* ===== BASE TYPOGRAPHY ===== */
html, body {
    font-family: var(--lw-font-family);
    font-weight: var(--lw-font-regular);
    font-size: var(--lw-paragraph-2);
    color: var(--lw-primary-dark);
    line-height: 1.5;
}

h1, .h1 {
    font-size: var(--lw-heading-1);
    font-weight: var(--lw-font-bold);
    line-height: 1.2;
    color: var(--lw-primary-dark);
}

h2, .h2 {
    font-size: var(--lw-heading-2);
    font-weight: var(--lw-font-bold);
    line-height: 1.25;
    color: var(--lw-primary-dark);
}

h3, .h3 {
    font-size: var(--lw-subheader-1);
    font-weight: var(--lw-font-semibold);
    line-height: 1.3;
    color: var(--lw-primary-dark);
}

h4, .h4 {
    font-size: var(--lw-subheader-2);
    font-weight: var(--lw-font-semibold);
    line-height: 1.35;
    color: var(--lw-primary-dark);
}

h5, .h5 {
    font-size: var(--lw-paragraph-1);
    font-weight: var(--lw-font-semibold);
    line-height: 1.4;
}

h6, .h6 {
    font-size: var(--lw-paragraph-2);
    font-weight: var(--lw-font-semibold);
    line-height: 1.4;
}

p {
    font-size: var(--lw-paragraph-2);
    line-height: 1.6;
    margin-bottom: var(--lw-spacing-md);
}

.lead {
    font-size: var(--lw-paragraph-1);
    font-weight: var(--lw-font-regular);
}

/* ===== BRAND COLOR UTILITY CLASSES ===== */

/* Background Colors */
.bg-lw-primary-dark { background-color: var(--lw-primary-dark) !important; }
.bg-lw-primary-blue { background-color: var(--lw-primary-blue) !important; }
.bg-lw-primary-gold { background-color: var(--lw-primary-gold) !important; }
.bg-lw-gradient-gold { background: var(--lw-gradient-gold) !important; }
.bg-lw-cloud { background-color: var(--lw-gray-cloud) !important; }
.bg-lw-smoke { background-color: var(--lw-gray-smoke) !important; }
.bg-lw-steel { background-color: var(--lw-gray-steel) !important; }
.bg-lw-space { background-color: var(--lw-gray-space) !important; }
.bg-lw-graphite { background-color: var(--lw-gray-graphite) !important; }
.bg-lw-arsenic { background-color: var(--lw-gray-arsenic) !important; }
.bg-lw-phantom { background-color: var(--lw-gray-phantom) !important; }

/* Text Colors */
.text-lw-primary-dark { color: var(--lw-primary-dark) !important; }
.text-lw-primary-blue { color: var(--lw-primary-blue) !important; }
.text-lw-primary-gold { color: var(--lw-primary-gold) !important; }
.text-lw-cloud { color: var(--lw-gray-cloud) !important; }
.text-lw-smoke { color: var(--lw-gray-smoke) !important; }
.text-lw-steel { color: var(--lw-gray-steel) !important; }
.text-lw-space { color: var(--lw-gray-space) !important; }
.text-lw-graphite { color: var(--lw-gray-graphite) !important; }
.text-lw-arsenic { color: var(--lw-gray-arsenic) !important; }
.text-lw-phantom { color: var(--lw-gray-phantom) !important; }

/* Border Colors */
.border-lw-primary-dark { border-color: var(--lw-primary-dark) !important; }
.border-lw-primary-blue { border-color: var(--lw-primary-blue) !important; }
.border-lw-primary-gold { border-color: var(--lw-primary-gold) !important; }
.border-lw-steel { border-color: var(--lw-gray-steel) !important; }

/* ===== BRAND BUTTONS ===== */
.btn-lw-primary {
    background-color: var(--lw-primary-blue);
    border-color: var(--lw-primary-blue);
    color: var(--lw-white);
    font-weight: var(--lw-font-semibold);
}

.btn-lw-primary:hover,
.btn-lw-primary:focus {
    background-color: var(--lw-primary-dark);
    border-color: var(--lw-primary-dark);
    color: var(--lw-white);
}

.btn-lw-secondary {
    background-color: var(--lw-primary-gold);
    border-color: var(--lw-primary-gold);
    color: var(--lw-primary-dark);
    font-weight: var(--lw-font-semibold);
}

.btn-lw-secondary:hover,
.btn-lw-secondary:focus {
    background-color: var(--lw-primary-gold-dark);
    border-color: var(--lw-primary-gold-dark);
    color: var(--lw-white);
}

.btn-lw-outline-primary {
    background-color: transparent;
    border-color: var(--lw-primary-blue);
    color: var(--lw-primary-blue);
    font-weight: var(--lw-font-semibold);
}

.btn-lw-outline-primary:hover,
.btn-lw-outline-primary:focus {
    background-color: var(--lw-primary-blue);
    color: var(--lw-white);
}

.btn-lw-outline-dark {
    background-color: transparent;
    border-color: var(--lw-primary-dark);
    color: var(--lw-primary-dark);
    font-weight: var(--lw-font-semibold);
}

.btn-lw-outline-dark:hover,
.btn-lw-outline-dark:focus {
    background-color: var(--lw-primary-dark);
    color: var(--lw-white);
}

/* ===== LINKS ===== */
a {
    color: var(--lw-primary-blue);
    text-decoration: none;
    transition: color 0.15s ease-in-out;
}

a:hover {
    color: var(--lw-primary-dark);
    text-decoration: underline;
}

/* ===== CARDS WITH BRAND STYLING ===== */
.card-lw {
    border: 1px solid var(--lw-gray-smoke);
    border-radius: var(--lw-radius-md);
    box-shadow: var(--lw-shadow-sm);
}

.card-lw .card-header {
    background-color: var(--lw-gray-cloud);
    border-bottom: 1px solid var(--lw-gray-smoke);
    font-weight: var(--lw-font-semibold);
}

/* ===== FORM STYLING ===== */
.form-control:focus,
.form-select:focus {
    border-color: var(--lw-primary-blue);
    box-shadow: 0 0 0 0.2rem rgba(57, 128, 165, 0.25);
}

/* ===== BOOTSTRAP COMPONENT OVERRIDES ===== */
/* Override Bootstrap's default primary button colors */
.btn-primary {
    --bs-btn-bg: #3980A5;
    --bs-btn-border-color: #3980A5;
    --bs-btn-hover-bg: #020B2B;
    --bs-btn-hover-border-color: #020B2B;
    --bs-btn-active-bg: #020B2B;
    --bs-btn-active-border-color: #020B2B;
    --bs-btn-disabled-bg: #3980A5;
    --bs-btn-disabled-border-color: #3980A5;
}

.btn-outline-primary {
    --bs-btn-color: #3980A5;
    --bs-btn-border-color: #3980A5;
    --bs-btn-hover-bg: #3980A5;
    --bs-btn-hover-border-color: #3980A5;
    --bs-btn-active-bg: #3980A5;
    --bs-btn-active-border-color: #3980A5;
}

/* Override Bootstrap's secondary button colors */
.btn-secondary {
    --bs-btn-bg: #40424D;
    --bs-btn-border-color: #40424D;
    --bs-btn-hover-bg: #1E1E24;
    --bs-btn-hover-border-color: #1E1E24;
    --bs-btn-active-bg: #1E1E24;
    --bs-btn-active-border-color: #1E1E24;
}

.btn-outline-secondary {
    --bs-btn-color: #40424D;
    --bs-btn-border-color: #40424D;
    --bs-btn-hover-bg: #40424D;
    --bs-btn-hover-border-color: #40424D;
}

/* Dark button using brand dark blue */
.btn-dark {
    --bs-btn-bg: #020B2B;
    --bs-btn-border-color: #020B2B;
    --bs-btn-hover-bg: #3980A5;
    --bs-btn-hover-border-color: #3980A5;
}

/* Light button using brand cloud */
.btn-light {
    --bs-btn-bg: #EDEFF7;
    --bs-btn-border-color: #D3D6E0;
    --bs-btn-color: #020B2B;
    --bs-btn-hover-bg: #D3D6E0;
    --bs-btn-hover-border-color: #BCBFCC;
}

/* Background utilities */
.bg-primary {
    background-color: var(--lw-primary-blue) !important;
}

.bg-secondary {
    background-color: var(--lw-gray-arsenic) !important;
}

.bg-dark {
    background-color: var(--lw-primary-dark) !important;
}

.bg-light {
    background-color: var(--lw-gray-cloud) !important;
}

/* Text utilities */
.text-primary {
    color: var(--lw-primary-blue) !important;
}

.text-secondary {
    color: var(--lw-gray-arsenic) !important;
}

.text-dark {
    color: var(--lw-primary-dark) !important;
}

.text-muted {
    color: var(--lw-gray-graphite) !important;
}

/* Border utilities */
.border-primary {
    border-color: var(--lw-primary-blue) !important;
}

.border-secondary {
    border-color: var(--lw-gray-arsenic) !important;
}

/* Alert overrides */
.alert-primary {
    --bs-alert-bg: rgba(57, 128, 165, 0.15);
    --bs-alert-border-color: rgba(57, 128, 165, 0.3);
    --bs-alert-color: #020B2B;
}

.alert-info {
    --bs-alert-bg: rgba(57, 128, 165, 0.1);
    --bs-alert-border-color: rgba(57, 128, 165, 0.2);
    --bs-alert-color: #3980A5;
}

/* Badge overrides */
.badge.bg-primary {
    background-color: var(--lw-primary-blue) !important;
}

.badge.bg-secondary {
    background-color: var(--lw-gray-arsenic) !important;
}

.badge.bg-dark {
    background-color: var(--lw-primary-dark) !important;
}

/* Spinner overrides */
.spinner-border.text-primary,
.spinner-grow.text-primary {
    color: var(--lw-primary-blue) !important;
}

/* Progress bar overrides */
.progress-bar {
    background-color: var(--lw-primary-blue);
}

/* Card header with primary background */
.card-header.bg-primary {
    background-color: var(--lw-primary-blue) !important;
    border-bottom-color: rgba(57, 128, 165, 0.3);
}

/* Modal header with primary background */
.modal-header.bg-primary {
    background-color: var(--lw-primary-blue) !important;
}

/* Pagination */
.page-link {
    color: var(--lw-primary-blue);
}

.page-link:hover {
    color: var(--lw-primary-dark);
}

.page-item.active .page-link {
    background-color: var(--lw-primary-blue);
    border-color: var(--lw-primary-blue);
}

/* Nav tabs and pills */
.nav-link {
    color: var(--lw-primary-blue);
}

.nav-link:hover,
.nav-link:focus {
    color: var(--lw-primary-dark);
}

.nav-pills .nav-link.active {
    background-color: var(--lw-primary-blue);
}

.nav-tabs .nav-link.active {
    color: var(--lw-primary-dark);
    border-bottom-color: var(--lw-primary-blue);
}

/* Table hover and striped */
.table-hover > tbody > tr:hover {
    --bs-table-hover-bg: rgba(57, 128, 165, 0.05);
}

.table-primary {
    --bs-table-bg: rgba(57, 128, 165, 0.1);
    --bs-table-border-color: rgba(57, 128, 165, 0.2);
}

/* Dropdown */
.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--lw-primary-blue);
}

/* List group */
.list-group-item.active {
    background-color: var(--lw-primary-blue);
    border-color: var(--lw-primary-blue);
}

/* ===== RESPONSIVE TYPE SCALE ===== */
@media (max-width: 768px) {
    :root {
        --lw-heading-1: 2.5rem;   /* 40px on mobile */
        --lw-heading-2: 2rem;     /* 32px on mobile */
        --lw-subheader-1: 1.5rem; /* 24px on mobile */
        --lw-subheader-2: 1.25rem; /* 20px on mobile */
    }
}