/* ============================================================
   lib/styles/global.css — JusticeMatters 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 (Strictly from Guidelines) */
    --color-justice-blue: #1F3D63;
    --color-guidance-teal: #1D7670;
    --color-support-gold: #F1B246;
    --color-alert-red: #C74242;
    --color-paper-white: #F7F7F5;
    --color-neutral-navy: #102030;


    /* Neutrals & States */
    --color-white: #FFFFFF;
    --color-light-grey: #E0E0DC;
    --color-mid-grey: #9CA3AF;
    /* Used for disabled states */


    /* Typography */
    --font-heading: 'IBM Plex Sans', 'Inter', -apple-system, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;


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


    /* Heading Sizes — 4px baseline grid */
    --fs-h1: 32px;
    --fs-h2: 24px;
    --fs-h3: 20px;
    --fs-h4: 18px;


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


    /* Line Heights */
    --lh-heading-1: 1.2;
    --lh-heading-2: 1.3;
    --lh-heading-3: 1.4;
    --lh-body: 1.5;
    --lh-small: 1.4;


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


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


    /* Max Content Width */
    --max-content-width: 1120px;


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


    /* Shadows (Subtle, professional) */
    --shadow-card: 0px 2px 4px rgba(16, 32, 48, 0.05);
    --shadow-card-hover: 0px 4px 12px rgba(16, 32, 48, 0.1);
    --shadow-nav: 0px 1px 3px rgba(16, 32, 48, 0.1);


    /* ==========================================================================
       MOTION TOKENS (Calm, disciplined, trustworthy)
       ========================================================================== */

    /* Durations */
    --motion-duration-fast: 150ms;
    /* Hovers, focus states, color shifts */
    --motion-duration-base: 300ms;
    /* Standard reveals, structural changes */
    --motion-duration-slow: 500ms;
    /* Large structural shifts */
    --motion-duration-vslow: 800ms;
    /* Scroll reveals (syncs with AOS init) */

    /* Easings (Editorial, non-bouncy) */
    --motion-ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
    /* Smooth general */
    --motion-ease-entrance: cubic-bezier(0.0, 0.0, 0.2, 1);
    /* Decelerates entering */
    --motion-ease-exit: cubic-bezier(0.4, 0.0, 1.0, 1.0);
    /* Accelerates exiting */

    /* Distances (Aligned to 4px spacing grid) */
    --motion-distance-xs: 4px;
    --motion-distance-sm: 8px;
    --motion-distance-md: 16px;
    --motion-distance-lg: 32px;

    /* Opacities */
    --motion-opacity-hidden: 0;
    --motion-opacity-dim: 0.6;
    --motion-opacity-visible: 1;

    /* Transition Composites */
    --transition-fast: var(--motion-duration-fast) var(--motion-ease-standard);
    --transition-normal: var(--motion-duration-base) var(--motion-ease-standard);
    --transition-slow: var(--motion-duration-slow) var(--motion-ease-standard);


    /* Focus Outline (WCAG Compliant) */
    --focus-outline: 2px solid var(--color-guidance-teal);
    --focus-offset: 2px;
}


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


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


/* ==========================================================================
   3. BASE HTML & LENIS SCROLL BEHAVIOR
   ========================================================================== */


html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Lenis global classes */
html.lenis {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

.lenis.lenis-scrolling iframe {
    pointer-events: none;
}

body {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body);
    color: var(--color-neutral-navy);
    background-color: var(--color-paper-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-heading);
    color: var(--color-justice-blue);
    font-weight: var(--fw-bold);
    margin-bottom: var(--space-md);
}


h1 {
    font-size: var(--fs-h1);
    line-height: var(--lh-heading-1);
}


h2 {
    font-size: var(--fs-h2);
    line-height: var(--lh-heading-2);
    margin-top: var(--space-xl);
}


h3 {
    font-size: var(--fs-h3);
    line-height: var(--lh-heading-3);
    font-weight: var(--fw-semibold);
    margin-top: var(--space-lg);
}


h4 {
    font-size: var(--fs-h4);
    font-weight: var(--fw-semibold);
    margin-bottom: var(--space-sm);
}


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


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


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


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


a {
    color: var(--color-guidance-teal);
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}


a:hover {
    color: var(--color-justice-blue);
    text-decoration-color: var(--color-justice-blue);
}


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-xs);
    line-height: var(--lh-body);
}


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


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


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


hr {
    border: none;
    border-top: 1px solid var(--color-light-grey);
    margin: var(--space-2xl) 0;
}


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


::selection {
    background-color: var(--color-support-gold);
    color: var(--color-neutral-navy);
}


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


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


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


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


::-webkit-scrollbar-thumb:hover {
    background: var(--color-mid-grey);
}


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


/* Accessibility — Screen Reader Only */
.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;
}


.sr-only--focusable:focus {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
}


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


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


.text-support-gold {
    color: var(--color-support-gold);
}


.text-alert-red {
    color: var(--color-alert-red);
}


.text-neutral-navy {
    color: var(--color-neutral-navy);
}


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


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


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


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


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


/* Typography Alignment & Weight */
.text-left {
    text-align: left;
}


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


.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);
}


/* Display & Flex */
.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-gap-sm {
    gap: var(--space-sm);
}


.flex-gap-md {
    gap: var(--space-md);
}


.flex-gap-lg {
    gap: var(--space-lg);
}


/* Layout Utilities */
.w-full {
    width: 100%;
}


.overflow-hidden {
    overflow: hidden;
}


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


/* Spacing Utilities */
.mt-sm {
    margin-top: var(--space-sm);
}


.mt-md {
    margin-top: var(--space-md);
}


.mt-lg {
    margin-top: var(--space-lg);
}


.mt-xl {
    margin-top: var(--space-xl);
}


.mt-2xl {
    margin-top: var(--space-2xl);
}


.mb-sm {
    margin-bottom: var(--space-sm);
}


.mb-md {
    margin-bottom: var(--space-md);
}


.mb-lg {
    margin-bottom: var(--space-lg);
}


.mb-xl {
    margin-bottom: var(--space-xl);
}


.mb-2xl {
    margin-bottom: var(--space-2xl);
}


/* Noscript Fallback */
.noscript-fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--space-3xl) var(--container-padding);
    text-align: center;
    background-color: var(--color-paper-white);
    color: var(--color-neutral-navy);
}


.noscript-fallback h1 {
    color: var(--color-justice-blue);
    margin-bottom: var(--space-md);
}


.noscript-fallback a {
    color: var(--color-guidance-teal);
}

/* ==========================================================================
   13. REDUCED MOTION POLICY (Accessibility)
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    :root {
        /* Neutralize motion duration and distances */
        --motion-duration-fast: 0ms !important;
        --motion-duration-base: 0ms !important;
        --motion-duration-slow: 0ms !important;
        --motion-duration-vslow: 0ms !important;
        --motion-distance-xs: 0px !important;
        --motion-distance-sm: 0px !important;
        --motion-distance-md: 0px !important;
        --motion-distance-lg: 0px !important;

        --transition-fast: 0ms !important;
        --transition-normal: 0ms !important;
        --transition-slow: 0ms !important;
    }

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

    /* Fallback for AOS elements to ensure they are visible immediately */
    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    /* Disable Lenis smooth scrolling for users preferring reduced motion */
    html.lenis,
    .lenis.lenis-smooth {
        scroll-behavior: auto !important;
    }
}