/* ============================================================
   lib/styles/global.css — Filtra-Core 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 — Primary Palette */
    --color-dark-blue: #0A192F;      /* Headers, Primary CTAs, Footers */
    --color-sea-blue: #0077B6;       /* Hover states, Accents */
    --color-light-blue: #E0FBFC;     /* Soft shading, Borders */
    --color-white: #FFFFFF;          /* Backgrounds, Clean space */

    /* Neutral Palette */
    --color-dark-charcoal: #1F2937;
    --color-medium-gray: #6B7280;
    --color-light-gray: #F3F4F6;

    /* Semantic / Status */
    --color-success: #10B981;
    --color-error: #EF4444;
    --color-warning: #F97316;

    /* Hover / Interactive Variants */
    --color-primary-hover: var(--color-sea-blue);
    --color-primary-active: #023E8A;

    /* Typography */
    --font-heading: 'Montserrat', 'Helvetica Neue', Arial, 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 — Mobile First */
    --fs-h1: 32px;
    --fs-h2: 28px;
    --fs-h3: 20px;
    --fs-h4: 20px;

    /* Body Sizes */
    --fs-body: 15px;
    --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-heading-4: 1.5;
    --lh-body: 1.6;
    --lh-small: 1.5;
    --lh-label: 1.4;

    /* Letter Spacing */
    --ls-h1: -1px;
    --ls-h2: -0.5px;
    --ls-button: 0.5px;

    /* 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-massive: 80px;
    --space-max: 96px;

    /* Container Padding — Mobile First */
    --container-padding: 24px;

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

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

    /* Shadows */
    --shadow-card: 0px 4px 6px rgba(10, 25, 47, 0.05);
    --shadow-card-hover: 0px 12px 24px rgba(10, 25, 47, 0.1);
    --shadow-btn-hover: 0px 4px 12px rgba(0, 119, 182, 0.2);

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

    /* Focus Outline */
    --focus-outline: 3px solid var(--color-sea-blue);
    --focus-offset: 4px;
}

/* ==========================================================================
   2. BOX MODEL & BASE HTML
   ========================================================================== */

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

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

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

/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-dark-blue);
    font-weight: var(--fw-bold);
    margin-bottom: var(--space-lg);
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-heading-1); letter-spacing: var(--ls-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-heading-2); letter-spacing: var(--ls-h2); margin-top: var(--space-2xl); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-heading-3); font-weight: var(--fw-semibold); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-heading-4); font-weight: var(--fw-semibold); }

p { max-width: 70ch; margin-bottom: var(--space-md); }
strong, b { font-weight: var(--fw-semibold); color: var(--color-dark-blue); }

a {
    color: var(--color-sea-blue);
    text-decoration: none;
    transition: color var(--transition-normal);
}
a:hover { color: var(--color-dark-blue); }
a:focus-visible { outline: var(--focus-outline); outline-offset: var(--focus-offset); border-radius: var(--radius-sm); }

/* ==========================================================================
   4. UTILITY CLASSES (BEM-friendly helpers)
   ========================================================================== */

.text-primary { color: var(--color-dark-blue); }
.text-accent { color: var(--color-sea-blue); }
.text-muted { color: var(--color-medium-gray); }

.bg-primary { background-color: var(--color-dark-blue); color: var(--color-white); }
.bg-light { background-color: var(--color-light-blue); }
.bg-white { background-color: var(--color-white); }

.text-center { text-align: center; }
.w-full { width: 100%; }

.container {
    width: 100%;
    max-width: var(--max-content-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}