/* ==============================================
   OnPagePilot Custom Design System
   Version: 1.0
   Last Updated: 2025-01-15

   THIS CSS FILE IS OUR BRAND.

   Our UX/UI Designer has the FINAL voice.

   This file is "FROZEN" until she requests changes.
   Once updated, it is FROZEN again.

   Note: Any unapproved tweak? That’s our AI having fun.
   ============================================== */

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

/* ==============================================
   COLOR PALETTE
   ============================================== */

/* CSS Variables for easy reuse */
:root {
    /* Primary Colors */
    --primary-main: #303A49;
    --primary-50: #9ABDFF;
    --primary-100: #5176A6;
    --primary-200: #0F1826;
    /* Secondary Colors */
    --secondary-main: #F39C12;
    --secondary-50: #FFF5C9;
    --secondary-100: #EBA947;
    --secondary-200: #C68119;
    /* Green Colors */
    --green-main: #4DAF82;
    --green-50: #A2DFB5;
    --green-100: #58D08F;
    --green-200: #2B8653;
    /* Base Colors */
    --dark: #191F;
    --white: #FFFFFF;
    /* Gray Scale */
    --gray-50: #B8E6F6;
    --gray-400: #9CA3AF;
    --gray-500: #687C8B;
    --gray-900: #1B237;
}

/* ==============================================
   TYPOGRAPHY SETTINGS
   ============================================== */

html, body {
    height: 100%;
}

/* Base Typography */
body {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;

    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Headings - Use Montserrat */
h1, h2, h3, .h1, .h2, .h3 {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-weight: 600;
}

/* Screen Title (38px/48px) */
h1, .h1, .screen-title {
    font-size: 38px !important;
    line-height: 48px !important;
    font-weight: 600 !important;
    font-family: 'Montserrat', sans-serif !important;
}

/* Section Title (24px/32px) */
h4, .h4, .section-title {
    font-size: 24px !important;
    line-height: 32px !important;
    font-weight: 600 !important;
    font-family: 'Poppins', sans-serif !important;
}

/* Other Heading Sizes */
h2, .h2 {
    font-size: 32px;
    line-height: 40px;
}

h3, .h3 {
    font-size: 28px;
    line-height: 36px;
}

h5, .h5 {
    font-size: 20px;
    line-height: 28px;
}

h6, .h6 {
    font-size: 18px;
    line-height: 26px;
}

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

/* Background Colors - Primary */
.bg-primary-main {
    background-color: #303A49 !important;
}

.bg-primary-50 {
    background-color: #9ABDFF !important;
}

.bg-primary-100 {
    background-color: #5176A6 !important;
}

.bg-primary-200 {
    background-color: #0F1826 !important;
}

/* Background Colors - Secondary */
.bg-secondary-main {
    background-color: #F39C12 !important;
}

.bg-secondary-50 {
    background-color: #FFF5C9 !important;
}

.bg-secondary-100 {
    background-color: #EBA947 !important;
}

.bg-secondary-200 {
    background-color: #C68119 !important;
}

/* Background Colors - Green */
.bg-green-main {
    background-color: #4DAF82 !important;
}

.bg-green-50 {
    background-color: #A2DFB5 !important;
}

.bg-green-100 {
    background-color: #58D08F !important;
}

.bg-green-200 {
    background-color: #2B8653 !important;
}

/* Text Colors - Primary */
.text-primary-main {
    color: #303A49 !important;
}

.text-primary-50 {
    color: #9ABDFF !important;
}

.text-primary-100 {
    color: #5176A6 !important;
}

.text-primary-200 {
    color: #0F1826 !important;
}

/* Text Colors - Secondary */
.text-secondary-main {
    color: #F39C12 !important;
}

.text-secondary-50 {
    color: #FFF5C9 !important;
}

.text-secondary-100 {
    color: #EBA947 !important;
}

.text-secondary-200 {
    color: #C68119 !important;
}

/* Text Colors - Green */
.text-green-main {
    color: #4DAF82 !important;
}

.text-green-50 {
    color: #A2DFB5 !important;
}

.text-green-100 {
    color: #58D08F !important;
}

.text-green-200 {
    color: #2B8653 !important;
}

/* ==============================================
   BUTTON OVERRIDES
   ============================================== */

/* Primary Button */
.btn-primary, .btn-primary-custom {
    background-color: #303A49 !important;
    border-color: #303A49 !important;
    color: white !important;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .btn-primary:hover, .btn-primary-custom:hover {
        background-color: #5176A6 !important;
        border-color: #5176A6 !important;
    }

/* Secondary Button */
.btn-secondary, .btn-secondary-custom {
    background-color: #F39C12 !important;
    border-color: #F39C12 !important;
    color: white !important;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .btn-secondary:hover, .btn-secondary-custom:hover {
        background-color: #EBA947 !important;
        border-color: #EBA947 !important;
    }

/* Success/Green Button */
.btn-success, .btn-green {
    background-color: #4DAF82 !important;
    border-color: #4DAF82 !important;
    color: white !important;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
}

    .btn-success:hover, .btn-green:hover {
        background-color: #58D08F !important;
        border-color: #58D08F !important;
    }

/* ==============================================
   TYPOGRAPHY UTILITY CLASSES
   ============================================== */

/* Font Family Classes */
.font-montserrat {
    font-family: 'Montserrat', sans-serif !important;
}

.font-poppins {
    font-family: 'Poppins', sans-serif !important;
}

/* Font Weight Classes */
.fw-light {
    font-weight: 300 !important;
}

.fw-normal {
    font-weight: 400 !important;
}

.fw-medium {
    font-weight: 500 !important;
}

.fw-semibold {
    font-weight: 600 !important;
}

.fw-bold {
    font-weight: 700 !important;
}

/* Font Size Classes */
.fs-12 {
    font-size: 12px !important;
}

.fs-14 {
    font-size: 14px !important;
}

.fs-16 {
    font-size: 16px !important;
}

.fs-18 {
    font-size: 18px !important;
}

.fs-20 {
    font-size: 20px !important;
}

.fs-24 {
    font-size: 24px !important;
}

.fs-32 {
    font-size: 32px !important;
}

.fs-38 {
    font-size: 38px !important;
}

/* Line Height Classes */
.lh-1 {
    line-height: 1 !important;
}

.lh-sm {
    line-height: 1.25 !important;
}

.lh-base {
    line-height: 1.5 !important;
}

.lh-lg {
    line-height: 2 !important;
}

/* ==============================================
   RESPONSIVE TYPOGRAPHY
   ============================================== */

@media (max-width: 768px) {
    h1, .h1, .screen-title {
        font-size: 28px !important;
        line-height: 36px !important;
    }

    h2, .h2 {
        font-size: 24px;
        line-height: 32px;
    }

    h4, .h4, .section-title {
        font-size: 20px !important;
        line-height: 28px !important;
    }
}