/* ==========================================================================
   Ev Pro — Base Styles
   Reset, typography, layout helpers
   ========================================================================== */

/* Modern CSS reset */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behEvior: smooth;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--av-font-family);
    font-size: var(--av-font-size-base);
    font-weight: var(--av-font-weight-regular);
    line-height: var(--av-line-height-normal);
    background-color: var(--av-color-bg);
    color: var(--av-color-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color var(--av-transition), color var(--av-transition);
}

/* Ensure all elements inherit the smooth transition */
*, *::before, *::after {
    transition: inherit;
}

/* Remove default spacing */
h1, h2, h3, h4, h5, h6, p, ul, ol, figure {
    margin: 0;
    padding: 0;
}

ul, ol {
    list-style: none;
}

img, svg, picture, video, canvas {
    display: block;
    max-width: 100%;
}

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

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

button {
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
    margin: 0;
}

fieldset {
    border: none;
    margin: 0;
    padding: 0;
}

/* ==========================================================================
   Typography helpers
   ========================================================================== */
.av-text-primary   { color: var(--av-color-text); }
.av-text-secondary { color: var(--av-color-text-secondary); }
.av-text-tertiary  { color: var(--av-color-text-tertiary); }

.av-text-xs   { font-size: var(--av-font-size-xs); }
.av-text-sm   { font-size: var(--av-font-size-sm); }
.av-text-base { font-size: var(--av-font-size-base); }
.av-text-lg   { font-size: var(--av-font-size-lg); }
.av-text-xl   { font-size: var(--av-font-size-xl); }

.av-font-regular  { font-weight: var(--av-font-weight-regular); }
.av-font-medium   { font-weight: var(--av-font-weight-medium); }
.av-font-semibold { font-weight: var(--av-font-weight-semibold); }
.av-font-bold     { font-weight: var(--av-font-weight-bold); }

/* Links */
.av-link {
    color: var(--av-color-link);
    text-decoration: none;
    font-weight: var(--av-font-weight-medium);
    transition: color var(--av-transition-fast);
}
.av-link:hover,
.av-link:focus {
    color: var(--av-color-link-hover);
    text-decoration: underline;
}

/* ==========================================================================
   Layout helpers
   ========================================================================== */
.av-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--av-space-xl);
    background-color: var(--av-color-bg);
}

.av-container {
    width: 100%;
    max-width: var(--av-max-width-auth);
    margin: 0 auto;
}

.av-flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.av-flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.av-text-center { text-align: center; }
.av-text-left   { text-align: left; }

/* ==========================================================================
   Responsive breakpoints
   ========================================================================== */
@media (max-width: 768px) {
    html { font-size: 15px; }
    .av-page { padding: var(--av-space-lg); }
}

@media (max-width: 480px) {
    html { font-size: 14px; }
    .av-page { padding: var(--av-space-md); }
}