/* ==========================================================================
   THACO — Global stylesheet (shared across all pages)
   Design tokens · base reset · responsive foundation
   --------------------------------------------------------------------------
   Convention for ALL sections (mobile-first, aligned with Bootstrap 5.3):
     Base   : < 576px    → mobile
     sm     : ≥ 576px    → large mobile
     md     : ≥ 768px    → tablet
     lg     : ≥ 992px    → small desktop / laptop
     xl     : ≥ 1200px   → desktop
     xxl    : ≥ 1400px   → large desktop (Figma reference width)
   Each new section: write base (mobile) styles first, then layer overrides
   with `@media (min-width: ...)` using the breakpoints above.
   Page-specific styles live in a CSS file named after the page (e.g.
   careers.html → careers.css).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens (sourced from Figma)
   -------------------------------------------------------------------------- */
:root {
    /* Brand colors */
    --color-primary: #00529c;       /* Primary/500 */
    --color-primary-400: #3385c7;   /* Primary/400 */
    --color-primary-25: #f3f8fc;    /* Primary/25  */
    --color-white: #ffffff;

    /* Text */
    --color-text-strong: #171717;   /* text/strong-950 */
    --color-text-sub: #5c5c5c;      /* text/sub-600    */

    /* Neutrals */
    --color-neutral-900: #111827;   /* Neutral/900 */
    --color-neutral-700: #374151;   /* Neutral/700 */
    --color-neutral-500: #6b7280;   /* Neutral/500 */
    --color-neutral-200: #e5e7eb;   /* Neutral/200 */
    --color-neutral-100: #f3f4f6;   /* Neutral/100 */
    --color-neutral-50: #f9fafb;    /* Neutral/50  */
    --color-black: #12091e;         /* Black       */
    --color-primary-50: #e6f0f8;    /* Primary/50  */

    /* Hero gradient overlay (kept for reference; baked into hero-banner.png) */
    --hero-overlay-top: rgba(15, 28, 63, 0.43);
    --hero-overlay-bottom: rgba(13, 72, 161, 0.30);

    /* Layout */
    --container-max: 1440px;        /* Figma content width */

    /* Typography */
    --font-base: 'SVN-Gotham', "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* Breakpoints (reference values — usable via JS / documentation) */
    --bp-sm: 576px;
    --bp-md: 768px;
    --bp-lg: 992px;
    --bp-xl: 1200px;
    --bp-xxl: 1400px;
}

/* --------------------------------------------------------------------------
   2. Base reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font-base);
    color: #1a1a1a;
    background-color: var(--color-white);
}

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