/* =====================================================================
   Base Styles
   Imports design tokens + reset, sets base typography/body defaults,
   and the shared .container layout primitive. Section-specific styles
   (hero.css, services.css, etc.) start in Phase 4 — see CLAUDE.md §5.
   ===================================================================== */

@import url('variables.css');
@import url('reset.css');

body {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body);
    color: var(--color-text-dark);
    background-color: var(--color-white);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    line-height: var(--lh-heading);
    color: var(--color-primary);
}

h1 {
    font-size: var(--fs-h1);
    line-height: var(--lh-tight);
}

h2 {
    font-size: var(--fs-h2);
}

h3 {
    font-size: var(--fs-h3);
}

h4 {
    font-size: var(--fs-h4);
}

p {
    font-size: var(--fs-body);
}

small {
    font-size: var(--fs-small);
    color: var(--color-text-grey);
}

/* ---- Container -------------------------------------------------------
   Full-width/edge-to-edge by design (CLAUDE.md §3) — no max-width cap.
   Still responsive: padding-inline widens at each breakpoint below so
   content never touches the viewport edge. */

.container {
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--container-padding-inline);
}

@media (min-width: 768px) {
    .container {
        padding-inline: 2.5rem; /* 40px */
    }
}

@media (min-width: 1200px) {
    .container {
        padding-inline: 3rem; /* 48px */
    }
}

/* ---- Accessibility utilities ------------------------------------------ */

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

:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}