/* =========================================================
   Dewandaru — DESIGN SYSTEM — single source of truth
   =========================================================
   Cara pakai:
   - Semua warna / font / radius / shadow / transition / spacing
     DIAMBIL dari token di bawah. JANGAN hardcode.
   - Mengganti 1 token di :root => seluruh website ikut berubah.
   - Migration layer (bagian bawah) menerjemahkan komponen template
     (style.css / color.css) ke token. style.css TIDAK diedit.
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap");

/* ---------- local heading font (Cambria) ---------- */
@font-face {
  font-family: "Cambria";
  src: url("/assets/fonts/cambria/CambriaRegular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cambria";
  src: url("/assets/fonts/cambria/CambriaRegular.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* =========================================================
   1. DESIGN TOKENS — satu sumber kebenaran
   ========================================================= */
:root {
  /* ---------- Brand color ---------- */
  --ab-primary: #2C3F27;    /* Myrtle */
  --ab-secondary: #485835;  /* Woodland */
  --ab-accent: #AE9052;     /* Dark Sand */
  --ab-bg: #FAFAF6;         /* Snow Drift */
  --ab-surface: #D3CAB2;    /* Foggy Grey */
  --ab-text: #000000;       /* Black */
  --ab-white: #FFFFFF;      /* White */

  /* ---------- Semantic color (turunan brand) ---------- */
  --ab-bg-body: var(--ab-bg);
  --ab-bg-surface: var(--ab-surface);
  --ab-text-body: var(--ab-text);
  --ab-text-muted: rgba(0, 0, 0, 0.62);
  --ab-border: rgba(0, 0, 0, 0.12);

  /* teks + border di atas gelap (header transparan, hero, footer) */
  --ab-text-on-dark: rgba(255, 255, 255, 0.8);
  --ab-text-on-dark-muted: rgba(255, 255, 255, 0.6);
  --ab-text-on-dark-faint: rgba(255, 255, 255, 0.38);
  --ab-border-on-dark: rgba(255, 255, 255, 0.18);

  /* overlay & badge semi-transparan */
  --ab-image-overlay: rgba(0, 0, 0, 0.45); /* gelap di atas video/gambar */
  --ab-badge-bg: color-mix(in srgb, var(--ab-accent) 78%, transparent);

  /* bidang input/border di atas gelap */
  --ab-field-bg: color-mix(in srgb, var(--ab-white) 8%, transparent);
  --ab-field-bg-focus: color-mix(in srgb, var(--ab-white) 12%, transparent);
  --ab-accent-soft: color-mix(in srgb, var(--ab-accent) 70%, transparent);

  /* ---------- Shadow ---------- */
  --ab-shadow-sm: 0 1px 10px rgba(0, 0, 0, 0.08);
  --ab-shadow-md: 0 10px 30px rgba(0, 0, 0, 0.12);
  --ab-shadow-text: 0 2px 28px rgba(0, 0, 0, 0.35);

  /* ---------- Radius ---------- */
  --ab-radius-sm: 8px;
  --ab-radius: 10px;
  --ab-radius-lg: 16px;
  --ab-radius-pill: 999px;
  --ab-radius-round: 50%;

  /* ---------- Transition ---------- */
  --ab-transition: 0.25s ease;
  --ab-transition-fast: 0.15s ease;

  /* ---------- Typography ---------- */
  --ab-font-heading: "Cambria", Georgia, "Times New Roman", serif;
  --ab-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  --ab-font-heading-weight: 600;
  --ab-font-body-weight: 400;
  --ab-line-height-heading: 1.25;
  --ab-line-height-body: 1.7;
  --ab-letter-spacing-heading: -0.015em;

  /* ---------- Spacing scale ---------- */
  --ab-space-xs: 4px;
  --ab-space-sm: 8px;
  --ab-space-md: 16px;
  --ab-space-lg: 24px;
  --ab-space-xl: 40px;
  --ab-space-2xl: 64px;
}

/* =========================================================
   2. BASE — elemen global mengikuti token
   ========================================================= */
body,
button,
input,
select,
textarea {
  font-family: var(--ab-font-body);
  font-weight: var(--ab-font-body-weight);
}

body {
  font-size: 15px;
  line-height: var(--ab-line-height-body);
  color: var(--ab-text-body);
  background-color: var(--ab-bg-body);
  /* overflow-x:hidden diteruskan dari style.css — jangan ditimpa */
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--ab-font-heading);
  font-weight: var(--ab-font-heading-weight);
  color: var(--ab-primary);
  line-height: var(--ab-line-height-heading);
  letter-spacing: var(--ab-letter-spacing-heading);
}

p {
  font-family: var(--ab-font-body);
  line-height: var(--ab-line-height-body);
  color: var(--ab-text-muted);
}

::selection {
  background-color: var(--ab-accent);
  color: var(--ab-white);
}

:focus-visible {
  outline: 2px solid var(--ab-accent);
  outline-offset: 2px;
}

::-webkit-input-placeholder,
:-moz-placeholder,
:-ms-input-placeholder,
::-moz-placeholder {
  color: var(--ab-text-muted);
}

/* =========================================================
   3. ACCENT MIGRATION LAYER (warna template lama  #6a7be7)
   color.css memakai literal #6a7be7; di layar ini kami ubah
   menuju var(--ab-accent). :is() membuat satu baris maintain.
   ========================================================= */

/* 3a. aksen jadi 'color' */
:is(
  .header .navbar-nav .nav-item.active .nav-link,
  .header .navbar-nav .nav-item .nav-link:hover,
  header.pb .header .navbar-nav .nav-item .nav-link:hover,
  .view-btn,
  .face.front,
  .bottom-list ul li a:hover,
  .card .card-body h3:hover,
  .card:hover .card-body h3,
  .post-nfo li:hover,
  .post-nfo li:hover a,
  .blog-single-post:hover .post_info > h3 a,
  .cm-reply,
  .widget-search form button,
  .widget-catgs ul li a,
  .ps-info > h3 a:hover,
  .btn1,
  .blog-grid-posts .post_info > a:hover,
  .cont-links li a,
  .cont-links li span,
  .socio-links li a:hover,
  .cont_info li i,
  .cont_info li a,
  .social_links li a:hover,
  .view-change ul.nav-tabs .nav-link.active,
  .card_bod_full .card-footer .btn-default,
  .btn-default,
  .sidebar.layout2 .ps-info > strong,
  .more-feat i,
  .contct-nf > span,
  .apartment-sec .rate-info h5,
  .comment-info:before,
  .price > h2,
  .agent_info > strong,
  .agent:hover .agent_info h3 a,
  .list-products .card:hover .card-body h3,
  .social-links li a:hover,
  .slick-prev:focus,
  .slick-next:focus,
  .slick-prev:before,
  .slick-next:before,
  .banner_text .card .card-footer > a,
  .catg-icon > i,
  .map-city-links ul li a:hover,
  a.link,
  .selected,
  .dropdown-item.active,
  .dropdown-item:active,
  .post-share > a:hover,
  .h-card-body .title,
  .h-page-card .title a:hover,
  .blog-single-post:hover .post_info > a
) {
  color: var(--ab-accent);
}

/* 3b. aksen sebagai 'background-color' */
:is(
  .banner-search .btn,
  .explore-feature .card .card-body i,
  .cluster-visible,
  .face.back,
  .widget-tags > ul li a,
  .post_info > a:hover,
  .pagination .page-item.active .page-link,
  .pagination .page-item .page-link:hover,
  .contact_form > form button:hover,
  .post-comment-sec form button:hover,
  .input-field input[type="radio"]:checked + label span,
  .input-field input[type="checkbox"]:checked + label span,
  .features-dv .input-field input[type="checkbox"] + label span,
  .btn2,
  .price:hover .btn-default,
  .discover-text .btn-default,
  .slick-prev:hover,
  .slick-next:hover,
  .banner_text .rate-info,
  .btn-default.st1,
  .categories-info:hover,
  .card .card-footer a .la-heart-o:hover,
  .footer-social a:hover,
  .signin-btn b:before,
  .success-message,
  .error-message,
  .error,
  .btn.btn-local-primary,
  .block-header,
  .model-item .title:hover,
  .language-selector .drop-menu .dropeddown li:hover
) {
  background-color: var(--ab-accent);
}

/* 3c. aksen sebagai 'border-color' */
:is(
  .header .navbar-nav .submit-btn a,
  .view-btn,
  .cluster-visible:before,
  .face.front,
  .face.back,
  .blog-single-post > blockquote,
  .btn1,
  .btn-default,
  .btn.btn-local-primary,
  .language-selector .drop-menu .dropeddown li:hover
) {
  border-color: var(--ab-accent);
}

/* ---------- sweep/fill pseudo-elemen template -> accent ---------- */
:is(
  .card .img-block:before,
  .card .img-block:after,
  .banner-search .btn:before,
  .banner-search .btn:after,
  .intro-content a:before,
  .intro-content a:after,
  .sbmt-btn:before,
  .sbmt-btn:after
) {
  background: color-mix(in srgb, var(--ab-accent) 80%, transparent);
}
.btn2:before,
.btn2:after,
.btn-default:before,
.btn-default:after {
  background-color: color-mix(in srgb, var(--ab-accent) 55%, transparent);
}

/* =========================================================
   4. HEADER (desktop) — komponen di style.css, overlay di sini
      State transparan/putih tetap di ab-hero.css (tokenized).
   ========================================================= */
@media (min-width: 992px) {
  .ab-desktop-header__burger span {
    background-color: var(--ab-text);
  }
  .ab-desktop-header__burger:hover span {
    background-color: var(--ab-accent);
  }
  .ab-desktop-header__close {
    color: var(--ab-text);
  }
  .ab-desktop-header__book {
    border-color: var(--ab-accent);
    color: var(--ab-accent);
  }
  .ab-desktop-header__book:hover {
    background-color: var(--ab-accent);
    border-color: var(--ab-accent);
    color: var(--ab-white);
  }

  /* fullscreen overlay menu */
  .ab-desktop-overlay {
    background-color: var(--ab-white);
  }
  .ab-desktop-overlay__menu a {
    font-family: var(--ab-font-heading);
    color: var(--ab-text);
  }
  .ab-desktop-overlay__menu a:hover {
    color: var(--ab-accent);
  }
  .ab-desktop-overlay__discover h4,
  .ab-desktop-overlay__info h4 {
    color: var(--ab-accent);
  }
  .ab-desktop-overlay__discover a {
    color: var(--ab-text);
  }
  .ab-desktop-overlay__discover a:hover {
    color: var(--ab-accent);
  }
  .ab-desktop-overlay__contact li {
    color: var(--ab-text);
  }
  .ab-desktop-overlay__contact li i {
    color: var(--ab-accent);
  }
  .ab-desktop-overlay__social a {
    border-color: var(--ab-border);
    color: var(--ab-text);
  }
  .ab-desktop-overlay__social a:hover {
    background-color: var(--ab-accent);
    border-color: var(--ab-accent);
    color: var(--ab-white);
  }
}

/* =========================================================
   5. BUTTON — template → token
   ========================================================= */
.banner-search .btn,
.view-btn,
.btn1,
.btn2,
.btn-default {
  border-radius: var(--ab-radius-pill);
}

.banner-search .btn:hover,
.view-btn:hover,
.view-btn:focus,
.view-btn.active {
  background-color: color-mix(in srgb, var(--ab-accent) 85%, transparent);
  border-color: transparent;
  color: var(--ab-white);
}

/* =========================================================
   6. FORM — template → token
   ========================================================= */
.banner-search {
  background-color: var(--ab-white);
}
.banner-search .form-control {
  font-family: var(--ab-font-body);
  color: var(--ab-text);
}
.drop-menu {
  border-left: 1px solid var(--ab-border);
  background-color: var(--ab-white);
}
.drop-menu .select {
  color: var(--ab-text);
}

/* =========================================================
   7. NAVIGATION / LINK — template → token
   ========================================================= */
.section-heading span {
  color: var(--ab-accent);
}
.section-heading h3,
.intro-content h3 {
  color: var(--ab-primary);
}
.intro-content p {
  font-family: var(--ab-font-body);
}
.intro-content p,
.banner_text p {
  color: var(--ab-text-muted);
}

/* =========================================================
   8. CARD — template → token
   ========================================================= */
.popular-listing .card {
  background-color: var(--ab-white);
  border-radius: var(--ab-radius-sm);
}
.popular-listing .card .card-body {
  font-family: var(--ab-font-body);
}
.card .card-body p,
.card .card-footer a,
.blog-single-post .post_info p {
  color: var(--ab-text-muted);
}
.card .img-block .la-heart-o,
.card .card-footer a.pull-right {
  color: var(--ab-text-muted);
}

/* =========================================================
   9. BADGE — template → token
   ========================================================= */
.card .img-block span,
.map-box .rate-info > span {
  background-color: var(--ab-badge-bg);
  border-radius: var(--ab-radius-pill);
  color: var(--ab-white);
}

/* =========================================================
   10. SECTION BACKGROUND — template → token
   ========================================================= */
.banner-content h1 {
  color: var(--ab-white);
}
.banner::after {
  background: color-mix(in srgb, var(--ab-primary) 82%, transparent);
}

/* =========================================================
   11. MISC — sentuhan token
   ========================================================= */
.alert-success {
  background-color: var(--ab-surface);
  color: var(--ab-text);
  border-color: var(--ab-accent);
}

/* =========================================================
   12. SPRINT 1 — HOME: COLOR + TYPOGRAPHY tokenization
       Hanya warna/font/weight/line-height/letter-spacing.
       Layout, spacing, animation, responsive: TIDAK disentuh.
   ========================================================= */

/* ---------- Heading: brand heading style (family/weight/ls/color) ---------- */
:is(
  .section-heading h3,
  .intro-content h3,
  .banner-content h1,
  .post_info > h3,
  .blog-grid-posts .post_info > h3,
  .card .card-body h3
) {
  font-family: var(--ab-font-heading);
  font-weight: var(--ab-font-heading-weight);
  letter-spacing: var(--ab-letter-spacing-heading);
  color: var(--ab-primary);
}

/* ---------- Body text: token font + weight + lh ---------- */
:is(
  .intro-content p,
  .banner-search .form-control,
  .post-nfo li,
  .post-nfo li a,
  .blog-single-post .post_info p,
  .card .card-body p
) {
  font-family: var(--ab-font-body);
  font-weight: var(--ab-font-body-weight);
  line-height: var(--ab-line-height-body);
}
.banner-search .form-control {
  color: var(--ab-text);
}

/* ---------- Text muted ---------- */
:is(
  .post-nfo li,
  .post-nfo li a,
  .card .card-body p,
  .card .card-footer a,
  .blog-single-post .post_info p
) {
  color: var(--ab-text-muted);
}

/* ---------- Label/meta pada card: warna teks gelap ---------- */
.card .card-body ul li {
  color: var(--ab-text);
}

/* ---------- Border template → token ---------- */
:is(
  .card .card-body,
  .card .card-footer,
  .post_info,
  .intro-thumb
) {
  border-color: var(--ab-border);
}
.card .card-body ul {
  border-bottom-color: var(--ab-border);
}
.card .card-body ul li {
  border-right-color: var(--ab-border);
}
.intro-thumb-row {
  background-color: var(--ab-white);
}
.drop-menu {
  border-left-color: var(--ab-border);
}

/* ---------- Overlay/backdrop accent (bukan layout, bukan animasi) ---------- */
/* CATATAN: `.card .img-block .overlay` TIDAK disentuh — elemen itu
   container gradient/harga/badge bawaan template. */
.srch-btn .overlay {
  background-color: color-mix(in srgb, var(--ab-accent) 80%, transparent);
}
.blog-img:before {
  background-color: var(--ab-accent-soft);
}

/* banner H1 berada di atas overlay gelap -> harus tetap putih,
   walaupun rule heading sprint-1 mendahului */
.banner-content h1 {
  color: var(--ab-white);
}