/* ─── Google Fonts: Inter ───────────────────────────────────────────────────
   Loaded here as @import so any page that includes variables.css gets the
   font automatically, even if the <link> tag in the HTML is missing.
   The <link> preconnect tags in each HTML <head> are still recommended
   for fastest load — they start the DNS/TLS handshake earlier than @import.
   ────────────────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
    /* ── Typography ────────────────────────────────────────────────────────── */
    --font-family-base: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
        'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    /* ── Brand colors ──────────────────────────────────────────────────────── */
    --color-primary:        #0F6FBF;
    --color-primary-hover:  #0B5FA5;

    --color-dark-text:      #1E293B;
    --color-secondary-text: #64748B;

    --color-border:         #E2E8F0;
    --color-background:     #F8FAFC;

    --color-success:        #10B981;
    --color-warning:        #F59E0B;
    --color-error:          #EF4444;

    --color-white:          #FFFFFF;
}

/* ─── Base typography reset ─────────────────────────────────────────────────
   Applied once here so every page that loads variables.css inherits it.
   ────────────────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    /* Prevent iOS from auto-scaling text on orientation change */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: var(--font-family-base);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-dark-text);
    background-color: var(--color-white);
    margin: 0;
    padding: 0;
    /* Crisp subpixel rendering on macOS */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

:focus {
    outline: none;
}

:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 3px;
}