/* ===== CTA Design System =====
   Centralized color palette, typography, spacing, and component styles
   for consistent design across the entire website.

   Load this BEFORE page-specific CSS files.
*/

/* ===== CSS Custom Properties ===== */
:root {
    /* Primary Colors */
    --color-primary: #028fcc;
    --color-primary-dark: #026fa0;
    --color-primary-light: #4db3e6;
    --color-accent: #ff0000;  /* Used for hover states */

    /* Grays */
    --color-gray-50: #fafafa;
    --color-gray-100: #f5f5f5;
    --color-gray-200: #eeeeee;
    --color-gray-300: #e6e6e6;
    --color-gray-400: #cccccc;
    --color-gray-500: #999999;
    --color-gray-600: #777777;
    --color-gray-700: #555555;
    --color-gray-800: #444444;
    --color-gray-900: #222222;

    /* Background Colors */
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #eeeeee;
    --color-bg-tertiary: #f5f5f5;

    /* Text Colors */
    --color-text-primary: #222222;
    --color-text-secondary: #444444;
    --color-text-tertiary: #666666;
    --color-text-muted: #777777;

    /* Gradient - Blue Strap Header */
    --gradient-blue-strap: linear-gradient(
        180deg,
        #0B1D36 0%,
        #091A44 20%,
        #071753 40%,
        #041561 60%,
        #021270 80%,
        #000F7E 100%
    );

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 18px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;

    /* Spacing Scale (8px base) */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 40px;
    --spacing-3xl: 48px;

    /* Typography */
    --font-sans: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --font-size-xs: 11px;
    --font-size-sm: 13px;
    --font-size-base: 15px;
    --font-size-lg: 16px;
    --font-size-xl: 18px;
    --font-size-2xl: 23px;
    --font-size-3xl: 28px;
    --font-size-4xl: 40px;

    --font-weight-normal: 400;
    --font-weight-medium: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    /* Breakpoints (for reference in media queries) */
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;

    /* 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;
}

/* ===== Navigation & Back Links ===== */
.nav-link,
.back-link {
    display: inline-block;
    color: var(--color-primary);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    transition: color var(--transition-fast);
}

.nav-link:hover,
.back-link:hover {
    color: var(--color-accent);
    text-decoration: none;
}

.back-link::before {
    content: '← ';
}

/* Standard back link styling */
.page-back-link {
    display: inline-block;
    margin: 12px 0 10px;
    color: var(--color-primary);
    text-decoration: none;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    transition: color var(--transition-fast);
}

.page-back-link:hover {
    color: var(--color-accent);
}

/* ===== Buttons ===== */
.btn {
    display: inline-block;
    padding: 10px 24px;
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-base);
    line-height: 1.5;
}

.btn-primary {
    background: var(--color-primary);
    color: white;
    box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
    background: var(--color-primary-dark);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
    color: white;
    text-decoration: none;
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

.btn-secondary {
    background: var(--color-gray-100);
    color: var(--color-text-primary);
    box-shadow: var(--shadow-sm);
}

.btn-secondary:hover {
    background: var(--color-gray-200);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
    color: var(--color-text-primary);
    text-decoration: none;
}

.btn-lg {
    padding: 12px 32px;
    font-size: var(--font-size-lg);
}

.btn-sm {
    padding: 6px 16px;
    font-size: var(--font-size-sm);
}

/* ===== Callout Boxes ===== */
.callout {
    padding: var(--spacing-lg);
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--color-primary);
}

.callout-centered {
    text-align: center;
}

.callout h3 {
    margin: 0 0 var(--spacing-sm) 0;
    font-size: var(--font-size-xl);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-bold);
}

.callout p {
    margin: 0 0 var(--spacing-md) 0;
    color: var(--color-text-tertiary);
    font-size: var(--font-size-base);
    line-height: 1.6;
}

.callout-primary {
    background: rgba(2, 143, 204, 0.05);
    border-left-color: var(--color-primary);
}

.callout-gray {
    background: var(--color-gray-100);
    border-left-color: var(--color-gray-400);
}

/* ===== Link Lists ===== */
.link-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.link-list li {
    margin: var(--spacing-sm) 0;
}

.link-list a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    transition: color var(--transition-fast);
}

.link-list a:hover {
    color: var(--color-accent);
    text-decoration: none;
}

/* ===== Inline Links (in paragraphs) ===== */
p a,
.content a {
    color: var(--color-primary);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color var(--transition-fast), color var(--transition-fast);
}

p a:hover,
.content a:hover {
    color: var(--color-primary-dark);
    border-bottom-color: var(--color-primary-dark);
}

/* ===== Section Spacing ===== */
.section {
    padding: var(--spacing-3xl) 0;
}

.section-sm {
    padding: var(--spacing-lg) 0;
}

.section-lg {
    padding: 60px 0;
}

/* ===== Typography Utilities ===== */
.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-muted {
    color: var(--color-text-muted);
}

.text-primary {
    color: var(--color-primary);
}

/* ===== Spacing Utilities ===== */
.mt-xs { margin-top: var(--spacing-xs); }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }
.mt-2xl { margin-top: var(--spacing-2xl); }

.mb-xs { margin-bottom: var(--spacing-xs); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }
.mb-2xl { margin-bottom: var(--spacing-2xl); }

/* ===== Arrow Links ===== */
.arrow-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--color-primary);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    transition: gap var(--transition-base), color var(--transition-fast);
}

.arrow-link:hover {
    gap: 12px;
    color: var(--color-accent);
    text-decoration: none;
}

.arrow-link::after {
    content: '→';
}

.arrow-link-back::before {
    content: '←';
}

.arrow-link-back::after {
    content: '';
}

/* ===== Responsive Utilities ===== */
@media (max-width: 768px) {
    .callout {
        padding: var(--spacing-md);
    }

    .btn-lg {
        padding: 10px 24px;
        font-size: var(--font-size-base);
    }
}

/* ===== Print Styles ===== */
@media print {
    .btn,
    .callout {
        box-shadow: none;
    }
}