/* ============================================================
   lib/styles/global.css — Healthcare Migration Global Styles
   Layer 1: CSS custom properties, resets, base typography,
   and utility classes. Loaded first in index.html.
   ============================================================ */

/* ==========================================================================
   1. CSS CUSTOM PROPERTIES (Design Tokens)
   ========================================================================== */

:root {
    /* Brand Colors */
    --color-trust-blue: #0B3C5D;
    /* Primary: Headers, primary actions */
    --color-calm-teal: #1F8A70;
    /* Secondary: Care, support, UI accents */
    --color-calm-teal-light: #44ccaa;
    /* Secondary: Care, support, UI accents */

    /* Neutral Palette */
    --color-off-white: #F5F7FA;
    /* Backgrounds: Clean but soft */
    --color-charcoal: #2D3139;
    /* Primary body text */
    --color-soft-grey: #A0A8B5;
    /* Secondary text, borders, dividers */
    --color-white: #FFFFFF;
    /* Surface colors (cards, forms) */

    /* Semantic / Status Colors */
    --color-success: #2E8540;
    /* Positive states */
    --color-warning: #F2A33C;
    /* Alerts, pending */
    --color-error: #C43E3E;
    /* Critical errors only */

    /* Interactive Variants */
    --color-trust-blue-hover: #082D46;
    --color-calm-teal-hover: #176B57;

    /* Typography */
    --font-primary: 'Inter', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Font Weights */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* Heading Sizes — Mobile First (scales up in responsive CSS) */
    --fs-h1: 32px;
    --fs-h2: 24px;
    --fs-h3: 20px;
    --fs-h4: 18px;

    /* Body Sizes */
    --fs-body: 16px;
    --fs-small: 14px;
    --fs-label: 13px;

    /* Line Heights */
    --lh-heading: 1.25;
    --lh-body: 1.6;
    --lh-dense: 1.4;

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

    /* Container Padding */
    --container-padding: 24px;

    /* Max Content Width */
    --max-content-width: 1200px;
    /* Slightly narrower for readability */

    /* Border Radius (Healthcare brand: rounded, warm, not sharp) */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;

    /* Shadows (Subtle, professional) */
    --shadow-card: 0px 2px 8px rgba(11, 60, 93, 0.08);
    --shadow-dropdown: 0px 8px 24px rgba(11, 60, 93, 0.12);
    --shadow-nav: 0px 1px 4px rgba(0, 0, 0, 0.05);

    /* Transitions */
    --transition-fast: 150ms ease-out;
    --transition-normal: 200ms ease-out;

    /* Motion Tokens */
    --motion-fast: 150ms ease-out;
    --motion-medium: 300ms cubic-bezier(0.16, 1, 0.3, 1);
    --motion-slow: 600ms cubic-bezier(0.16, 1, 0.3, 1);
    --motion-stagger-gap: 100ms;

    /* Focus Outline (Accessibility) */
    --focus-outline: 2px solid var(--color-calm-teal);
    --focus-offset: 3px;

    /* Z-Index Scale */
    --z-base: 0;
    --z-above: 10;
    --z-navbar: 100;
    --z-overlay: 200;
    --z-modal: 300;
}

/* ==========================================================================
   2. BOX MODEL RESET
   ========================================================================== */

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

/* ==========================================================================
   3. BASE HTML
   ========================================================================== */

html {
    font-size: 16px;
    /* Removed scroll-behavior: smooth to prevent conflict with Lenis */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: var(--font-primary);
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body);
    color: var(--color-charcoal);
    background-color: var(--color-off-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* ==========================================================================
   4. TYPOGRAPHY — BASE
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-primary);
    color: var(--color-trust-blue);
    font-weight: var(--fw-bold);
    line-height: var(--lh-heading);
    margin-bottom: var(--space-md);
}

h1 {
    font-size: var(--fs-h1);
    letter-spacing: -0.02em;
}

h2 {
    font-size: var(--fs-h2);
    letter-spacing: -0.01em;
    margin-top: var(--space-xl);
}

h3 {
    font-size: var(--fs-h3);
    font-weight: var(--fw-semibold);
    margin-top: var(--space-lg);
}

h4 {
    font-size: var(--fs-h4);
    font-weight: var(--fw-semibold);
}

p {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--color-charcoal);
    margin-bottom: var(--space-md);
    max-width: 70ch;
    /* Optimal reading length */
}

small {
    font-size: var(--fs-small);
    line-height: var(--lh-dense);
    color: var(--color-soft-grey);
}

strong,
b {
    font-weight: var(--fw-semibold);
    color: var(--color-trust-blue);
}

/* ==========================================================================
   5. LINKS
   ========================================================================== */

a {
    color: var(--color-trust-blue);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 4px;
    transition: all var(--transition-normal);
}

a:hover {
    color: var(--color-calm-teal);
    text-decoration-color: var(--color-calm-teal);
}

a:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-offset);
    border-radius: var(--radius-sm);
}

/* ==========================================================================
   6. LISTS
   ========================================================================== */

ul,
ol {
    padding-left: var(--space-lg);
    margin-bottom: var(--space-md);
}

li {
    margin-bottom: var(--space-sm);
    line-height: var(--lh-body);
    color: var(--color-charcoal);
}

/* ==========================================================================
   7. IMAGES & MEDIA
   ========================================================================== */

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

img {
    object-fit: cover;
}

/* ==========================================================================
   8. FORMS — BASE RESETS
   ========================================================================== */

input,
textarea,
select,
button {
    font-family: inherit;
    font-size: inherit;
    color: var(--color-charcoal);
}

button {
    cursor: pointer;
    border: none;
    background: none;
}

/* ==========================================================================
   9. HORIZONTAL RULE
   ========================================================================== */

hr {
    border: none;
    border-top: 1px solid #E2E8F0;
    /* Soft divider */
    margin: var(--space-2xl) 0;
}

/* ==========================================================================
   10. SELECTION
   ========================================================================== */

::selection {
    background-color: var(--color-calm-teal);
    color: var(--color-white);
}

/* ==========================================================================
   11. SCROLLBAR
   ========================================================================== */

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-off-white);
}

::-webkit-scrollbar-thumb {
    background: var(--color-soft-grey);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-trust-blue);
}

/* ==========================================================================
   12. UTILITY CLASSES
   ========================================================================== */

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

/* Text Colors */
.text-trust-blue {
    color: var(--color-trust-blue);
}

.text-calm-teal {
    color: var(--color-calm-teal);
}

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

.text-soft-grey {
    color: var(--color-soft-grey);
}

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

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

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

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

/* Background Colors */
.bg-trust-blue {
    background-color: var(--color-trust-blue);
}

.bg-calm-teal {
    background-color: var(--color-calm-teal);
}

.bg-off-white {
    background-color: var(--color-off-white);
}

.bg-white {
    background-color: var(--color-white);
}

/* Text Alignment & Weights */
.text-center {
    text-align: center;
}

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

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

.fw-regular {
    font-weight: var(--fw-regular);
}

.fw-medium {
    font-weight: var(--fw-medium);
}

.fw-semibold {
    font-weight: var(--fw-semibold);
}

.fw-bold {
    font-weight: var(--fw-bold);
}

/* Layout Utilities */
.d-none {
    display: none;
}

.d-block {
    display: block;
}

.d-flex {
    display: flex;
}

.d-grid {
    display: grid;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

/* Max Width Wrapper */
.container {
    width: 100%;
    max-width: var(--max-content-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

/* ==========================================================================
   13. MOTION & AOS OVERRIDES
   ========================================================================== */

/* Override default AOS translate distances to be smaller (professional) */
[data-aos="fade-up"] {
    transform: translate3d(0, 20px, 0);
}

[data-aos="fade-down"] {
    transform: translate3d(0, -20px, 0);
}

[data-aos="fade-left"] {
    transform: translate3d(20px, 0, 0);
}

[data-aos="fade-right"] {
    transform: translate3d(-20px, 0, 0);
}

/* Ensure ending state is always 0 transform */
[data-aos^="fade"][data-aos^="fade"].aos-animate {
    transform: translate3d(0, 0, 0);
}

/* ==========================================================================
   14. ACCESSIBILITY (REDUCED MOTION)
   ========================================================================== */

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

    /* Disable Lenis smooth scrolling via CSS */
    html.lenis,
    html.lenis body {
        height: auto;
        scroll-behavior: auto !important;
    }

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

    /* Disable AOS transformations and keep opacity normal */
    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}