@layer reset, foundation, layout, components, pages;

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

    html {
        color-scheme: light;
    }

    body,
    h1,
    h2,
    p,
    ul {
        margin: 0;
    }

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

    img,
    picture,
    svg {
        display: block;
        max-inline-size: 100%;
    }
}

@layer foundation {
    :root {
        --color-bg: #ffffff;
        --color-surface: #ffffff;
        --color-surface-muted: #f8fafc;
        --color-text: #0f172a;
        --color-text-muted: #475569;
        --color-border: #cbd5e1;
        --color-border-strong: #64748b;
        --color-action: #1d4ed8;
        --color-action-hover: #1e40af;
        --color-on-action: #ffffff;
        --color-focus: #2563eb;
        --color-success: #15803d;
        --color-warning: #92400e;
        --color-danger: #b91c1c;

        --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        --font-weight-regular: 400;
        --font-weight-medium: 500;
        --font-weight-semibold: 600;
        --font-weight-bold: 700;

        --text-xs: 0.75rem;
        --text-sm: 0.875rem;
        --text-md: 1rem;
        --text-lg: 1.125rem;
        --text-xl: 1.25rem;
        --text-2xl: 1.5rem;
        --text-3xl: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
        --text-4xl: clamp(2.25rem, 1.75rem + 2vw, 3.5rem);
        --text-5xl: clamp(2.75rem, 2rem + 3vw, 4.5rem);

        --leading-caption: 1.4;
        --leading-small: 1.5;
        --leading-body: 1.6;
        --leading-component: 1.3;
        --leading-section-title: 1.2;
        --leading-page-title: 1.1;
        --tracking-caption: 0.01em;
        --tracking-component: -0.01em;
        --tracking-section-title: -0.02em;
        --tracking-page-title: -0.025em;

        --space-0: 0;
        --space-1: 0.25rem;
        --space-2: 0.5rem;
        --space-3: 0.75rem;
        --space-4: 1rem;
        --space-5: 1.25rem;
        --space-6: 1.5rem;
        --space-8: 2rem;
        --space-10: 2.5rem;
        --space-12: 3rem;
        --space-16: 4rem;
        --space-20: 5rem;
        --space-24: 6rem;

        --radius-none: 0;
        --radius-sm: 0.25rem;
        --radius-md: 0.5rem;
        --radius-lg: 0.75rem;
        --radius-full: 9999px;
        --border-thin: 1px;
        --border-thick: 2px;
        --shadow-none: none;

        --container-narrow: 45rem;
        --container-default: 72rem;
        --container-wide: 80rem;

        --duration-fast: 120ms;
        --duration-normal: 200ms;
        --duration-slow: 320ms;
        --ease-standard: ease-out;
        --ease-emphasized: ease-out;
    }

    html {
        background: var(--color-bg);
        scroll-behavior: smooth;
    }

    body {
        min-block-size: 100vh;
        background: var(--color-bg);
        color: var(--color-text);
        font-family: var(--font-sans);
        font-size: var(--text-md);
        font-weight: var(--font-weight-regular);
        line-height: var(--leading-body);
        overflow-wrap: anywhere;
        text-rendering: optimizeLegibility;
    }

    a {
        color: var(--color-action);
    }

    :focus-visible {
        outline: var(--border-thick) solid var(--color-focus);
        outline-offset: var(--space-1);
    }

    @media (prefers-reduced-motion: reduce) {
        html {
            scroll-behavior: auto;
        }

        *,
        *::before,
        *::after {
            animation: none;
            transition: none;
        }
    }
}