/**
 * Design tokens — khớp với reference palm-lane-demo.vercel.app/destin
 * Giá trị lấy trực tiếp từ CSS variables của reference, không phỏng đoán.
 * Đổi màu/khoảng cách toàn site tại đây; các file khác chỉ dùng biến.
 */

:root {
  /* ---- Nền & bề mặt (từ reference) ------------------------------- */
  --sl-paper:   #F7F3E9;  /* nền trang chính */
  --sl-cream:   #EFE8D8;  /* nền vùng trầm hơn */
  --sl-card:    #FFFDF7;  /* nền thẻ */
  --sl-jade:    #0E4637;  /* xanh ngọc — nền đậm */
  --sl-forest:  #17604B;  /* xanh lá đậm — nhấn */
  --sl-deep:    #07211A;  /* nền band tối (CTA) */
  --sl-deeper:  #051A14;  /* nền footer */

  /* ---- Chữ --------------------------------------------------------- */
  --sl-ink:     #1E332B;  /* chữ chính trên nền sáng */
  --sl-dim:     #5C6F66;  /* chữ phụ, metadata */
  --sl-mist:    #BCDCCF;  /* chữ phụ trên nền tối */
  --sl-on-deep: #F7F3E9;  /* chữ chính trên nền tối */

  /* ---- Nhấn vàng --------------------------------------------------- */
  --sl-gold:      #FF9500;  /* nền nút, dải marquee, gạch nhấn */
  --sl-gold-soft: #F3B643;  /* chữ vàng TRÊN NỀN TỐI (link, menu active) */
  /* Vàng của reference trên nền kem chỉ đạt 2.35:1 — dưới chuẩn WCAG AA.
     Sắc đậm hơn này dùng riêng cho CHỮ vàng trên nền sáng: 4.94:1.
     Mắt thường gần như không phân biệt ở cỡ nhãn 11px. */
  --sl-gold-ink:  #86632B;

  /* ---- Đường viền -------------------------------------------------- */
  --sl-border:        rgba(14, 70, 55, .18);
  --sl-border-soft:   rgba(14, 70, 55, .10);
  --sl-border-strong: rgba(14, 70, 55, .32);
  --sl-border-light:  rgba(247, 243, 233, .55);  /* viền trên nền tối */

  /* ---- Tương thích ngược (bí danh của token cũ) -------------------- */
  --sl-bg:         var(--sl-paper);
  --sl-text:       var(--sl-ink);
  --sl-muted:      var(--sl-dim);
  --sl-green:      var(--sl-forest);
  --sl-green-deep: var(--sl-jade);
  --sl-earth:      var(--sl-gold);

  /* ---- Font (đúng reference) --------------------------------------- */
  --sl-font-display: "Marcellus", Georgia, "Times New Roman", serif;
  --sl-font-body:    "Figtree", system-ui, -apple-system, "Helvetica Neue", sans-serif;

  /* ---- Thang chữ --------------------------------------------------- */
  --sl-fs-hero:  clamp(2.75rem, 5.6vw, 4.75rem);  /* 44 → 76px */
  --sl-fs-h1:    clamp(2.25rem, 4.2vw, 3.5rem);
  --sl-fs-h2:    clamp(1.875rem, 3.4vw, 2.875rem); /* → 46px */
  --sl-fs-h3:    clamp(1.375rem, 2.2vw, 1.75rem);
  --sl-fs-h4:    clamp(1.125rem, 1.5vw, 1.375rem);
  --sl-fs-body:  1.0625rem;   /* 17px, đúng lede của reference */
  --sl-fs-small: .875rem;     /* 14px */
  --sl-fs-meta:  .6875rem;    /* 11px — eyebrow */
  --sl-fs-nav:   .8125rem;    /* 13px — menu */

  --sl-lh-display: 1.12;
  --sl-lh-body:    1.65;
  --sl-ls-meta:    .24em;     /* 2.64px trên 11px */
  --sl-ls-nav:     .08em;     /* 1.04px trên 13px */
  --sl-ls-marquee: .18em;     /* 2.16px trên 12px */

  /* ---- Nhịp khoảng cách -------------------------------------------- */
  --sl-space-section: clamp(4rem, 7vw, 8rem);
  --sl-space-block:   clamp(2rem, 4vw, 3.5rem);
  --sl-gutter:        clamp(1.25rem, 4vw, 3.5rem);
  --sl-measure:       44rem;

  /* ---- Bo góc (reference dùng 22px cho ảnh, 10px cho nút) ---------- */
  --sl-radius-media:  22px;
  --sl-radius-button: 10px;
  --sl-radius-card:   14px;

  /* ---- Chuyển động --------------------------------------------------*/
  --sl-ease:     cubic-bezier(.2, .7, .2, 1);
  --sl-dur:      .55s;
  --sl-dur-fast: .25s;
}

@media (prefers-reduced-motion: reduce) {
  :root { --sl-dur: .01ms; --sl-dur-fast: .01ms; }
}

/* ---- Trạng thái hiện dần khi cuộn (do sl-motion.js điều khiển) ---- */
.sl-will-reveal {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity var(--sl-dur) var(--sl-ease) var(--sl-reveal-delay, 0ms),
              transform var(--sl-dur) var(--sl-ease) var(--sl-reveal-delay, 0ms);
}
.sl-will-reveal.sl-in { opacity: 1; transform: none; }

/* Không có JS thì sl-motion.js không gắn .sl-will-reveal → nội dung hiện sẵn. */

@media (prefers-reduced-motion: reduce) {
  .sl-will-reveal { opacity: 1; transform: none; transition: none; }
}