/* === VARIABLES: Design Tokens — Riben Hopper ===
   Nguồn: 1-Home__6_1_2026_12_07_19_PM_.html (SingleFile)
   Tất cả giá trị lấy trực tiếp từ CSS gốc, không thay đổi.
*/

/* ----------------------------------------
   Fonts
   @font-face gốc dùng embedded woff2 base64.
   Khai báo dưới đây dùng Google Fonts CDN thay thế
   (cùng family + weight, không thay đổi giá trị design).
---------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@200;300;400;500;600;700;800&family=Poppins:wght@500;600;700&display=swap');

:root {
  /* --- Font families --- */
  --font-primary: 'DM Sans', system-ui, sans-serif;
  --font-heading: 'Poppins', system-ui, sans-serif;

  /* --- Font weights --- */
  --fw-light:       200;
  --fw-regular:     400;
  --fw-medium:      500;
  --fw-semibold:    600;
  --fw-bold:        700;
  --fw-extrabold:   800;

  /* --- Font sizes (từ CSS gốc) --- */
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   20px;
  --fs-xl:   21px;
  --fs-2xl:  28px;
  --fs-3xl:  30px;
  --fs-4xl:  32px;
  --fs-5xl:  38px;
  --fs-6xl:  58px;
  --fs-7xl:  78px;

  /* --- Line heights (từ CSS gốc) --- */
  --lh-xs:   18px;
  --lh-sm:   22px;
  --lh-md:   26px;
  --lh-lg:   28px;
  --lh-xl:   30px;
  --lh-2xl:  34px;
  --lh-3xl:  35px;
  --lh-4xl:  58px;
  --lh-5xl:  62px;
  --lh-6xl:  82px;

  /* --- Letter spacings (từ CSS gốc) --- */
  --ls-tight:   -4.7px;
  --ls-snug:    -1.2px;
  --ls-wide:     2.8px;
  --ls-wider:    6px;

  /* --- Colors (từ CSS gốc, theo tần suất xuất hiện) --- */
  --color-white:      #fff;
  --color-dark:       #212731;    /* near-black — wordmark, body text */
  --color-navy:       #263040;    /* dark navy — headings, body text */
  --color-primary:    #b22a2c;    /* red — logo, active nav, CTA bg */
  --color-red-alt:    #db291d;    /* red variant — gradients, borders */
  --color-gray-dark:  #414141;    /* dark gray */
  --color-gray-mid:   #5d5d5d;    /* mid gray */
  --color-gray-light: #c2beb8;    /* light gray */
  --color-bg-light:   #f4f3f0;    /* off-white background */
  --color-bg-warm:    #f6f5f3;    /* warm off-white */
  --color-border:     #e8e5e0;    /* border/divider */
  --color-primary-dark:  #8c2224; /* darker red */
  --color-primary-deep:  #4c1213; /* deepest red */
  --color-overlay:    rgba(33, 17, 7, 0.5); /* #21110780 */
  --color-transparent: transparent;

  /* --- Layout --- */
  --container-max:    1920px;  /* gốc: width:1920px */
  --header-height:    72px;    /* gốc: height:72px */
}