/* =========================================================
   PXM SOFTWARE SOLUTIONS
   Core Design System

   File: pxm-core.css

   Purpose:
   Global variables, typography, colors, base HTML elements,
   resets, accessibility defaults, and shared design tokens.
   ========================================================= */


/* =========================================================
   Google Font

   Manrope is loaded from the HTML document.
   This file only defines how the font is used.
   ========================================================= */


/* =========================================================
   Design Tokens
   ========================================================= */

:root {
    /* -----------------------------------------------------
       Primary Brand Colors
       ----------------------------------------------------- */

    --pxm-navy: #06162f;
    --pxm-navy-deep: #020b1c;
    --pxm-navy-light: #0b2b59;
    --pxm-blue: #2563eb;
    --pxm-blue-hover: #1d4ed8;
    --pxm-blue-bright: #3b82f6;
    --pxm-light-blue: #eef6ff;
    --pxm-light-blue-deep: #e5f1ff;
    --pxm-white: #ffffff;
    /* -----------------------------------------------------
       Text Colors
       ----------------------------------------------------- */

    --pxm-text-primary: #0b1f3a;
    --pxm-text-secondary: #53657d;
    --pxm-text-muted: #708197;
    --pxm-text-light: #d8e4f4;
    --pxm-text-light-muted: #9fb1c9;
    /* -----------------------------------------------------
       Borders
       ----------------------------------------------------- */

    --pxm-border: #dce7f4;
    --pxm-border-light: #e9f0f8;
    --pxm-border-dark: rgba(255, 255, 255, 0.12);
    /* -----------------------------------------------------
       Backgrounds
       ----------------------------------------------------- */

    --pxm-bg-dark: var(--pxm-navy);
    --pxm-bg-light-blue: var(--pxm-light-blue);
    --pxm-bg-white: var(--pxm-white);
    /* -----------------------------------------------------
       Shadows
       ----------------------------------------------------- */

    --pxm-shadow-sm: 0 8px 24px rgba(15, 45, 85, 0.06);
    --pxm-shadow: 0 18px 48px rgba(15, 45, 85, 0.10);
    --pxm-shadow-lg: 0 28px 70px rgba(15, 45, 85, 0.16);
    /* -----------------------------------------------------
       Border Radius
       ----------------------------------------------------- */

    --pxm-radius-sm: 8px;
    --pxm-radius-md: 14px;
    --pxm-radius-lg: 20px;
    --pxm-radius-xl: 28px;
    /* -----------------------------------------------------
       Typography
       ----------------------------------------------------- */

    --pxm-font-primary: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    /* -----------------------------------------------------
       Layout Width
       ----------------------------------------------------- */

    --pxm-content-max-width: 1320px;
    /* -----------------------------------------------------
       Transitions
       ----------------------------------------------------- */

    --pxm-transition-fast: 180ms ease;
    --pxm-transition: 280ms cubic-bezier( 0.2, 0.7, 0.3, 1 );
    --pxm-transition-slow: 500ms cubic-bezier( 0.2, 0.7, 0.3, 1 );
}


/* =========================================================
   Box Sizing
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}


/* =========================================================
   HTML
   ========================================================= */

html {
    scroll-behavior: smooth;
}


/* =========================================================
   Body
   ========================================================= */

body {
    margin: 0;
    font-family: var(--pxm-font-primary);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.7;
    color: var(--pxm-text-primary);
    background: var(--pxm-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* =========================================================
   Typography
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    color: var(--pxm-text-primary);
    font-family: var(--pxm-font-primary);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.035em;
}


h1 {
    font-size: clamp( 3rem, 6vw, 5.5rem );
}


h2 {
    font-size: clamp( 2.2rem, 4vw, 3.6rem );
}


h3 {
    font-size: clamp( 1.25rem, 2vw, 1.55rem );
}


h4 {
    font-size: 1.15rem;
}


p {
    margin-top: 0;
    margin-bottom: 1rem;
    color: var(--pxm-text-secondary);
}


/* =========================================================
   Links
   ========================================================= */

a {
    color: var(--pxm-blue);
    text-decoration: none;
    transition: color var(--pxm-transition-fast), opacity var(--pxm-transition-fast);
}


    a:hover,
    a:focus {
        color: var(--pxm-blue-hover);
    }


/* =========================================================
   Images
   ========================================================= */

img {
    display: block;
    max-width: 100%;
    height: auto;
}


/* =========================================================
   Lists
   ========================================================= */

ul,
ol {
    margin-top: 0;
}


/* =========================================================
   Buttons

   Bootstrap buttons will inherit our font.
   Component-specific button styling will live in
   pxm-components.css.
   ========================================================= */

button,
input,
textarea,
select {
    font-family: var(--pxm-font-primary);
}


/* =========================================================
   Form Elements
   ========================================================= */

input,
textarea,
select {
    color: var(--pxm-text-primary);
}


/* =========================================================
   Selection
   ========================================================= */

::selection {
    color: #ffffff;
    background: var(--pxm-blue);
}


/* =========================================================
   Focus Styles

   Important for keyboard accessibility.
   ========================================================= */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.45);
    outline-offset: 3px;
}


/* =========================================================
   Shared Text Classes
   ========================================================= */

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


.pxm-text-secondary {
    color: var(--pxm-text-secondary);
}


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


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


/* =========================================================
   Eyebrow Text

   Used above major headings.
   ========================================================= */

.pxm-eyebrow {
    display: inline-block;
    margin-bottom: 1rem;
    color: var(--pxm-blue);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}


/* =========================================================
   Highlighted Heading Text
   ========================================================= */

.pxm-heading-accent {
    color: var(--pxm-blue);
}


/* =========================================================
   Shared Lead Text
   ========================================================= */

.pxm-lead {
    max-width: 720px;
    font-size: clamp( 1.05rem, 1.5vw, 1.2rem );
    line-height: 1.75;
}


/* =========================================================
   Accessible Screen Reader Text

   Bootstrap also provides visually-hidden, but this gives us
   a PXM-specific utility where needed.
   ========================================================= */

.pxm-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect( 0, 0, 0, 0 ) !important;
    white-space: nowrap !important;
    border: 0 !important;
}


/* =========================================================
   Reduced Motion

   We will have animation throughout the site, but visitors
   who request reduced motion should get a stable experience.
   ========================================================= 

@media ( prefers-reduced-motion: reduce ) {

    html {
        scroll-behavior: auto;
    }


    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}*/