/* ==========================================================================
   AOV Demo Tool — Base
   Font brand + reset + typography mặc định + 2 utility dùng chung.
   Chỉ đọc biến từ tokens.css — không khai màu/kích thước thô.
   ========================================================================== */

/* --- Font phụ của brand (Ubuntu) — @import phải đứng trước mọi rule ------- */
@import url("https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;700&display=swap");

/* --- Font brand chính: Origin (Light 300 / Bold 700 / Heavy 900) ---------
   Origin KHÔNG có weight 400 — "regular" của trang map về 300.            */
@font-face {
  font-family: "Origin";
  src: url("../assets/fonts/Origin-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Origin";
  src: url("../assets/fonts/Origin-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Origin";
  src: url("../assets/fonts/Origin-Heavy.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* --- Reset ---------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
h1, h2, h3, h4, h5, h6,
p,
figure,
form {
  margin: 0;
}

img,
svg {
  display: block;
  max-width: 100%;
}

button,
input {
  font: inherit;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- Nền + typography mặc định -------------------------------------------- */
html,
body {
  height: 100%;
  background: var(--c-white);
  color: var(--c-ink);
  font-family: var(--font-ui);
  font-weight: var(--fw-light);
  overflow: hidden;              /* trang gói gọn đúng 1 màn, không scroll */
}

/* --- Utility: khung căn giữa nội dung ------------------------------------- */
.container {
  /* Cột nội dung không quá 1400px, và luôn chừa --gutter mỗi bên.
     @1920 → width 1400, lề 260 mỗi bên: khớp Figma. */
  width: min(var(--container-max), 100% - var(--gutter) * 2);
  margin-inline: auto;
}

/* --- Utility: ẩn khỏi mắt, screen-reader vẫn đọc -------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}

/* --- Focus nhìn thấy được (chỉ bàn phím) ---------------------------------- */
:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: var(--r-control);
}

/* --- Tôn trọng prefers-reduced-motion ------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    /* HAI dòng `delay` này là phần hay bị bỏ sót nhất của khối reduced-motion,
       và thiếu chúng thì khối này gần như VÔ DỤNG với trang có nhịp xếp bậc:
       ép `duration` về 0.01ms chỉ giết thời lượng, còn `animation-delay` vẫn
       nguyên — nên cả cầu thang bậc vẫn diễn, chỉ là mỗi bậc nháy một cái thay
       vì trôi. Đo được trên popup "Demo complete" ở chế độ reduce: +250ms vẫn
       còn 3 phần vô hình, nút hành động chính (`.done__cta`) phải chờ **450ms**
       mới xuất hiện — đúng thứ người bật reduced-motion xin được miễn.
       Cùng cơ chế đó áp lên các `.sect` của panel (bậc tới 398ms).
       `0.01ms` chứ không `0s` cho duration là cố ý: `animationend`/
       `transitionend` vẫn bắn, nên đoạn JS nào chờ sự kiện đó để dọn class
       không bị treo. Còn `delay` thì về thẳng 0s — không có lý do giữ lại. */
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}