/* VUONGTHY design tokens — nguồn duy nhất cho màu/font/spacing. */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-vietnamese.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

:root {
  /* Colors — Dark turquoise green kết hợp cam logo */
  --vt-turquoise-dark: #102B23; /* Dark turquoise green cho footer, announcement bar, dark sections */
  --vt-turquoise: #163E33;      /* Dark turquoise green cấp 2 */
  --vt-orange: #F07D1E;         /* Cam nguyên bản từ logo Vương Thy */
  --vt-orange-600: #D86810;     /* Cam hover */
  --vt-orange-700: #B84E07;     /* Cam đậm đạt AA contrast trên nền sáng */
  --vt-orange-200: #FDE8D7;     /* Cam nhạt cho badge, highlight */

  --vt-black: #102B23;          /* Dark turquoise green làm nền tối chủ đạo */
  --vt-ink: #0E221B;            /* Chữ chính */
  --vt-muted: #5A7067;          /* Chữ phụ */
  --vt-white: #FFFFFF;
  --vt-cream: #F3F7F5;          /* Xám bạc ánh ngọc nhạt (nền xen kẽ, nền thẻ sản phẩm) */
  --vt-line: #DCE5E1;           /* Viền, vạch ngăn */
  --vt-gold: #F07D1E;           /* Điểm nhấn: nút cam, link cam, accent */
  --vt-gold-600: #D86810;
  --vt-gold-200: #FDE8D7;
  --vt-gold-700: #B84E07;       /* Chữ cam trên nền sáng (đạt AA 5.2:1) */
  --vt-silver: #A3B5AD;         /* Bạc ánh ngọc: viền, nhãn phụ trên nền tối */
  --vt-silver-600: #748880;
  --vt-black-2: #16382E;        /* Gradient section tối */
  --vt-dark-bg: none;
  --vt-hero-overlay: linear-gradient(75deg, rgba(12,32,26,.92) 0%, rgba(12,32,26,.68) 45%, rgba(12,32,26,.22) 80%);
  --vt-overlay: linear-gradient(180deg, rgba(14,35,29,0) 35%, rgba(14,35,29,.85) 100%);

  /* Typography */
  --vt-font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --vt-stretch-head: 75%;
  --vt-fs-display: clamp(2.75rem, 1.6rem + 4.8vw, 5.5rem);
  --vt-fs-h1: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
  --vt-fs-h2: clamp(1.25rem, 1.05rem + .8vw, 1.875rem); /* tiêu đề section gọn như Gymshark/Nike */
  --vt-fs-h3: clamp(1.125rem, 1rem + .4vw, 1.375rem);
  --vt-fs-body: clamp(1rem, .97rem + .12vw, 1.0625rem);
  --vt-fs-small: clamp(.8125rem, .8rem + .08vw, .875rem);
  --vt-fs-eyebrow: clamp(.75rem, .74rem + .06vw, .8125rem);
  --vt-lh-tight: 1.02;
  --vt-lh-head: 1.1;
  --vt-lh-body: 1.6;
  --vt-ls-head: .01em;
  --vt-ls-caps: .08em;
  --vt-ls-eyebrow: .14em;

  /* Spacing (4px base) */
  --vt-s-1: 4px;  --vt-s-2: 8px;  --vt-s-3: 12px; --vt-s-4: 16px; --vt-s-5: 24px;
  --vt-s-6: 32px; --vt-s-7: 48px; --vt-s-8: 64px; --vt-s-9: 96px; --vt-s-10: 128px;
  --vt-section-y: clamp(48px, 32px + 3.6vw, 96px);
  --vt-gutter: 16px;
  --vt-container: 1440px;
  --vt-container-narrow: 820px;

  /* Layout */
  --vt-header-h: 56px;
  --vt-announce-h: 36px;
  --vt-radius: 0px;
  --vt-radius-card: 2px;

  /* Motion */
  --vt-ease: 180ms cubic-bezier(.2, .7, .2, 1);
  --vt-ease-out: cubic-bezier(.16, 1, .3, 1);
  --vt-reveal-dur: 700ms;
  --vt-shadow: 0 8px 30px rgba(0, 0, 0, .08);
}

@media (min-width: 600px) { :root { --vt-gutter: 24px; } }
@media (min-width: 1200px) { :root { --vt-gutter: 40px; --vt-header-h: 72px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .vt-reveal { opacity: 1 !important; transform: none !important; }
}