/* ==========================================================================
   Base & Variables – Optimised & Organised
   ==========================================================================
   This single file centralises design tokens (colours, spacing, typography),
   houses a lightweight reset, and exposes small utility rules that other
   component‑level stylesheets can rely on.
   --------------------------------------------------------------------------*/

/* -------------------------------------------------------------------------
   1. DESIGN TOKENS  –  All raw values live here
   -------------------------------------------------------------------------*/
:root {
    /* Typography */
    --font-global: 'Inter', sans-serif;

    /* Brand Palette */
    --color-primary: #131e2f; /* Dark navy */
    --color-accent:  #ff6a5a; /* Coral */

    /* Neutral & Text Palette */
    --neutral-100: #f5f7fa; /* Soft off‑white */
    --neutral-200: #e0e3e8; /* Light grey */
    --text-900:    #ffffff; /* White */
    --text-800:    #9f9f9f; /* Muted grey text */
    --text-700:    #2e3a45; /* Charcoal */
    --text-600:    #000000; /* Black */

    /* Spacing – 4‑pt scale */
    --spacing-xs:  0.25rem; /* 4px */
    --spacing-sm:  0.5rem;  /* 8px */
    --spacing-md:  1rem;    /* 16px */
    --spacing-lg:  1.5rem;  /* 24px */
    --spacing-xl:  2rem;    /* 32px */
    --spacing-xxl: 2.5rem;  /* 40px */

    /* Layout */
    --navbar-height: 4.5rem;
    
    /* Viewport Heights - Mobile-friendly with fallbacks */
    --vh-fallback: 100vh;
    --vh-dynamic: 100vh; /* Will be updated by JavaScript */
    --vh-small: 100svh;   /* Small viewport height (excluding mobile UI) */
    --vh-large: 100lvh;   /* Large viewport height (including mobile UI) */
    --vh-dynamic-fallback: 100dvh; /* Dynamic viewport height */

    /* Layers */
    --z-navbar:   1000;
    --z-overlay:  900;
}

/* -------------------------------------------------------------------------
   2. GLOBAL RESET  –  Opinionated but minimal
   -------------------------------------------------------------------------*/
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;       /* lovely native scroll */
    -webkit-text-size-adjust: 100%;/* stop font boosting */
}

body {
    font-family: var(--font-global), serif;
    line-height: 1.5;
    background: var(--neutral-100);
    color: var(--color-primary);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

[hidden] {display:none !important;}

/* -------------------------------------------------------------------------
   3. ELEMENT DEFAULTS  –  sensible cross‑browser tweaks
   -------------------------------------------------------------------------*/
a {
    color: inherit;
    text-decoration: none;
}

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


/* -------------------------------------------------------------------------
   4. LAYOUT HELPERS  –  high‑level app scaffolding
   -------------------------------------------------------------------------*/
.page-content { margin-top: var(--navbar-height); }

section {
    padding-block: var(--spacing-lg);
    padding-inline: var(--spacing-md);
    scroll-margin-top: var(--navbar-height);
}

/* -------------------------------------------------------------------------
   5. ACCESSIBILITY  –  be respectful of user preferences
   -------------------------------------------------------------------------*/
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}