/* ===================================================
   BASE.CSS — Reset, Custom Properties, Typography
   =================================================== */

:root {
    /* Colors */
    --bg-primary: #0B0B0D;
    --bg-secondary: #131316;
    --accent-primary: #8B1E2D;
    --accent-hover: #B3263C;
    --accent-glow: rgba(139, 30, 45, 0.35);
    --text-primary: #F2F2F2;
    --text-secondary: #B3B3B3;
    --border-color: #2A2A2E;

    /* Typography */
    --font-main: 'Plus Jakarta Sans', sans-serif;
    --font-display: 'Space Grotesk', sans-serif;
    --h1-size: clamp(2.75rem, 4vw + 1.25rem, 4.75rem);
    --h2-size: clamp(2rem, 2.5vw + 1rem, 3rem);
    --h3-size: clamp(1.35rem, 1.4vw + 0.9rem, 1.9rem);
    --body-size: clamp(1rem, 0.35vw + 0.92rem, 1.08rem);
    --caption-size: 0.875rem;

    /* Spacing */
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 48px;
    --spacing-xl: 120px;

    /* Border Radius */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;

    /* Layout */
    --container-width: 1200px;
    --header-height: 80px;
    --gutter: 24px;
}

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

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-main);
    line-height: 1.6;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

button,
input,
textarea,
select {
    font: inherit;
}

:focus {
    outline: none;
}

:focus-visible {
    outline: 2px solid rgba(139, 30, 45, 0.95);
    outline-offset: 3px;
}

ul {
    list-style: none;
}

/* ---- Typography ---- */
h1, h2, h3, h4, h5, h6 {
    line-height: 1.2;
    margin-bottom: var(--spacing-sm);
}

h1 { font-size: var(--h1-size); font-weight: 700; }
h2 { font-size: var(--h2-size); font-weight: 600; }
h3 { font-size: var(--h3-size); font-weight: 600; }

p {
    font-size: var(--body-size);
    color: var(--text-secondary);
}

.text-accent   { color: var(--accent-primary); }
.text-secondary { color: var(--text-secondary); }

/* ---- Mobile Typography Override ---- */
@media (max-width: 768px) {
    :root {
        --h1-size: clamp(2.4rem, 8vw, 3.35rem);
        --h2-size: clamp(1.7rem, 5vw, 2.2rem);
        --spacing-xl: 80px;
    }
}