/* base.css — Reset & Element Defaults */

@layer reset {
    *, *::before, *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    html {
        font-family: var(--font-sans);
        font-size: 16px;
        line-height: 1.6;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    body {
        background: var(--bg-main);
        color: var(--text-main);
        min-height: 100dvh;
    }

    h1, h2, h3, h4, h5, h6 {
        font-family: var(--font-display);
        font-weight: 600;
        line-height: 1.2;
    }

    h1 { font-size: 2.25rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.25rem; }
    h4 { font-size: 1.1rem; }

    a {
        color: var(--accent-primary);
        text-decoration: none;
        transition: opacity 0.15s ease;
    }

    a:hover {
        opacity: 0.85;
    }

    :where(a, button, input, select, textarea, summary):focus-visible {
        outline: 3px solid var(--focus-ring, var(--accent-primary));
        outline-offset: 3px;
        box-shadow: 0 0 0 2px var(--focus-ring-offset, var(--bg-main));
    }

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

    fieldset {
        border: none;
        padding: 0;
    }

    legend {
        font-family: var(--font-display);
        font-weight: 600;
        font-size: 1rem;
        color: var(--text-main);
        margin-bottom: 0.75rem;
    }

    ::selection {
        background: var(--teal-50);
        color: var(--text-main);
    }
}

@layer base {
    .text-muted {
        color: var(--text-muted);
    }

    .material-symbols-outlined {
        font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
        vertical-align: middle;
    }

    .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;
    }

    .skip-link {
        position: fixed;
        top: 0.75rem;
        left: 0.75rem;
        z-index: 1000;
        padding: 0.75rem 1rem;
        border-radius: var(--radius-full);
        background: var(--accent-primary);
        color: var(--text-on-accent);
        transform: translateY(-150%);
    }

    .skip-link:focus {
        transform: translateY(0);
    }

    .product-logo {
        display: inline-flex;
        align-items: center;
        gap: 0.65rem;
        color: var(--text-main);
        text-decoration: none;
    }

    .product-logo:hover { opacity: 1; }

    .product-logo .breeze-logo-mark {
        width: 1.55rem;
        height: 1.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.12rem;
        color: currentColor;
    }

    .product-logo .breeze-logo-mark span {
        display: block;
        width: 0.3rem;
        height: 1.15rem;
        border-radius: 50%;
        background: currentColor;
        transform: rotate(8deg);
    }

    .product-logo .breeze-logo-mark span:nth-child(2) { height: 1.45rem; transform: rotate(-4deg); }
    .product-logo .breeze-logo-mark span:nth-child(3) { height: 0.95rem; transform: rotate(7deg); }

    .product-logo .breeze-logo-word {
        font-family: var(--font-display);
        font-size: 1.12rem;
        font-weight: 800;
        letter-spacing: -0.055em;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@layer components {
    .flash {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.75rem 1rem;
        border-radius: var(--radius-md);
        margin-bottom: 1rem;
        font-size: 0.9rem;
    }

    .flash-notice {
        background: var(--success-10);
        border: 1px solid var(--success);
        color: var(--success);
    }

    .flash-alert {
        background: var(--danger-10);
        border: 1px solid var(--danger);
        color: var(--danger);
    }

    .flash-close {
        background: none;
        border: none;
        color: inherit;
        cursor: pointer;
        padding: 0;
        opacity: 0.7;
    }

    .flash-close:hover {
        opacity: 1;
    }
}