/* Role: design system authority. Tokens, surfaces, typography, and shared modern brand language live here. */


/* Phase 4 – Round 2
 * High-modern editorial design system
 * Palette: warm parchment + graphite + sage + champagne accents
 */

:root{
    --klsv-ui-bg:#f6f2ea;
    --klsv-ui-bg-soft:#fffaf3;
    --klsv-ui-bg-muted:#efe8dc;
    --klsv-ui-bg-hero:#ebe3d5;
    --klsv-ui-text:#1f2622;
    --klsv-ui-text-muted:#66706a;
    --klsv-ui-border:rgba(71, 82, 74, 0.14);
    --klsv-ui-border-strong:rgba(71, 82, 74, 0.24);
    --klsv-ui-accent:#7c8b7a;
    --klsv-ui-accent-strong:#526255;
    --klsv-ui-accent-soft:rgba(124, 139, 122, 0.12);
    --klsv-ui-accent-glow:rgba(124, 139, 122, 0.28);
    --klsv-ui-success:#4d7f63;

    --klsv-ui-shadow-1:0 12px 28px rgba(68, 54, 34, 0.07);
    --klsv-ui-shadow-2:0 18px 42px rgba(68, 54, 34, 0.10);
    --klsv-ui-shadow-3:0 24px 54px rgba(68, 54, 34, 0.14);
    --klsv-ui-shadow-soft:0 16px 40px rgba(68, 54, 34, 0.08);

    --klsv-font-display:'Fraunces', 'DM Serif Display', Georgia, serif;
    --klsv-font-body:'Manrope', 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --site-bg:var(--klsv-ui-bg);
    --site-panel:var(--klsv-ui-bg-soft);
    --site-panel-soft:var(--klsv-ui-bg-muted);
    --site-text:var(--klsv-ui-text);
    --site-muted:var(--klsv-ui-text-muted);
    --site-line:var(--klsv-ui-border);
    --site-line-strong:var(--klsv-ui-border-strong);
    --site-accent:var(--klsv-ui-accent);
    --site-accent-soft:var(--klsv-ui-accent-soft);
    --site-accent-glow:var(--klsv-ui-accent-glow);
    --site-shadow:var(--klsv-ui-shadow-2);
    --site-shadow-hover:var(--klsv-ui-shadow-3);

    --front-surface-1:linear-gradient(180deg, rgba(255,250,243,.98), rgba(247,241,232,.98));
    --front-surface-2:linear-gradient(180deg, rgba(251,246,239,.98), rgba(241,234,223,.98));
    --front-line:rgba(71,82,74,.12);
    --front-line-strong:rgba(71,82,74,.20);
    --front-copy:rgba(31,38,34,.80);
    --front-copy-soft:rgba(31,38,34,.58);

    --klsv-ui-surface-1:linear-gradient(180deg, rgba(255,250,243,.98), rgba(247,241,232,.98));
    --klsv-ui-surface-2:linear-gradient(180deg, rgba(251,246,239,.98), rgba(241,234,223,.98));
    --klsv-ui-surface-3:linear-gradient(180deg, rgba(244,237,228,.98), rgba(236,228,215,.98));
    --klsv-ui-surface-soft:rgba(255,255,255,.62);
    --klsv-ui-text-strong:#232a26;
    --klsv-ui-text-soft:rgba(31,38,34,.84);
    --klsv-ui-text-faint:rgba(31,38,34,.58);
    --klsv-ui-border-soft:rgba(71,82,74,.08);
    --klsv-ui-border-accent:rgba(124,139,122,.18);
    --klsv-ui-ring:0 0 0 1px rgba(124,139,122,.10);

    --klsv-state-bg-neutral:rgba(255,252,248,.95);
    --klsv-state-border-neutral:rgba(71,82,74,.14);
    --klsv-state-text-neutral:#526255;
    --klsv-state-bg-new:rgba(255,252,248,.95);
    --klsv-state-border-new:rgba(124,139,122,.18);
    --klsv-state-text-new:#526255;
    --klsv-state-bg-busy:rgba(239,232,221,.96);
    --klsv-state-border-busy:rgba(71,82,74,.18);
    --klsv-state-text-busy:#3f4a44;
    --klsv-state-bg-vip:linear-gradient(180deg, rgba(190,169,131,.98), rgba(166,145,108,.98));
    --klsv-state-border-vip:rgba(171,148,111,.38);
    --klsv-state-text-vip:#ffffff;
    --klsv-state-bg-featured:rgba(117,97,73,.94);
    --klsv-state-border-featured:rgba(171,148,111,.34);
    --klsv-state-text-featured:#f8efe3;
    --klsv-state-bg-online:rgba(229,239,231,.96);
    --klsv-state-border-online:rgba(77,127,99,.24);
    --klsv-state-text-online:#3b6b50;
}

html{
    background:
        radial-gradient(circle at top left, rgba(183,157,122,.08), transparent 32%),
        radial-gradient(circle at top right, rgba(124,139,122,.08), transparent 28%),
        linear-gradient(180deg, #f7f2ea 0%, #f3ece1 100%);
}

body,
body.developer-starter{
    background:transparent!important;
    color:var(--site-text)!important;
}

body h1,
body h2,
body h3,
body h4,
body h5,
body h6{
    color:var(--site-text)!important;
    font-weight:600!important;
}

body p{color:var(--site-muted)}
.site-main{padding-top:clamp(18px,2.5vw,32px);padding-bottom:clamp(28px,4vw,56px)}

.site-header{
    background:rgba(246,242,234,.82);
    border-bottom:1px solid rgba(71,82,74,.10);
    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);
}
.site-header__inner{height:74px}
.site-header__brand{
    color:var(--site-text);
    letter-spacing:.02em;
}
.site-header__brand-accent{color:#8d7555}
.site-header__link{
    color:rgba(31,38,34,.72);
    border:1px solid transparent;
}
.site-header__link:hover,
.site-header__link--active{
    color:var(--site-text);
    background:rgba(255,255,255,.58);
    border-color:rgba(71,82,74,.08);
}
.site-header__cta,
.site-btn--primary,
.site-sticky-wa__btn{
    background:linear-gradient(180deg, #8fa08d 0%, #6d7f6f 100%);
    color:#fbfaf7!important;
    border:1px solid rgba(82,98,85,.18);
    box-shadow:0 14px 28px rgba(82,98,85,.18);
}
.site-header__cta:hover,
.site-btn--primary:hover,
.site-sticky-wa__btn:hover{
    box-shadow:0 18px 34px rgba(82,98,85,.24);
}
.site-btn{
    border-radius:999px;
    letter-spacing:.01em;
}
.site-btn--secondary,
.site-btn--ghost{
    background:rgba(255,255,255,.62);
    border:1px solid rgba(71,82,74,.12);
    color:var(--site-text)!important;
}
.site-btn--secondary:hover,
.site-btn--ghost:hover{
    background:rgba(255,255,255,.85);
    border-color:rgba(71,82,74,.20);
}

.site-block,
.site-section__inner,
.site-card,
.site-photo-card,
.site-stat-card,
.site-faq-item,
.site-price-table,
.page-profile .site-profile-hero__media-card,
.page-profile .site-profile-hero__info-card,
.page-profile .page-profile-rail,
.page-profile .site-profile-section-card{
    background:var(--front-surface-1)!important;
    border:1px solid rgba(71,82,74,.10)!important;
    box-shadow:var(--site-shadow)!important;
}
.site-card,
.site-photo-card,
.site-stat-card,
.site-faq-item{
    background:var(--front-surface-2)!important;
}
.site-section__inner{
    position:relative;
    overflow:hidden;
}
.site-section__inner::before{
    content:"";
    position:absolute;
    inset:auto auto -20% -5%;
    width:240px;
    height:240px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(183,157,122,.10), transparent 68%);
    pointer-events:none;
}
.site-section__eyebrow,
.site-card__eyebrow,
.home-v2-area-card__tag,
.home-v2-destination-card__eyebrow,
.home-v2-path-card__label{
    color:#8d7555!important;
    letter-spacing:.14em;
}
.site-section__title,
.site-card__title,
.site-photo-card__name,
.home-v2-step-card__title,
.home-v2-area-card__title,
.home-v2-destination-card__title,
.home-v2-path-card__title{
    color:var(--site-text)!important;
}
.site-section__intro,
.site-card__text,
.site-mini,
.site-breadcrumb,
.site-breadcrumb a,
.home-v2-step-card__description,
.home-v2-area-card__description,
.home-v2-destination-card__description,
.home-v2-path-card__description{
    color:var(--site-muted)!important;
}

.site-link-quiet{
    color:var(--site-accent-strong);
    font-weight:700;
}
.site-link-quiet:hover{color:#445348}
.site-pill,
.site-chip,
.site-badge--empty{
    background:rgba(255,255,255,.58);
    border-color:rgba(71,82,74,.10);
    color:var(--site-text);
}
.site-pill--active,
.site-pill:hover,
.site-pill.active,
a.site-chip:hover{
    background:rgba(124,139,122,.10);
    border-color:rgba(124,139,122,.22);
    color:#455549;
}

.site-price-table th{
    background:rgba(247,241,232,.92);
    color:#6f6a61;
    border-bottom:1px solid rgba(71,82,74,.10);
}
.site-price-table td{
    color:var(--site-text);
    border-bottom:1px solid rgba(71,82,74,.08);
}
.site-price-table .col-local{color:#4d7f63}
.site-price-table .col-intl{color:#6b6f9d}

.site-breadcrumb{
    border-bottom-color:rgba(71,82,74,.08)!important;
    color:rgba(31,38,34,.42)!important;
}
.site-breadcrumb a:hover{color:var(--site-text)!important}
.site-breadcrumb__current{color:rgba(31,38,34,.78)!important}

.site-footer{
    margin-top:52px;
    background:rgba(255,251,246,.82);
    border-top:1px solid rgba(71,82,74,.10);
}
.site-footer__inner,
.site-footer__meta{
    max-width:var(--site-container);
    margin-inline:auto;
}
.site-footer__heading,
.site-footer__legal,
.site-footer__meta-links a{
    color:var(--site-text)!important;
}
.site-footer__copy,
.site-footer__link{
    color:var(--site-muted)!important;
}
.site-footer__link:hover,
.site-footer__meta-links a:hover{color:var(--site-text)!important}

/* Homepage direction */
.site-wrap--home-v2{
    gap:30px;
    max-width:min(1320px, calc(100% - 32px));
}
.home-v2-hero .site-section__inner{
    background:
        radial-gradient(circle at top left, rgba(183,157,122,.16), transparent 34%),
        radial-gradient(circle at bottom right, rgba(124,139,122,.16), transparent 28%),
        linear-gradient(135deg, rgba(255,252,247,.98), rgba(241,234,223,.98))!important;
    border-color:rgba(71,82,74,.10)!important;
}
.home-v2-hero__content{
    gap:20px;
    padding-right:20px;
}
.home-v2-path-card,
.home-v2-step-card,
.home-v2-area-card,
.home-v2-destination-card,
.home-v2-whatsapp-cta__card{
    background:linear-gradient(180deg, rgba(255,252,247,.96), rgba(245,238,228,.98));
    border:1px solid rgba(71,82,74,.10);
    box-shadow:var(--site-shadow);
}
.home-v2-path-card,
.home-v2-destination-card,
.home-v2-area-card{
    transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.home-v2-path-card:hover,
.home-v2-destination-card:hover,
.home-v2-area-card:hover{
    transform:translateY(-3px);
    box-shadow:var(--site-shadow-hover);
    border-color:rgba(124,139,122,.20);
}
.home-v2-path-card--kl{
    background:
        radial-gradient(circle at top right, rgba(124,139,122,.14), transparent 34%),
        linear-gradient(180deg, rgba(255,252,247,.98), rgba(243,236,227,.98));
}
.home-v2-path-card--other-cities{
    background:
        radial-gradient(circle at top left, rgba(183,157,122,.14), transparent 34%),
        linear-gradient(180deg, rgba(255,252,247,.98), rgba(241,234,223,.98));
}
.home-v2-step-card__number{
    color:rgba(141,117,85,.72);
}
.home-v2-path-card__tags li{
    background:rgba(255,255,255,.64);
    border:1px solid rgba(71,82,74,.10);
    color:#435047;
}
.home-v2-whatsapp-cta__benefits li{
    background:rgba(255,255,255,.54);
    border:1px solid rgba(71,82,74,.10);
    color:var(--site-text);
}
.home-v2-whatsapp-cta__benefits li::before{
    color:#4d7f63;
}
.home-v2-area-card__availability,
.home-v2-destination-card__context{
    color:#526255;
}

/* Shared inner pages */
.page-shell,
.page-market-archive,
.page-profile{
    max-width:min(1280px, calc(100% - 32px));
    gap:30px;
}
.page-shell .site-section__inner,
.page-market-archive .site-section__inner,
.page-profile .site-section__inner,
.page-shell .site-block,
.page-market-archive .site-block,
.page-profile .site-block{
    background:var(--front-surface-1)!important;
    border:1px solid rgba(71,82,74,.10)!important;
    box-shadow:var(--site-shadow)!important;
}
.page-market-archive .page-market-hero__media,
.page-market-archive .site-photo-card__media,
.site-city-page__photo,
.page-profile .site-profile-hero__main-image{
    background:rgba(232,224,212,.72);
}
.page-market-archive .site-photo-card__name,
.page-profile .site-profile-hero__name,
.page-profile .site-profile-section-card h2,
.page-profile .site-profile-section-card h3{
    color:var(--site-text)!important;
}
.page-market-archive .site-photo-card__meta,
.page-profile .site-profile-hero__location,
.page-profile .site-profile-hero__intro,
.page-profile .site-profile-section-card p{
    color:var(--site-muted)!important;
}
.page-market-archive .site-photo-card--compare{
    background:linear-gradient(180deg, rgba(255,252,247,.98), rgba(241,234,223,.98));
    border:1px solid rgba(71,82,74,.10);
    box-shadow:var(--site-shadow);
}
.page-market-archive .site-photo-card__body{
    background:transparent;
}
.page-profile .site-profile-hero__thumb{
    border-color:rgba(71,82,74,.12);
    background:rgba(255,255,255,.62);
}
.page-profile .site-profile-hero__thumb.is-active{
    border-color:rgba(124,139,122,.30);
    box-shadow:0 0 0 1px rgba(124,139,122,.14);
}
.page-profile .site-profile-hero__status,
.site-badge--active{
    background:rgba(229,239,231,.96)!important;
    color:#3d6b50!important;
    border:1px solid rgba(77,127,99,.18)!important;
}
.site-badge--empty{
    color:#6c716b!important;
}

/* Support pages */
.page-shell--how-it-works .page-masthead__main,
.page-shell--contact-guide .page-masthead__main,
.page-shell--area-comparison .page-masthead__main,
.page-shell--how-it-works .site-cta,
.page-shell--contact-guide .site-cta,
.page-shell--area-comparison .site-cta{
    background:
        radial-gradient(circle at top right, rgba(183,157,122,.14), transparent 32%),
        radial-gradient(circle at bottom left, rgba(124,139,122,.10), transparent 28%),
        linear-gradient(180deg, rgba(255,252,247,.98), rgba(241,234,223,.98))!important;
}

/* utility */
.site-skip-link{
    background:#fefbf6;
    color:var(--site-text)!important;
    border:1px solid rgba(71,82,74,.10);
    box-shadow:var(--site-shadow);
}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
    outline:2px solid rgba(124,139,122,.55);
    box-shadow:0 0 0 4px rgba(124,139,122,.14);
}

@media (max-width:1100px){
    .site-header__nav{
        background:rgba(246,242,234,.98)!important;
    }
    .site-header__link{
        background:transparent;
    }
}

@media (max-width:767px){
    html{
        background:
            radial-gradient(circle at top center, rgba(183,157,122,.08), transparent 28%),
            linear-gradient(180deg, #f7f2ea 0%, #f1eadf 100%);
    }
    .site-wrap,
    .site-wrap--home-v2,
    .page-shell,
    .page-market-archive,
    .page-profile{
        max-width:calc(100% - 20px);
    }
    .site-section__inner,
    .site-block,
    .site-card{
        border-radius:24px!important;
    }
}