/* ============================================================
   Luxshine Hair — Design Tokens
   Nguồn: Figma variables (PSTBMilffR0JYg8xazgHiK) + web-demo/DESIGN.md
   KHÔNG hardcode màu/typo ngoài file này.
   ============================================================ */

/* ---------- FONT FACES ---------- */
/* SVN-Gilroy ships with ascent 80% / descent 25%, which sets its capitals about 2px above the
   middle of a line at 14-16px, so labels sat high in buttons, pills and tabs. 90% / 15% keeps
   the same total (line-height: normal is unchanged) and puts the capitals on the line's centre. */
@font-face {
  font-family: "Bergola";
  src: url("../fonts/Bergola.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Dynalight";
  src: url("../fonts/Dynalight-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SVN-Gilroy";
  src: url("../fonts/SVN-Gilroy Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  ascent-override: 90%;
  descent-override: 15%;
}
@font-face {
  font-family: "SVN-Gilroy";
  src: url("../fonts/SVN-Gilroy Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  ascent-override: 90%;
  descent-override: 15%;
}
@font-face {
  font-family: "SVN-Gilroy";
  src: url("../fonts/SVN-Gilroy Italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  ascent-override: 90%;
  descent-override: 15%;
}
/* Light Italic: the photo note under Come Meet Us (about.html, file "about us 2.ai", 2026-10-21). */
@font-face {
  font-family: "SVN-Gilroy";
  src: url("../fonts/SVN-Gilroy Light Italic.otf") format("opentype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
  ascent-override: 90%;
  descent-override: 15%;
}
@font-face {
  font-family: "SVN-Gilroy";
  src: url("../fonts/SVN-Gilroy Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  ascent-override: 90%;
  descent-override: 15%;
}
@font-face {
  font-family: "SVN-Gilroy";
  src: url("../fonts/SVN-Gilroy SemiBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  ascent-override: 90%;
  descent-override: 15%;
}
@font-face {
  font-family: "SVN-Gilroy";
  src: url("../fonts/SVN-Gilroy Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  ascent-override: 90%;
  descent-override: 15%;
}
@font-face {
  font-family: "SVN-Gilroy";
  src: url("../fonts/SVN-Gilroy XBold.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  ascent-override: 90%;
  descent-override: 15%;
}
@font-face {
  font-family: "SVN-Gilroy";
  src: url("../fonts/SVN-Gilroy Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  ascent-override: 90%;
  descent-override: 15%;
}

:root {
  /* ---------- BRAND COLORS (Figma) ---------- */
  --color-primary: #d6b75f;        /* PRIMARY/500 — gold */
  --color-orange: #db4521;         /* ORANGE/500 */
  --color-dark-red: #711300;       /* DARK-RED/500 */
  --color-red: #ce1111;            /* "VIETNAM" at Luxshine Today, file "about us 2.ai" (2026-10-21) */
  --color-black: #141414;          /* Color Base/BLACK */
  --color-black-deep: #111111;     /* Black (dark section bg) */
  --color-white: #ffffff;          /* WHITE */
  --color-font: #3a2d32;           /* "font" — brownish body text */

  /* PRIMARY scale (gold) */
  --primary-50:  #fbf8ef;
  --primary-100: #f6f0e0;   /* beige #F6F0E0 — nền be thống nhất (user 2026-10-07) */
  --primary-200: #f4ebd3;
  --primary-300: #eadbaf;
  --primary-400: #dec57d;
  --primary-500: #d6b75f;
  --primary-600: #776635;
  --primary-700: #4d4222;
  --primary-800: #332c17;
  --primary-900: #2b2513;

  /* ORANGE scale */
  --orange-50:  #fbece9;
  --orange-100: #fae4df;
  --orange-200: #f5cbc1;
  --orange-300: #eda290;
  --orange-400: #e2684b;
  --orange-500: #db4521;
  --orange-600: #7a2612;
  --orange-700: #4e190c;
  --orange-800: #341108;
  --orange-900: #2c0e07;

  /* DARK-RED scale */
  --darkred-50:  #f1e7e6;
  --darkred-100: #eaddda;
  --darkred-200: #d8bdb8;
  --darkred-300: #b88980;
  --darkred-400: #8c4030;
  --darkred-500: #711300;
  --darkred-600: #3f0b00;
  --darkred-700: #280700;
  --darkred-800: #1b0500;
  --darkred-900: #170400;

  /* GREY scale */
  --grey-50:  #fcfcfc;
  --grey-100: #fafafa;
  --grey-200: #f6f6f6;
  --grey-300: #efefef;
  --grey-400: #e5e5e5;
  --grey-500: #dfdfdf;
  --grey-600: #7c7c7c;
  --grey-700: #505050;
  --grey-800: #353535;
  --grey-900: #2d2d2d;

  /* Semantic */
  --color-success: #12b76a;
  --color-error:   #f04438;
  --color-warning: #f79009;

  /* Text roles */
  --text-primary:   #141414;
  --text-secondary: var(--color-font);  /* không dùng xám cho chữ (user 2026-10-07) */
  --text-muted:     var(--color-font);  /* không dùng xám cho chữ (user 2026-10-07) */
  --text-on-dark:   #ffffff;
  --text-gold:      #d6b75f;

  /* Surfaces */
  --surface-page:   #ffffff;
  --surface-cream:  #f6f0e0;   /* beige #F6F0E0 — nền be thống nhất (user 2026-10-07) */
  --ty-le-video: 16 / 9;       /* khung video */
  --ty-le-banner: 21 / 9;      /* banner full-screen */
  --ty-le-blog: 4 / 3;         /* thumbnail ảnh blog (vai trò 'blog', user chốt 2026-10-08) */
  --ty-le-feedback: 9 / 16;    /* ảnh feedback/story khách hàng dọc (vai trò 'feedback', user chốt 2026-10-08) */
  --ty-le-avatar: 1 / 1;       /* ảnh vuông: avatar/chân dung tư vấn viên (vai trò 'avatar', user chốt 2026-10-12) */
  --ty-le-hero: 21 / 9;        /* ảnh hero/banner cinematic ultrawide (vai trò 'hero', user chốt 2026-10-12) */
  --ty-le-san_pham: 1 / 1;     /* ảnh vuông của ô sản phẩm / nhóm sản phẩm (vai trò 'san_pham', user chốt 2026-10-13: "Hình tỉ lệ 1:1") */
  --ty-le-editorial: 4 / 5;    /* ảnh DỌC kiểu tạp chí trên landing (vai trò 'editorial' trong hợp đồng tỉ lệ) */
  --ty-le-khoi_vuong: 1 / 1;   /* khối ảnh VUÔNG cỡ lớn trên landing (vai trò 'khoi_vuong' trong hợp đồng tỉ lệ) */
  /* Homepage theo ảnh thiết kế Artboard 1@3x-100.jpg (user chốt 2026-10-15: "Đăng ký 5 tỉ lệ mới theo ảnh") */
  --ty-le-khung_doc: 9 / 10;   /* ô sản phẩm, ô chuẩn đuôi tóc A+, ảnh bước sản xuất (ảnh gốc 810×890) */
  --ty-le-khoi_ngang: 11 / 10; /* ảnh minh hoạ ngang nhẹ cạnh khối chữ (ảnh nón lá) */
  --ty-le-tin: 3 / 2;          /* ảnh minh hoạ 3:2 (ảnh stylist ở Made for Professional Salons) */
  --ty-le-video_khung: 7 / 5;  /* khung video / poster nhà máy */
  --ty-le-tour: 5 / 3;         /* ảnh đầu thẻ Factory Tour */
  /* Homepage v1 theo ảnh "anh web/wireframe/homepage.jpg" (user chốt 2026-10-16: "Đăng ký tỉ lệ đo từ ảnh") */
  --ty-le-buoc_dat_hang: 19 / 10; /* ảnh đầu thẻ Easy to Start */
  --ty-le-khoa_hoc: 4 / 3;        /* 4:3 trong hợp đồng; Comment Tool gán cho khung bước Easy to Start của v3 (cmvahjul6qu3p) */
  --ty-le-oem_khoi_dau: 17 / 10;  /* thẻ You Have an Idea / You Have a Sample (OEM/ODM) */
  --ty-le-ban_do: 7 / 4;          /* bản đồ giao hàng (Why Salons Work With Luxshine) */
  --ty-le-chung_chi: 3 / 4;       /* ảnh chứng chỉ (Certificate) */
  --ty-le-bai_social: 3 / 4;      /* ô bài đăng trong dải Social (khác vai trò social = og:image) */
  --ty-le-danh_gia: 7 / 9;        /* ô ảnh đánh giá salon (Salon Reviews / Trust) */
  --ty-le-tu_van_vien: 10 / 13;   /* chân dung trong thẻ tư vấn viên */
  /* Trang About theo file "about us 2.ai" (user 2026-10-21: đăng ký tỉ lệ đo từ file) */
  --ty-le-cau_chuyen: 6 / 5;      /* ảnh hai hàng Our Story (375×315pt) */
  --ty-le-hanh_trinh: 6 / 5;      /* ảnh đầu thẻ mốc năm Our Journey (150×125pt) */
  --ty-le-uy_tin: 9 / 7;          /* ảnh showroom Partners' Reputation First (445×349pt) */
  --ty-le-tam_nhin: 19 / 10;      /* ảnh đầu thẻ Our Vision / Our Mission (413×218pt) */
  --ty-le-cum_nhan_su: 23 / 16;   /* khung cụm 11 ảnh People Behind Luxshine (831×577pt) */
  --ty-le-cum_nhan_su_mobile: 1 / 1; /* ô ảnh vuông của cụm đó ở ≤767px: 3 cột, 5 ảnh trên + CEO + 5 ảnh dưới (user 2026-10-22) */
  --ty-le-gap_go: 15 / 17;        /* khung cụm 3 ảnh Come Meet Us (413×468pt) */
  /* Trang Factory theo file "factory.ai" (user 2026-10-22: đăng ký tỉ lệ đo từ file) */
  --ty-le-buoc_san_xuat: 2 / 3;   /* ô dọc 5 bước sản xuất (275×417px ở 1920) */
  --ty-le-cum_nguon_goc: 21 / 16; /* khung cụm 3 ảnh Responsibly Ethical Sourced (843×644px ở 1920) */
  --surface-cream-50: #f6f0e0;
  --surface-beige:  #f6f0e0;   /* nền be section Beauty/Remy */
  --surface-dark:   #141414;
  --surface-dark-deep: #111111;
  --border-subtle:  #e5e5e5;
  --border-strong:  #dfdfdf;

  /* ---------- TYPOGRAPHY ---------- */
  --font-heading: "Bergola", "Playfair Display", Georgia, serif;
  --font-body: "SVN-Gilroy", "Poppins", -apple-system, "Segoe UI", sans-serif;
  --font-script: "Dynalight", "Great Vibes", cursive;

  /* Type scale (size / line-height) — Bergola headings */
  --h1-size: 56px;  --h1-lh: 68px;
  --h2-size: 48px;  --h2-lh: 56px;
  --h3-size: 40px;  --h3-lh: 48px;
  --h4-size: 32px;  --h4-lh: 40px;
  --h5-size: 24px;  --h5-lh: 32px;
  --h6-size: 20px;  --h6-lh: 28px;
  --body-size: 16px;    --body-lh: 24px;
  --caption-size: 12px; --caption-lh: 16px;
  /* Header type: menu + language button (user 2026-10-16, comment cmvat1tzwzfgi: "font size ở đây cho về 18px hết đi";
     chose to add this step to the DS rather than use 16 or 20). Header only. */
  --nav-size: 18px;     --nav-lh: 24px;
  /* Display scale — chữ trình diễn cho trang kể chuyện (trang Remy, 2026-10-13; user: "font size các thứ thì tự làm đi").
     Cỡ chữ bám theo bề rộng khung nội dung (100vw − 2 lề 24px, trần 1352px) nên một dòng tiêu đề luôn vừa khung. */
  --display-1-size: clamp(24px, calc((100vw - 48px) * 0.0976), 132px);  --display-1-lh: 1.06;
  --display-2-size: clamp(28px, calc((100vw - 48px) * 0.062), 84px);    --display-2-lh: 1.1;
  /* Body lớn: 28px trên desktop, không lớn hơn (user 2026-10-14: "body lớn font size 28px"); chỉ co xuống ở màn hẹp. */
  --display-3-size: clamp(20px, calc((100vw - 48px) * 0.0237), 28px);   --display-3-lh: 1.4;
  /* Tiêu đề lớn trang Factory (file factory.ai ~74px ở 1920; user 2026-10-22 chọn thêm nấc 72px vào DS).
     Co theo màn như khung 78vw của trang (3.75vw = 72px ở 1920) để tiêu đề ba dòng vẫn vừa cột của nó; không dưới 40px. */
  --display-4-size: clamp(40px, 3.75vw, 72px);  --display-4-lh: 1.18;
  /* Tiêu đề section trên mobile của homepage v4: 40px từ khổ 375, co về 34px ở 320 (user duyệt 2026-10-16,
     comment cmvad4m9a29j7). 40px là cỡ lớn nhất mà "MANUFACTURING" còn vừa khung 327px. */
  --title-m-size: clamp(34px, calc((100vw - 48px) * 0.1223), 40px);
  /* Section titles (H2), one size on every page (user 2026-10-23, comments cmvkqr7c2tu6l / cmvkrimai8tfh: "tăng font
     size và đồng bộ các trang about, factory, blog, wholesale, contact"; chose 56): 56 desktop, 48 tablet, 34–40 phone
     (the steps are set at the foot of this file). */
  --sec-title-size: var(--h1-size);  --sec-title-lh: var(--h1-lh);
  /* Sub-headings inside a section: SVN-Gilroy Bold 28 (user 2026-10-23, comment cmvkrjt0b5jyk: "svn-gilroy, bold. font
     size 28px"; chose to add this step to the DS); 24 on phones. */
  --subhead-size: 28px;  --subhead-lh: 36px;
  --subtitle-ls: 8px;   /* letter-spacing cho eyebrow "WHERE QUALITY MEETS SHINE" */

  /* ---------- SPACING (DESIGN.md scale) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-30: 120px;

  /* ---------- LAYOUT ---------- */
  --container-max: 1400px;   /* content width (frame 1728 − 2×164) */
  --page-margin: 164px;
  --grid-gutter: 24px;

  /* ---------- RADIUS — all 0: no rounded corners / no circular motifs (user rule 2026-10-07) ---------- */
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-xl: 0;
  --radius-2xl: 0;
  --radius-pill: 0;
  /* Ngoại lệ DUY NHẤT cho luật không bo tròn (user chốt 2026-10-15, theo ảnh thiết kế homepage):
     chỉ dùng cho 2 ảnh soi sợi tóc Non-Remy / Remy, số bước 1–5 và nút mũi tên trên ảnh Factory Tour. */
  --radius-round: 50%;

  /* ---------- SHADOW ---------- */
  --shadow-sm: 0 1px 2px rgba(20, 20, 20, 0.06);
  --shadow-md: 0 4px 16px rgba(20, 20, 20, 0.08);
  --shadow-lg: 0 12px 32px rgba(20, 20, 20, 0.12);
}
@media (max-width: 1024px) {
  :root { --sec-title-size: var(--h2-size); --sec-title-lh: var(--h2-lh); }
}
@media (max-width: 767px) {
  /* 40 from 375 up; narrower phones step down so the longest title word ("MANUFACTURING", 7.65em) and its 24px of bar
     padding still fit the content width (32 at 320). */
  :root { --sec-title-size: clamp(32px, calc((100vw - 72px) * 0.13), 40px); --sec-title-lh: 1.2; --subhead-size: var(--h5-size); --subhead-lh: var(--h5-lh); }
}