/* ==========================================================================
   VELORA FITNESS — BASE STYLESHEET
   Variables, reset, typography, layout primitives, and shared components.
   No media queries here — see mobile.css / desktop.css for breakpoints.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. VARIABLES
   -------------------------------------------------------------------------- */
:root {

    /* Colors */
    --color-primary: #111111;
    --color-background: #FFFFFF;
    --color-accent: #2563EB;
    --color-accent-hover: #1D4ED8;
    --color-gray: #F5F7FA;
    --color-text: #202124;
    --color-white: #FFFFFF;
    --color-overlay: rgba(17, 17, 17, 0.6);

    /* Typography */
    --font-heading: 'Sora', sans-serif;
    --font-body: 'Inter', sans-serif;

    /* Spacing scale (8px system) */
    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-5: 40px;
    --space-6: 48px;
    --space-8: 64px;
    --space-10: 80px;
    --space-15: 120px;

    /* Radius */
    --radius-base: 16px;
    --radius-card: 20px;
    --radius-button: 999px;

    /* Layout */
    --container-width: 1280px;
    --container-padding: var(--space-2);

    /* Motion */
    --duration: 0.4s;
    --ease: ease;

    /* Nav height (referenced by hero/page-top spacing) */
    --nav-height: 84px;
}


/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    color: var(--color-text);
    background-color: var(--color-background);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

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

a {
    color: inherit;
    text-decoration: none;
}

ul,
ol {
    list-style: none;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    cursor: pointer;
}

/* Respect users who prefer reduced motion */
@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;
    }
}


/* --------------------------------------------------------------------------
   3. TYPOGRAPHY
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.2;
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.5rem;
}

p {
    font-family: var(--font-body);
    font-size: 1rem;
}


/* --------------------------------------------------------------------------
   4. LAYOUT / CONTAINER
   -------------------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container-width);
    margin-inline: auto;
    padding-inline: var(--container-padding);
}


/* --------------------------------------------------------------------------
   5. ACCESSIBILITY UTILITIES
   -------------------------------------------------------------------------- */

/* Skip-to-content link — hidden until keyboard-focused */
.skip-link {
    position: absolute;
    top: -100px;
    left: var(--space-2);
    background: var(--color-primary);
    color: var(--color-white);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-base);
    z-index: 1000;
    transition: top var(--duration) var(--ease);
}

.skip-link:focus {
    top: var(--space-2);
}

/* Visually hidden but still announced by screen readers */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Consistent, visible focus state for keyboard users across the site */
a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: var(--radius-base);
}


/* --------------------------------------------------------------------------
   6. COMPONENTS — BUTTONS
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-button);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1rem;
    transition: background-color var(--duration) var(--ease),
                color var(--duration) var(--ease),
                box-shadow var(--duration) var(--ease),
                transform var(--duration) var(--ease);
    box-shadow: 0 4px 14px rgba(17, 17, 17, 0.1);
}

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

.btn--primary:hover {
    background-color: var(--color-accent);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.35);
    transform: translateY(-2px);
}

.btn--outline {
    background-color: transparent;
    color: var(--color-primary);
    border: 1.5px solid var(--color-primary);
    box-shadow: none;
}

.btn--outline:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}

/* Light outline variant — for use on dark backgrounds (e.g. hero) */
.btn--outline-light {
    background-color: transparent;
    color: var(--color-white);
    border: 1.5px solid var(--color-white);
    box-shadow: none;
}

.btn--outline-light:hover {
    background-color: var(--color-white);
    color: var(--color-primary);
}