@layer reset, tokens, base, accessibility, layout;

@layer tokens {
    :root {
        --pine: #0d3f34;
        --pine-deep: #082f27;
        --pine-ink: #06251f;
        --leaf: #5f8f3f;
        --gold: #f0b63d;
        --gold-soft: #fff2ce;
        --cream: #f7faf6;
        --paper: #ffffff;
        --ink: #1f2b27;
        --muted: #62716b;
        --border: #d7e2dc;
        --danger: #9b2c2c;
        --danger-soft: #fff2f2;
        --shadow-soft: 0 12px 34px rgba(8, 47, 39, 0.09);
        --shadow-card: 0 28px 70px rgba(8, 47, 39, 0.18);
        --radius-small: 12px;
        --radius: 20px;
        --radius-large: 30px;
        --shell: 1180px;
    }
}

@layer reset {
    *, *::before, *::after { box-sizing: border-box; }
    html { min-height: 100%; }
    body, h1, h2, p { margin: 0; }
    img { display: block; max-width: 100%; }
    button, input { font: inherit; }
}

@layer base {
    body {
        min-height: 100vh;
        color: var(--ink);
        background: var(--cream);
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1rem;
        line-height: 1.55;
    }

    a { color: inherit; }
    h1, h2 { color: var(--pine-deep); line-height: 1.08; }
    input, button { color: inherit; }
}

@layer accessibility {
    .skip-link { position: fixed; left: -9999px; }
    .skip-link:focus {
        z-index: 1000;
        top: 1rem;
        left: 1rem;
        padding: .75rem 1rem;
        border-radius: .5rem;
        color: var(--pine-deep);
        background: var(--paper);
        box-shadow: var(--shadow-card);
    }

    :focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
}

@layer layout {
    .shell { width: min(calc(100% - 2rem), var(--shell)); margin-inline: auto; }
}