/* ==========================================================================
   NORTON PARK - BRAND DESIGN TOKENS
   Nguon: Brand Guidelines (Markdown)/brand-guidelines.md, muc 1.8 va 1.9.
   Moi gia tri mau o day deu lay nguyen tu brand guideline, khong tu che.
   ========================================================================== */

:root{

  /* --- Primary colours (guideline 1.8) --------------------------------- */
  --dark-pine:#5D614F;         /* Pantone 418 C. Text chinh, UI chinh */
  --beige-sand:#DCD3C0;        /* Pantone 7527 C. Nen chu dao */
  --hoadau-brown:#594A42;      /* Pantone 411 C. Nen toi, text chinh */
  --champagne-bronze:#A78061;  /* Pantone 4655 C. Accent, CTA, canh hoa */

  /* --- Beige palette ---------------------------------------------------- */
  --stone-beige:#E1DBC9;
  --warm-sand:#D5CEB8;
  --soft-sand:#C9C1AE;
  --sandstone:#BDB5A0;
  --natural-taupe:#B0A892;
  --earth-beige:#A39A84;

  /* --- Green palette ---------------------------------------------------- */
  --moss-green:#545744;
  --soft-moss:#666956;
  --olive-mist:#797B69;
  --sage-green:#8C8F7D;
  --willow-sage:#A5A795;
  --sage-mist:#BFC0B3;

  /* --- Blue grey palette ------------------------------------------------ */
  --slate-blue-grey:#6B7B84;
  --steel-blue:#7D8C95;
  --blue-mist:#919FA7;
  --silver-blue:#A8B4BA;
  --cloud-blue:#BEC7CB;
  --morning-sky:#D6DCDD;

  /* --- Brown palette ---------------------------------------------------- */
  --earth-brown:#5F4B3B;
  --walnut-brown:#715F50;
  --soft-walnut:#857466;
  --stone-brown:#9B8B7A;
  --clay-brown:#B3A396;
  --sand-taupe:#CDC3BA;

  /* --- Grey palette ----------------------------------------------------- */
  --charcoal-grey:#3C3C3C;
  --graphite-grey:#565656;
  --slate-grey:#707070;
  --stone-grey:#8C8C8C;
  --mist-grey:#A9A9A9;
  --silver-mist:#C8C8C8;

  /* --- Gamuda Land ------------------------------------------------------ */
  --gamuda-red:#E31937;        /* Chi dung cho badge Gamuda Land */

  /* ======================================================================
     SEMANTIC TOKENS. Dung nhung bien duoi day khi code, khong goi thang
     ten mau o tren. Doi 1 dong o day la doi ca trang.
     ====================================================================== */

  /* Nen, tu sang den toi */
  --bg-0:#FBFAF6;              /* Off white. Vung sach nhat */
  --bg-1:#F2EEE4;              /* Nen phu, mat the */
  --bg-2:var(--stone-beige);   /* #E1DBC9 */
  --bg-3:var(--beige-sand);    /* #DCD3C0. Nen chu dao theo guideline */
  --bg-4:var(--soft-sand);     /* #C9C1AE. Section nhan */
  --bg-dark:var(--hoadau-brown);   /* #594A42. Section toi */
  --bg-dark-alt:var(--dark-pine);  /* #5D614F. Section toi thay the */

  /* Chu */
  --tx-1:var(--hoadau-brown);      /* Heading */
  --tx-2:var(--dark-pine);         /* Sub-heading, text quan trong */
  --tx-3:#6E6455;                  /* Body */
  --tx-4:var(--earth-beige);       /* Caption, chu phu */
  --tx-on-dark:#F4F0E7;
  --tx-on-dark-2:var(--warm-sand);   /* #D5CEB8. Dat WCAG AA tren nen Hoa Dau Brown */

  /* Accent va CTA */
  --accent:var(--champagne-bronze);
  --accent-deep:#8E6A4E;           /* Hover, toi hon 12% */
  --accent-soft:rgba(167,128,97,.14);

  /* Duong ke */
  --line-1:rgba(89,74,66,.16);
  --line-2:rgba(89,74,66,.30);
  --line-on-dark:rgba(244,240,231,.22);

  /* --- Typography -------------------------------------------------------
     Font stack duoc khai bao trong fonts.css.
     Thang chu dung clamp de tu co gian, khong can media query.
     -------------------------------------------------------------------- */
  --d1:clamp(2.6rem, 6.2vw, 5.2rem);      /* Hero H1. The Seasons */
  --d2:clamp(1.95rem, 4.1vw, 3.3rem);     /* Section H2. The Seasons */
  --d3:clamp(1.35rem, 2.1vw, 1.85rem);    /* Card H3. The Seasons */
  --lead:clamp(1.04rem, 1.3vw, 1.22rem);  /* Doan mo. Gotham */
  --body:1rem;                             /* Body. Gotham */
  --small:.86rem;
  --eyebrow:.68rem;                        /* Futura, uppercase, tracking rong */

  --track-eyebrow:.32em;   /* letter-spacing cho eyebrow va nav */
  --track-btn:.16em;       /* letter-spacing cho nut */
  --track-logo:.20em;

  /* --- NUT CHINH TI LE CUA CA TRANG --------------------------------------
     Ca 89 khai bao font-size trong page.css deu la rem, trong do 75 cai viet
     cung khong co clamp. Nghia la chi co MOT cach duy nhat keo het chung theo
     man hinh, la doi font-size cua goc. Doi o day la doi ca trang.

     Ngoai Screen Lock, tuc duoi 1041px hoac man rat thap: trang cuon tu do,
     cao bao nhieu cung duoc, nen chi BE NGANG moi la rang buoc. Dung vw.

     Trong Screen Lock: section bi khoa dung 100dvh nen CHIEU CAO moi la rang
     buoc chat. Dung vw o day thi man 1920x700 se phong chu to bang man
     1920x1080 va tran ngay. Vi vay dung vmin, tuc canh NHO HON cua man hinh.
     Xem media query o cuoi file.

     Do duoc:  360px -> 16.0    1366x768  -> 16.1    2560x1440 -> 23.1
               768px -> 18.5    1440x900  -> 17.5    3008x1692 -> 25.8
              1024px -> 19.0    1920x1080 -> 19.3    1440x650  -> 15.0
     -------------------------------------------------------------------- */
  font-size:clamp(16px, 0.62vw + 13.7px, 19px);

  /* --- Nhip va bo cuc ---------------------------------------------------- */
  --gutter:clamp(20px, 3.2vw, 104px);
  --bay:clamp(56px, 8.5vw, 240px);   /* Padding doc cua section khi cuon tu do */
  /* Fluid container. KHONG con tran pixel thap.
     Ban cu dung min(92vw,1680px) nen tu 1920 tro len la dong bang: o 2560
     con 66% be ngang man hinh, o 3008 con 56%, le moi ben 657px.
     Do duoc bay gio: 1440 -> 1354px,  1920 -> 1805px,
                      2560 -> 2406px,  3008 -> 2800px. */
  --wrap:min(94vw, 2800px);

  /* Chieu cao header. Dung o 3 noi: .nav-in, padding-top cua section khoa
     man hinh, va rootMargin cua IntersectionObserver trong page.js.
     Doi o day la doi ca ba.

     LUU Y: gia tri nay la clamp() nen getPropertyValue('--nav-h') tra ve
     nguyen chuoi "clamp(...)" chu KHONG phai so px. page.js vi vay doc chieu
     cao that cua the .nav bang getBoundingClientRect, khong parseInt token nay. */
  --nav-h:clamp(54px, 3.9rem, 96px);

  /* --- Bo goc va chuyen dong --------------------------------------------- */
  --r-btn:999px;      /* CTA bo tron hoan toan theo mau "Book Now" guideline 3.1 */
  --r-card:.62rem;
  --r-input:.5rem;
  --ease:cubic-bezier(.16,1,.3,1);
}

@media (max-width:820px){
  :root{ --nav-h:54px; }
}

/* Trong Screen Lock chieu cao la rang buoc chat, nen ti le theo vmin.
   Nguong 1041x600 phai trung khop voi khoi Screen Lock trong page.css. */
@media (min-width:1041px) and (min-height:600px){
  :root{ font-size:clamp(15px, 1.05vmin + 8px, 26px); }
}

/* ==========================================================================
   GHI CHU AP DUNG
   - Kieu nut CTA duoc dinh nghia trong page.css, khong dat o day de tranh
     hai noi cung khai bao mot class.
   - Nen chu dao la --bg-3 (#DCD3C0 Beige Sand) theo guideline. Neu ca trang
     deu dung mau nay se bi nang, nen dan xen --bg-0 va --bg-1 giua cac section.
   - Champagne Bronze tren nen Beige Sand chi dat tuong phan 2.4:1, KHONG dat
     chuan WCAG AA cho chu nho. Vi vay CTA tren nen sang dung nen bronze dac
     voi chu trang. Ban vien rong chi dung tren nen toi hoac tren anh.
   - Khong dung Champagne Bronze cho body text.
   - Badge Gamuda Land do khong dung tren landing page nay theo yeu cau client,
     badge chi ap dung cho post social.
   ========================================================================== */