/* =========================
   Shared — NETA Premium System
   Global design tokens only
   Does NOT override section backgrounds
========================= */

:root {
    /* Colors — default: Fabric Beige */
    --neta-paper: #eee6d8;
    --neta-paper-light: #fffaf1;
    --neta-linen: #ded4c2;

    --neta-walnut: #24190f;
    --neta-walnut-soft: #4d4035;

    --neta-clay: #8f765d;
    --neta-brass: #8f7b5d;
    --neta-brass-light: #cdbb98;
    --neta-stone: #b8b0a2;
    --neta-muted: #756b5f;
    --neta-white: #fffaf1;

    /* Lines */
    --neta-line: rgba(36, 25, 15, 0.14);
    --neta-line-soft: rgba(36, 25, 15, 0.08);

    /* Stripes */
    --neta-stripe: rgba(36, 25, 15, 0.034);
    --neta-stripe-soft: rgba(36, 25, 15, 0.022);
    --neta-sheen: rgba(255, 250, 241, 0.64);

    /* Effects */
    --neta-glow: 0 34px 95px rgba(143, 123, 93, 0.16);
    --neta-shadow: 0 30px 80px rgba(36, 25, 15, 0.15);
    --neta-shadow-soft: 0 20px 55px rgba(36, 25, 15, 0.08);

    /* Radius */
    --neta-radius-sm: 8px;
    --neta-radius-md: 18px;
    --neta-radius-lg: 34px;

    /* Fonts */
    --font-display: "Fraunces", ui-serif, Georgia, serif;
    --font-body: "Work Sans", -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, monospace;

    --font-label: var(--font-mono);
    --font-nav: var(--font-body);
    --font-button: var(--font-body);

    --size-nav: 15px;
    --size-button: 15px;

    --weight-nav: 700;
    --weight-button: 800;
}

/* =========================================================
   Theme Palettes — Fabric Collection
========================================================= */

/* 01 — בד בז׳ */
html[data-neta-theme="fabric-beige"] {
    --neta-paper: #eee6d8;
    --neta-paper-light: #fffaf1;
    --neta-linen: #ded4c2;

    --neta-walnut: #24190f;
    --neta-walnut-soft: #4d4035;

    --neta-clay: #8f765d;
    --neta-brass: #8f7b5d;
    --neta-brass-light: #cdbb98;
    --neta-stone: #b8b0a2;
    --neta-muted: #756b5f;
    --neta-white: #fffaf1;

    --neta-line: rgba(36, 25, 15, 0.14);
    --neta-line-soft: rgba(36, 25, 15, 0.08);

    --neta-stripe: rgba(36, 25, 15, 0.034);
    --neta-stripe-soft: rgba(36, 25, 15, 0.022);
    --neta-sheen: rgba(255, 250, 241, 0.64);

    --neta-glow: 0 34px 95px rgba(143, 123, 93, 0.16);
    --neta-shadow: 0 30px 80px rgba(36, 25, 15, 0.15);
    --neta-shadow-soft: 0 20px 55px rgba(36, 25, 15, 0.08);
}

/* 02 — בד אפור בהיר */
html[data-neta-theme="fabric-light"] {
    --neta-paper: #e9e7df;
    --neta-paper-light: #faf8f2;
    --neta-linen: #d8d5cc;

    --neta-walnut: #23211e;
    --neta-walnut-soft: #4d4a43;

    --neta-clay: #817567;
    --neta-brass: #817b6e;
    --neta-brass-light: #c7c1b2;
    --neta-stone: #aaa69c;
    --neta-muted: #6f6c65;
    --neta-white: #fffaf1;

    --neta-line: rgba(35, 33, 30, 0.14);
    --neta-line-soft: rgba(35, 33, 30, 0.08);

    --neta-stripe: rgba(35, 33, 30, 0.032);
    --neta-stripe-soft: rgba(35, 33, 30, 0.02);
    --neta-sheen: rgba(250, 248, 242, 0.62);

    --neta-glow: 0 34px 95px rgba(129, 123, 110, 0.14);
    --neta-shadow: 0 30px 80px rgba(35, 33, 30, 0.14);
    --neta-shadow-soft: 0 20px 55px rgba(35, 33, 30, 0.08);
}

/* 03 — בד פחם */
html[data-neta-theme="fabric-charcoal"] {
    --neta-paper: #e5e2dc;
    --neta-paper-light: #f7f5ef;
    --neta-linen: #d0ccc4;

    --neta-walnut: #171615;
    --neta-walnut-soft: #33312e;

    --neta-clay: #746a61;
    --neta-brass: #605d58;
    --neta-brass-light: #b8b2a7;
    --neta-stone: #99958f;
    --neta-muted: #625f5a;
    --neta-white: #fffaf1;

    --neta-line: rgba(23, 22, 21, 0.14);
    --neta-line-soft: rgba(23, 22, 21, 0.08);

    --neta-stripe: rgba(23, 22, 21, 0.034);
    --neta-stripe-soft: rgba(23, 22, 21, 0.022);
    --neta-sheen: rgba(247, 245, 239, 0.58);

    --neta-glow: 0 34px 95px rgba(96, 93, 88, 0.14);
    --neta-shadow: 0 30px 80px rgba(23, 22, 21, 0.16);
    --neta-shadow-soft: 0 20px 55px rgba(23, 22, 21, 0.09);
}

/* 04 — בד ירוק עמוק */
html[data-neta-theme="fabric-green"] {
    --neta-paper: #e3e8df;
    --neta-paper-light: #f8faf2;
    --neta-linen: #cbd6ca;

    --neta-walnut: #122522;
    --neta-walnut-soft: #31443f;

    --neta-clay: #756f5d;
    --neta-brass: #49665d;
    --neta-brass-light: #9db7aa;
    --neta-stone: #94a39d;
    --neta-muted: #5e6d67;
    --neta-white: #fffaf1;

    --neta-line: rgba(18, 37, 34, 0.14);
    --neta-line-soft: rgba(18, 37, 34, 0.08);

    --neta-stripe: rgba(18, 37, 34, 0.034);
    --neta-stripe-soft: rgba(18, 37, 34, 0.022);
    --neta-sheen: rgba(248, 250, 242, 0.58);

    --neta-glow: 0 34px 95px rgba(73, 102, 93, 0.16);
    --neta-shadow: 0 30px 80px rgba(18, 37, 34, 0.15);
    --neta-shadow-soft: 0 20px 55px rgba(18, 37, 34, 0.08);
}

/* 05 — בד אפור */
html[data-neta-theme="fabric-gray"] {
    --neta-paper: #e7e5df;
    --neta-paper-light: #f8f6f1;
    --neta-linen: #d3d0c8;

    --neta-walnut: #20201e;
    --neta-walnut-soft: #45433f;

    --neta-clay: #807469;
    --neta-brass: #77736a;
    --neta-brass-light: #beb8ad;
    --neta-stone: #9f9b94;
    --neta-muted: #686660;
    --neta-white: #fffaf1;

    --neta-line: rgba(32, 32, 30, 0.14);
    --neta-line-soft: rgba(32, 32, 30, 0.08);

    --neta-stripe: rgba(32, 32, 30, 0.034);
    --neta-stripe-soft: rgba(32, 32, 30, 0.022);
    --neta-sheen: rgba(248, 246, 241, 0.58);

    --neta-glow: 0 34px 95px rgba(119, 115, 106, 0.14);
    --neta-shadow: 0 30px 80px rgba(32, 32, 30, 0.14);
    --neta-shadow-soft: 0 20px 55px rgba(32, 32, 30, 0.08);
}

/* =========================================================
   Color Picker — REMOVED (Phase 2)
   -----------------------------------------------------------
   The live fabric-swatch colour switcher was retired. Its
   .neta-color-picker / .neta-swatch styles lived here and
   have been deleted; the site is locked to the fabric-beige
   palette via html[data-neta-theme="fabric-beige"] above.
========================================================= */

/* =========================================================
   Smooth Theme Change
========================================================= */

body,
.home-hero,
.about-section,
.reviews-section,
.services-section,
.process-section,
.why-section,
.gallery-section,
.videos-section,
.contact-section,
.location-hero,
.location-intro,
.location-gallery,
.location-areas,
.location-faq,
.service-card,
.process-card,
.why-block,
.gallery-card,
.video-stack-card,
.contact-form,
.contact-detail,
.location-intro__card,
.location-gallery__card,
.location-faq__item {
    transition:
        background 0.35s ease,
        color 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

/* =========================
   Mobile
========================= */

@media (max-width: 899px) {
    html {
        scroll-padding-top: 76px;
    }

    .section-label,
    .home-hero__eyebrow {
        font-size: 11.5px;
        letter-spacing: 0.18em;
    }
}

/* =========================================================
   Shared Section System — NETA Unified Look
========================================================= */

:root {
    --neta-section-padding: 112px 0;
    --neta-section-padding-mobile: 58px 0 64px;

    --neta-section-head-width: 820px;
    --neta-section-head-gap: 22px;

    --neta-title-size: clamp(52px, 7vw, 92px);
    --neta-title-size-mobile: clamp(36px, 10vw, 52px);

    --neta-card-radius: 28px;
    --neta-card-padding: 34px;
    --neta-card-padding-mobile: 24px;

    --neta-card-bg: color-mix(in srgb, var(--neta-white, #fffaf1) 82%, transparent);
    --neta-card-border: color-mix(in srgb, var(--neta-line-soft, rgba(36, 25, 15, 0.08)) 92%, transparent);
}

/* כותרת קטנה מעל סקשן */
.section-label {
    width: fit-content;
    margin: 0 0 18px auto;

    display: inline-flex;
    align-items: center;
    gap: 14px;

    color: color-mix(in srgb, var(--neta-brass, #8f7b5d) 88%, var(--neta-walnut, #24190f));
    font-family: var(--font-label, var(--font-mono, monospace));
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.24em; /* same tracking as .home-hero__eyebrow */
    text-transform: uppercase;
}

/* Eyebrow decorative side-line removed — see base/main.css (Phase 2). */

/* ראש סקשן כללי */
.neta-section-head {
    max-width: var(--neta-section-head-width);
    margin: 0 auto 58px;
    text-align: center;
}

.neta-section-head .section-label {
    margin-right: auto;
    margin-left: auto;
    justify-content: center;
}

.neta-section-title {
    max-width: 780px;
    margin: 0 auto;

    color: var(--neta-walnut, #24190f);
    font-family: var(--font-display, serif);
    font-size: var(--neta-title-size);
    font-weight: 650;
    line-height: 0.98;
    letter-spacing: -0.055em;
}

.neta-section-text {
    max-width: 660px;
    margin: 24px auto 0;

    color: var(--neta-walnut-soft, #4d4035);
    font-family: var(--font-body, sans-serif);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.85;
}

/* כרטיס אחיד */
.neta-soft-card {
    position: relative;

    border-radius: var(--neta-card-radius);
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--neta-white, #fffaf1) 88%, transparent),
            color-mix(in srgb, var(--neta-paper-light, #fffaf1) 66%, transparent)
        );

    border: 1px solid var(--neta-card-border);

    box-shadow:
        0 24px 70px rgba(36, 25, 15, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.62);

    overflow: hidden;
    isolation: isolate;
}

.neta-soft-card::before {
    content: "";
    position: absolute;
    inset: 14px;
    z-index: 1;

    border: 1px solid color-mix(in srgb, var(--neta-white, #fffaf1) 42%, transparent);
    border-radius: calc(var(--neta-card-radius) - 10px);

    pointer-events: none;
}

.neta-icon-box {
    width: 58px;
    height: 58px;
    border-radius: 18px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--neta-white, #fffaf1) 82%, transparent),
            color-mix(in srgb, var(--neta-paper, #eee6d8) 70%, transparent)
        );

    border: 1px solid color-mix(in srgb, var(--neta-line-soft, rgba(36, 25, 15, 0.08)) 90%, transparent);
    color: var(--neta-walnut, #24190f);

    box-shadow:
        0 12px 28px rgba(36, 25, 15, 0.075),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.neta-icon-box i {
    font-size: 27px;
    line-height: 1;
    color: currentColor;
}

/* כפתורים אחידים */
.neta-pill-button,
.neta-pill-button:visited {
    min-height: 48px;
    padding: 0 24px;
    border-radius: 999px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-family: var(--font-button, var(--font-body, sans-serif));
    font-size: var(--size-button, 15px);
    font-weight: var(--weight-button, 800);
    line-height: 1;
    text-decoration: none;

    transition:
        transform 0.22s ease,
        background 0.22s ease,
        color 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease;
}

.neta-pill-button--dark,
.neta-pill-button--dark:visited {
    background: var(--neta-walnut, #24190f);
    color: var(--neta-white, #fffaf1);
    border: 1px solid var(--neta-walnut, #24190f);
    box-shadow: 0 16px 38px rgba(36, 25, 15, 0.16);
}

.neta-pill-button--light,
.neta-pill-button--light:visited {
    background: color-mix(in srgb, var(--neta-white, #fffaf1) 72%, transparent);
    color: var(--neta-walnut, #24190f);
    border: 1px solid color-mix(in srgb, var(--neta-line, rgba(36, 25, 15, 0.14)) 80%, transparent);
}

.neta-pill-button:hover {
    transform: translateY(-2px);
}

/* פחות תזוזות למי שמעדיף */
@media (prefers-reduced-motion: reduce) {
    .neta-pill-button,
    .neta-soft-card,
    .neta-icon-box {
        transition: none !important;
    }

    .neta-pill-button:hover {
        transform: none;
    }
}

/* Mobile */
@media (max-width: 899px) {
    :root {
        --neta-section-padding: var(--neta-section-padding-mobile);
        --neta-card-radius: 22px;
        --neta-card-padding: var(--neta-card-padding-mobile);
    }

    .section-label {
        margin-bottom: 14px;
        gap: 10px;

        font-size: 11px;
        letter-spacing: 0.2em;
    }

    .section-label::before {
        width: 28px;
    }

    .neta-section-head {
        max-width: 430px;
        margin-bottom: 32px;
    }

    .neta-section-title {
        max-width: 390px;
        font-size: var(--neta-title-size-mobile);
        line-height: 1.04;
        letter-spacing: -0.05em;
    }

    .neta-section-text {
        max-width: 380px;
        margin-top: 16px;
        font-size: 15.8px;
        line-height: 1.65;
    }

    .neta-icon-box {
        width: 52px;
        height: 52px;
        border-radius: 16px;
    }

    .neta-icon-box i {
        font-size: 24px;
    }
}