/**
 * Base Styles & Utilities
 * Foundation typography, spacing, and helper classes
 */

/* Typography */
body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--color-text);
}

h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl); }
h4 { font-size: var(--font-size-lg); }
h5 { font-size: var(--font-size-base); }
h6 { font-size: var(--font-size-sm); }

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

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

/* Buttons Base */
button,
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px; /* WCAG 2.5.8 minimum target size */
    min-width: 44px;
    padding: var(--spacing-sm) var(--spacing-md);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    cursor: pointer;
    border: none;
    background: none;
}

button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Primary Button */
.button-primary {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.button-primary:hover:not(:disabled) {
    background-color: var(--color-primary-hover);
}

/* Secondary Button */
.button-secondary {
    background-color: var(--color-gray-200);
    color: var(--color-text);
}

.button-secondary:hover:not(:disabled) {
    background-color: var(--color-gray-300);
}

/* Icon Button */
.button-icon {
    min-width: 44px;
    padding: var(--spacing-sm);
    border-radius: var(--radius-full);
}