/* =============================================================================
 * Quietplugs · Base
 * Reset + body + typography + .container + .section + .skip-link + .eyebrow + .marquee
 * Phase 1 scaffold version. Phase 4 will polish.
 * ============================================================================= */


/* === @font-face ============================================================
 * 4 static WOFF2 (subset: Latin + Latin-1 + Latin Extended-A (PL) + Punctuation).
 * Subsetowane z Nunito Sans VF (skrypt: tools — wybrane wagi 300/400/600/800).
 * Łącznie ~60 KB (vs 556 KB poprzedniego VF TTF). Initial paint preloaduje 300+800.
 * ============================================================================= */

@font-face {
    font-family: "Nunito Sans";
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/nunito-sans-300.woff2") format("woff2");
}
@font-face {
    font-family: "Nunito Sans";
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/nunito-sans-400.woff2") format("woff2");
}
@font-face {
    font-family: "Nunito Sans";
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/nunito-sans-600.woff2") format("woff2");
}
@font-face {
    font-family: "Nunito Sans";
    font-weight: 800;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/nunito-sans-800.woff2") format("woff2");
}


/* === Reset ================================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    font-family: var(--ff-base);
    font-size: var(--fs-md);
    font-weight: var(--fw-regular);
    line-height: var(--lh-relaxed);
    color: var(--c-ink-80);
    background: var(--c-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { background: none; border: 0; cursor: pointer; font: inherit; color: inherit; }
input, select, textarea, button { font-family: inherit; color: inherit; }
ul, ol { list-style: none; }
hr { border: 0; border-top: var(--bw) solid var(--bc-default); margin: var(--s-5) 0; }
::selection { background: var(--c-ink); color: var(--c-bg); }


/* === Typography hierarchy ================================================ */

h1, h2, h3, h4, h5, h6 {
    color: var(--c-ink);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-heading);
}
h1 { font-size: var(--fs-display); letter-spacing: var(--ls-display); }
h2 { font-size: var(--fs-section); }
h3 { font-size: var(--fs-2xl); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-xl); }
h5, h6 { font-size: var(--fs-lg); }

p { line-height: var(--lh-relaxed); }
small { font-size: var(--fs-sm); }
em { font-style: normal; }
strong, b { font-weight: var(--fw-bold); }


/* === Layout primitives ==================================================== */

.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-px-mobile);
}
@media (min-width: 768px)  { .container { padding-inline: var(--container-px-tablet); } }
@media (min-width: 1280px) { .container { padding-inline: var(--container-px-desktop); } }

.section {
    padding-block: var(--section-py-mobile);
}
@media (min-width: 768px)  { .section { padding-block: var(--section-py-tablet); } }
@media (min-width: 1024px) { .section { padding-block: var(--section-py-desktop); } }
@media (min-width: 1280px) { .section { padding-block: var(--section-py-wide); } }

.section__header { max-width: var(--text-max); margin-bottom: var(--s-6); }
.section__title  { color: var(--c-ink); }
.section__lead   { color: var(--c-ink-65); font-size: var(--fs-lg); margin-top: var(--s-3); max-width: var(--text-max); }


/* === Typography helpers ================================================== */

.eyebrow {
    display: inline-flex;
    align-items: center;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--c-ink-45);
    margin: 0 0 var(--s-3);
}
.eyebrow__dot {
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--c-ink);
    margin-right: var(--s-2);
}

.lead {
    font-size: var(--fs-lg);
    font-weight: var(--fw-light);
    line-height: var(--lh-normal);
    color: var(--c-ink-65);
    max-width: var(--text-max);
}


/* === A11y / utility ====================================================== */

.skip-link {
    position: absolute;
    top: -100px; left: var(--s-4);
    z-index: var(--z-toast);
    padding: var(--s-3) var(--s-5);
    background: var(--c-ink); color: var(--c-bg);
    border-radius: var(--r-sm);
    font-weight: var(--fw-semibold);
}
.skip-link:focus { top: var(--s-4); }

.screen-reader-text {
    position: absolute !important;
    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(--c-ink);
    outline-offset: 3px;
    border-radius: 2px;
}

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