:root {
  /* Màu — ước lượng từ ảnh Figma, xem docs/design-tokens.md */
  --color-bg: #fdfcf8;
  --color-bg-alt: #fdfcf8;
  --color-text: #101010;
  --color-text-muted: #5c5c5c;
  --color-dark: #101010;
  --color-accent: #8b1e2b;
  --color-border: #d8d2c4;

  /* Typography — khớp Figma: Cormorant Garamond (heading) + Manrope (body) */
  --font-heading: "Cormorant Garamond", serif;
  --font-body: "Manrope", sans-serif;

  /* Spacing scale */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
  --space-6: 96px;
  --space-7: 140px;

  /* Figma layout — frame 1440, lề nội dung 50px, section cách nhau 116px */
  --frame-w: 1440px;
  --content-pad: 50px;
  --gap-section: 116px;

  /* ĐƠN VỊ CO GIÃN THEO MÀN HÌNH (cách A) — dùng toàn site để giữ đúng tỉ lệ Figma.
     Ở 1440px = 1px (đúng số Figma); màn nhỏ hơn → co theo tỉ lệ; lớn hơn 1440 →
     chặn trần ở 1px (giữ nguyên kích thước Figma). Mọi số px cố định lấy từ Figma
     quy sang calc(N * var(--u)) trong dải desktop để scale đồng nhất. */
  --u: min(1px, calc(100vw / 1440));

  /* Bản KHÔNG chặn trần — dùng cho khối full-bleed (footer) cần LUÔN đầy màn hình
     và scale theo màn ở mọi bề rộng (kể cả lớn hơn 1440). */
  --uf: calc(100vw / 1440);

  /* Breakpoints (comment-only, dùng trong media query) */
  /* mobile: <600px | tablet: 600-1024px | desktop: >1024px */

  /* Animation timing */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 0.2s;
  --duration-base: 0.4s;

  /* Easing/duration lấy đúng từ Figma prototype (xem docs/design-animations.md) */
  --ease-in: cubic-bezier(0.42, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.58, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1); /* xấp xỉ CUSTOM_SPRING */
  --anim-slow: 0.8s; /* 800ms — hover card/menu */
  --anim-btn: 0.6s; /* 600ms — primary button */
  --anim-reveal: 3.8s; /* 3800ms — Section 2 reveal chậm */
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  /* KHÔNG dùng `scrollbar-gutter: stable`: dải trống nó chừa lại nằm NGOÀI vùng
     `position: fixed` → khi mở menu (thanh cuộn biến mất) scrim không phủ tới,
     lộ vệt sáng bên phải. Chống "giật" bằng `.is-scroll-locked` bù đúng bề rộng
     thanh cuộn (biến --sbw, xem components.css + main.js). */
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

ul {
  list-style: none;
}

h1,
h2,
h3 {
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1.15;
}

.container {
  width: 100%;
  max-width: var(--frame-w);
  margin-inline: auto;
  padding-inline: var(--space-2);
}

@media (min-width: 1024px) {
  .container {
    padding-inline: var(--content-pad);
  }
}

/* Nhịp dọc giữa các section = 116px như Figma (đo từ toạ độ bbox) */
.home-section {
  margin-top: 72px;
}

@media (min-width: 1024px) {
  .home-section {
    margin-top: calc(116 * var(--u)); /* nhịp dọc 116px Figma, co theo tỉ lệ */
  }
}

/* Heading section — Cormorant Garamond 500, 36px/44, letter-spacing 0.72px (~0.02em) */
.section-heading {
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 500;
  font-style: italic;
  font-size: 28px;
  line-height: 1.22;
  letter-spacing: 0.02em;
  color: var(--color-text);
}

@media (min-width: 1024px) {
  .section-heading {
    font-size: calc(36 * var(--u));
    line-height: calc(44 * var(--u));
  }
}

.section-heading--left {
  text-align: left;
}

/* Body/subtext — Manrope 400, 14px/26, letter-spacing 0.28px (~0.02em) */
.section-subtext {
  text-align: center;
  color: var(--color-text);
  max-width: 560px;
  margin-inline: auto;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 26px;
  letter-spacing: 0.02em;
}

@media (min-width: 1024px) {
  .section-subtext {
    max-width: calc(560 * var(--u));
    font-size: calc(14 * var(--u));
    line-height: calc(26 * var(--u));
  }
}

.section-subtext--left {
  text-align: left;
  margin-inline: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}