/* ============================================
   Base Styles - SchoolSelect
   Global overrides using design tokens
   ============================================ */

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family-body);
    color: var(--color-text);
    line-height: var(--line-height-normal);
    background-color: var(--color-gray-50);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
    line-height: var(--line-height-tight);
}

h1, .h1 { font-size: var(--font-size-4xl); }
h2, .h2 { font-size: var(--font-size-3xl); }
h3, .h3 { font-size: var(--font-size-2xl); }
h4, .h4 { font-size: var(--font-size-xl); }
h5, .h5 { font-size: var(--font-size-lg); }

/* Links */
a {
    color: var(--color-text-link);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-text-link-hover);
}

/* Content wrapper */
.content-wrapper {
    flex: 1;
    width: 100%;
    position: relative;
}

/* Focus ring override */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus,
.form-select:focus {
    box-shadow: 0 0 0 3px rgba(54, 113, 224, 0.25);
    outline: none;
}

/* Section spacing utilities */
.section-padding {
    padding: var(--space-16) 0;
}

.section-padding-sm {
    padding: var(--space-10) 0;
}

.section-padding-lg {
    padding: var(--space-20) 0;
}

/* Selection color */
::selection {
    background-color: var(--color-primary-100);
    color: var(--color-primary-800);
}

/* Text utilities */
.text-primary {
    color: var(--color-primary) !important;
}

.text-accent {
    color: var(--color-accent) !important;
}

.text-muted {
    color: var(--color-text-secondary) !important;
}

/* Background utilities */
.bg-primary-50 {
    background-color: var(--color-primary-50) !important;
}

.bg-accent-50 {
    background-color: var(--color-accent-50) !important;
}

.bg-surface {
    background-color: var(--color-surface) !important;
}

/* Small text */
small, .small {
    font-size: var(--font-size-sm);
}

/* Responsive font sizing */
@media (max-width: 768px) {
    h1, .h1 { font-size: var(--font-size-3xl); }
    h2, .h2 { font-size: var(--font-size-2xl); }
    h3, .h3 { font-size: var(--font-size-xl); }
}