/* =============================================================================
   Atelje Vek — base styles
   Hand-written reset + typography + layout primitives + components, keyed off
   tokens.css. Reproduces the Breakdance look (teal brand, Roboto/Instrument
   Serif, 1120px container, 100px section rhythm) without the builder runtime.
   ============================================================================ */

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: var(--lh-body);
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }

a {
    color: var(--brand);
    text-decoration: none;
    transition: color var(--transition) ease;
}
a:hover { color: var(--brand-hover); }

/* --- Headings --- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--black);
    line-height: var(--lh-heading);
    font-weight: 400;
    margin: 0 0 0.5em;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); }
h6 { font-size: var(--fs-h6); }

p { margin: 0 0 1em; }

/* --- Layout primitives --- */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--section-pad-x);
}

.section {
    padding-block: var(--section-pad-y);
}
.section--tight { padding-block: calc(var(--section-pad-y) / 2); }

.grid {
    display: grid;
    gap: var(--col-gap);
}
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
    .grid--4 { grid-template-columns: repeat(2, 1fr); }
    .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
    .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

/* --- Accent / utility type --- */
.font-accent { font-family: var(--font-accent); text-transform: uppercase; letter-spacing: 0.02em; }
.eyebrow {
    font-family: var(--font-accent);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.875rem;
    color: var(--brand);
}
.quote {
    font-family: var(--font-heading);
    font-size: var(--fs-h3);
    color: var(--black);
    line-height: 1.25;
}

/* --- Buttons --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    font-weight: var(--btn-weight);
    font-size: var(--fs-base);
    line-height: 1;
    padding: var(--btn-pad);
    border-radius: var(--radius);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--transition) ease-in-out;
}
.btn--primary { background: var(--brand); color: var(--white); }
.btn--primary:hover { background: var(--brand-hover); color: var(--white); }
.btn--secondary { background: transparent; color: var(--brand); border-color: var(--brand); }
.btn--secondary:hover { background: var(--brand); color: var(--white); }
.btn--lg { padding: var(--btn-pad-lg); }
.btn--sm { padding: var(--btn-pad-sm); }

/* --- Forms --- */
label { font-weight: 500; color: var(--black); display: block; margin-bottom: 8px; }
input[type="text"], input[type="email"], input[type="tel"], textarea, select {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    color: var(--ink);
}
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 2px var(--brand);
}
.field { margin-bottom: 16px; }

/* --- Accessibility --- */
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.visually-hidden {
    position: absolute !important; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}