/* ==========================================================================
   Tôm Fest Cà Mau — Design tokens (global)
   Nguồn: Figma "VNF (Copy)" — Home node 4903:251 (khung 1920px)
   Dùng cho mọi trang: <link rel="stylesheet" href="css/tokens.css"> nạp đầu tiên.
   Font khai báo ở <head>: Inter, Be Vietnam Pro, Mona Sans

   File này là bản dùng chung với theme WordPress
   (tomcamau-wp/.../themes/tomcamau/assets/css/tokens.css) — sửa thì sửa cả hai.
   ========================================================================== */

:root {
  /* --- Color: brand ------------------------------------------------------- */
  --c-primary: #296dd2;          /* xanh chủ đạo: nút, link, icon, footer */
  --c-primary-hover: #1f5fbe;
  --c-primary-deep: #194a91;     /* nút "Đăng ký tham gia" (card hội nghị) */
  --c-primary-deep-hover: #143b74;
  --c-primary-soft: rgb(41 109 210 / 8%);
  --c-primary-selected: rgb(41 109 210 / 35%);  /* hotspot đang chọn, radio đã tick */

  /* --- Color: text -------------------------------------------------------- */
  --c-ink: #0b0b0b;              /* tiêu đề, đoạn văn */
  --c-ink-strong: #040404;       /* nhãn số liệu */
  --c-ink-navy: #1b2451;         /* tiêu đề card lĩnh vực triển lãm, tiêu đề hội nghị */
  --c-ink-deep: #0b2326;         /* eyebrow trang truyền thông */
  --c-ink-steel: #11466b;        /* chữ + icon nút "Xem thêm" */
  --c-ink-ocean: #002045;        /* viền + mũi tên nút chuyển slide (trang hỗ trợ) */
  --c-ink-card: #2f2f2f;         /* tên người + icon liên hệ trên thẻ */
  --c-on-deep: #fff8ea;
  --c-on-dark: #ffffff;
  --c-on-dark-muted: rgb(255 255 255 / 80%);
  --c-on-dark-soft: rgb(255 255 255 / 70%);   /* chữ phụ + icon liên hệ trên nền xanh (chân trang) */
  --c-on-dark-strong: rgb(255 255 255 / 90%); /* vai trò trong pill logo đơn vị trên hero */

  /* Thang đen theo độ mờ — dùng cho chữ phụ, mã gian hàng, giá tiền */
  --c-ink-pure: #000000;
  --c-ink-90: rgb(0 0 0 / 90%);
  --c-ink-86: rgb(0 0 0 / 86%);
  --c-ink-70: rgb(0 0 0 / 70%);
  --c-ink-55: rgb(0 0 0 / 55%);
  --c-ink-50: rgb(0 0 0 / 50%);
  --c-ink-45: rgb(0 0 0 / 45%);
  --c-ink-25: rgb(0 0 0 / 25%);        /* nhãn "1m²" cạnh giá trên trang sơ đồ */
  --c-ink-muted: #4d4d4d;        /* chữ phụ chân trang: nhãn cột, liên hệ, copyright */
  --c-ink-meta: #333333;         /* dòng ngày / tác giả / nguồn dưới bài viết */
  --c-tag-booth: #95c766;        /* nền nhãn mã gian hàng số */
  --c-tag-booth-border: #5b9228; /* viền nhãn mã gian hàng số */
  --c-ink-disabled: #8e8e93;
  --c-btn-inactive: #a8a8a8;     /* nút chưa có link (card hội nghị) */
  --c-ink-note: #5d5d5d;         /* ghi chú dưới nút chưa có link */
  --c-text: var(--c-ink-86);     /* số liệu lớn */

  /* --- Color: surface ------------------------------------------------------ */
  --c-bg: #fafafa;               /* nền trang + màu 2 dải sóng */
  --c-surface: #ffffff;          /* card tin tức, footer */
  --c-surface-alt: #fbfcfa;      /* nút đổi ngôn ngữ */
  --c-media-placeholder: #d9d9d9;/* nền ảnh chưa tải/chưa có */
  --c-photo-tile: #f4f4f4;       /* nền ô ảnh chân dung (ảnh PNG nền trong) */
  /* Nền ô ảnh trong thẻ chú thích trang sơ đồ gian hàng. */
  --c-legend-figure: linear-gradient(180deg, #e0f2fe, #bce4ff);
  --c-numeral: #d7d7d7;          /* số thứ tự 01–04 */
  --c-on-dark-faint: rgb(255 255 255 / 22%);  /* hover hotspot gian hàng */

  /* --- Color: nút ---------------------------------------------------------- */
  --c-btn-light-hover: #f0f4fb;  /* .btn--light trên nền sáng */
  --c-btn-pill-hover: #f2f5fa;   /* .back-pill */
  --c-btn-glow-bg: #0084ff;      /* nút "Mua gian hàng" nổi trên sơ đồ trang sơ đồ gian hàng */
  --c-btn-glow-border: #003d77;
  --c-btn-glow-hover: #0074e0;

  /* --- Color: phân khu gian hàng (sơ đồ triển lãm) ------------------------- */
  --c-zone-v0: #10a000;          /* gian hàng tiêu chuẩn */
  --c-zone-v1: #9147ff;          /* khu ẩm thực */
  --c-zone-v2: #ffc800;          /* gian miễn phí */
  --c-zone-v0-soft: rgb(16 160 0 / 12%);
  --c-zone-v0-line: rgb(16 160 0 / 28%);
  --c-zone-v0-ink: #0b7000;

  /* --- Color: form (input, label, trạng thái) ------------------------------ */
  --c-label: #0d0d0d;
  --c-field-bg: #ffffff;
  --c-field-text: #0d0d0d;
  --c-placeholder: rgb(0 0 0 / 27%);   /* chữ gợi ý trong input */
  --c-danger: #d03e19;
  --c-required: #e11900;
  --c-error: #d93025;            /* lỗi form Google (visitor.html) */
  --c-error-bg: #fff8f8;
  --c-chip-bg: #95c766;
  --c-chip-border: #5b9228;

  /* --- Color: border ------------------------------------------------------- */
  --c-border: #f1f1f1;
  --c-hairline: #296DD2;
  --c-border-pill: rgb(0 0 0 / 12%);   /* viền nút đổi ngôn ngữ + thẻ nhà triển lãm / gian hàng */
  --c-border-card: rgb(0 0 0 / 8%);
  --c-fill-subtle: rgb(5 5 5 / 3%);
  --c-fill-muted: rgb(0 0 0 / 10%);   /* nền nút "Xem thêm" */
  --c-fill-muted-hover: rgb(0 0 0 / 16%);
  --c-booth-unavailable: #919494;      /* ô gian hàng không khả dụng trên sơ đồ */
  --c-border-light: rgb(0 0 0 / 10%);
  --c-border-soft: rgb(0 0 0 / 6%);   /* viền trên chân trang */
  --c-border-radio: rgb(1 1 1 / 11%);
  --c-caret-box: transparent;             /* ô vuông bọc mũi tên của select quốc gia */
  --c-border-on-dark: rgb(255 255 255 / 35%);
  --c-border-on-primary: #3c90ff;             /* viền nút trắng khi đứng trên thanh xanh */
  --c-divider-on-dark: rgb(255 255 255 / 37%);/* gạch ngang chân trang */
  /* Gạch phân cách trong cột chân trang: sáng ở đầu dòng rồi tan dần về cuối. */
  --divider-fade: linear-gradient(90deg, rgb(255 255 255 / 50%), rgb(255 255 255 / 0));
  /* Chữ nền khổng lồ sau chân trang: sáng ở chân chữ, tan dần lên đỉnh. */
  --overlay-fade: linear-gradient(to top, rgb(255 255 255 / 30%), rgb(255 255 255 / 0));
  /* Tối ở nửa trái (chữ đứng đó), tan dần sang phải để lộ ảnh - thay cho lớp
     phủ phẳng cũ. */
  --c-hero-overlay: linear-gradient(90deg, rgb(0 0 0 / 60%), rgb(102 102 102 / 0%));
  /* Phone hero (Figma 5939:609): the same gradient over a flat 20% wash, so the
     chips and organiser pills hold their contrast over a bright sky. */
  --c-hero-overlay-sm: linear-gradient(rgb(0 0 0 / 20%), rgb(0 0 0 / 20%)), var(--c-hero-overlay);
  --c-nav-panel: #0051ad;             /* thẻ danh sách trong menu mobile toàn màn hình */
  --c-nav-active: #00397b;            /* dòng đang đứng / đang rê chuột trong thẻ đó */
  --c-divider-on-panel: rgb(255 255 255 / 15%);  /* gạch ngang trong menu mobile */
  --c-info-bg: rgb(0 98 255 / 4%);            /* ô thông tin hội nghị */
  --c-info-border: rgb(0 98 255 / 34%);
  --c-chip-soft-bg: rgb(41 109 210 / 8%);     /* chip ngày/giờ/địa điểm */
  --c-chip-soft-border: rgb(41 109 210 / 18%);
  --c-glass: rgb(255 255 255 / 50%);        /* nhãn xếp hạng trên ảnh khách sạn */
  --c-glass-soft: rgb(255 255 255 / 18%);   /* chip ngày + địa điểm trên hero */
  --c-glass-line: rgb(255 255 255 / 50%);   /* viền chip và gạch phân cách bên trong nó */
  /* Nền pill logo đơn vị trên hero - kính mờ sáng trên, tối dưới. */
  --c-org-badge-bg: linear-gradient(180deg, rgb(255 255 255 / 30%), rgb(0 0 0 / 30%));
  --c-hero-credit-bg: #ffffff;                /* huy hiệu "Đơn vị thực hiện" trên hero */
  --c-hero-credit-border: #4fdcd0;

  /* Popup (popup.css, Figma 6345:1051). */
  --c-backdrop: rgb(0 17 42 / 55%);           /* lớp tối phủ trang khi popup mở */
  --c-tab-bg: #f3f3f3;                        /* tab chưa chọn */
  --c-tab-ink: #6c6c6c;
  --c-primary-tint: rgb(41 109 210 / 15%);    /* tab đang chọn */
  --c-danger-soft: rgb(208 62 25 / 16%);      /* nền hộp cảnh báo, cùng màu --c-danger */
  --c-chip-dark-bg: rgb(0 0 0 / 30%);         /* chip kính tối trên ảnh tour */
  --c-chip-dark-border: rgb(255 255 255 / 25%);
  --c-btn-solid-border: rgb(255 255 255 / 56%);
  /* Tối ở 1/3 trái nơi chữ đứng, tan dần sang phải. Phone: chữ phủ cả ảnh nên
     tối đều từ trên xuống. */
  --c-tour-overlay: linear-gradient(90deg, rgb(0 17 42 / 70%) 53.614%, rgb(255 255 255 / 0));
  --c-tour-overlay-sm: linear-gradient(rgb(0 17 42 / 75%), rgb(0 17 42 / 55%));

  /* --- Typography: family --------------------------------------------------- */
  --font-display: "Inter", "Segoe UI", system-ui, sans-serif;   /* tiêu đề */
  --font-body: "Be Vietnam Pro", "Segoe UI", system-ui, sans-serif;
  /* Trang sơ đồ gian hàng dùng font này thay cho --font-body: design của nó
     vẽ bằng Inter từ đầu đến cuối. Cùng họ chữ với --font-display nhưng là
     hai vai khác nhau - một cái là "chữ tiêu đề", cái này là "chữ của trang
     đó" - nên tách token, đổi cái này không kéo theo mọi tiêu đề của site. */
  --font-inter: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-num: "Mona Sans", "Inter", system-ui, sans-serif;      /* số liệu, ngày */
  /* Chữ trong logo (header + chân trang) và chữ nền khổng lồ: Arial Bold theo
     đúng design. Không nạp webfont - Arial/Helvetica có sẵn ở mọi máy, Linux
     rơi về Liberation Sans vốn khớp từng nét với Arial. */
  --font-wordmark: Arial, "Helvetica Neue", Helvetica, "Liberation Sans", sans-serif;

  /* --- Typography: weight ---------------------------------------------------- */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 900;              /* chú thích hộp nhà tài trợ */

  /* --- Typography: fluid scale --------------------------------------------------*/
  --fs-hero: clamp(1.875rem, 1.359rem + 2.1vw, 3.25rem);          /* 30 → 52 → 64  */
  /* Dòng lớn của tiêu đề hero (dòng nhỏ dùng lại --fs-hero, 30 → 52 → 64 sẵn có). */
  --fs-hero-lg: clamp(2.5rem, 1.749rem + 3.06vw, 4.5rem);        /* 40 → 72 → 88  */
  --fs-hero-kicker: clamp(1.125rem, 0.937rem + 0.76vw, 1.625rem); /* 18 → 26 → 32  */
  --fs-h2: clamp(1.75rem, 1.469rem + 1.15vw, 2.5rem);             /* 28 → 40 → 48  */
  --fs-h3: clamp(1.5rem, 1.312rem + 0.76vw, 2rem);                /* 24 → 32 → 40  */
  --fs-h4: clamp(1.125rem, 1.055rem + 0.29vw, 1.3125rem);         /* 18 → 21 → 24  */
  --fs-stat: clamp(2.5rem, 1.186rem + 5.35vw, 6rem);              /* 40 → 96 → 120 */
  --fs-lead: clamp(1rem, 0.906rem + 0.38vw, 1.25rem);             /* 16 → 20 → 24  */
  --fs-article: clamp(1rem, 0.906rem + 0.38vw, 1.25rem);          /* 16 → 20 — nội dung bài viết, dừng ở 20 */
  --fs-zone: clamp(1.25rem, 1.0625rem + 0.76vw, 1.75rem);         /* 20 → 28 → 32 — tiêu đề lĩnh vực, tiêu đề phụ trong bài viết */
  /* .site-nav__list a only - one member of the 1280→1850 clamp group that
     sizes the whole header bar (see the big comment above .site-header__right
     in header.css). 11px at 1280 (where the hamburger takes over) up to the
     body's own 16px at 1850, same two endpoints as the rest of the group so
     nav does not finish shrinking early and squeeze the wordmark beside it.
     Measured against "Gian hàng kỹ thuật số" and "Hỗ trợ khách hàng", the
     longest Vietnamese labels, with the header buttons and language pill
     already on the row. Below 1280 it is moot: the bar is a seal and a
     hamburger. */
  --fs-nav: clamp(0.6875rem, -0.0143rem + 0.8772vw, 1rem);        /* 11 → 16 */
  --fs-page-title: clamp(1.5rem, 1.32rem + 0.73vw, 2rem);         /* 24 → 32 — tiêu đề trang trong */
  --fs-brand: clamp(1.5rem, 1.15rem + 1.46vw, 2.25rem);           /* 24 → 36 — chữ "TÔM CÀ MAU" chân trang, tiêu đề section trang truyền thông */
  --fs-card-title: clamp(1.5rem, 1.242rem + 1.05vw, 2rem);        /* 24 → 32 — tiêu đề thẻ form, khối đối tác */

  /* Logo lockup: 2 dòng chữ cạnh con dấu. Cỡ chữ và khoảng dòng đều quy về
     khung 1920 của design - 33/20/26px trên header, 77/48/56px dưới chân
     trang. Khoảng dòng là số tuyệt đối cho cả 2 dòng, nên nó là biến riêng
     chứ không phải bội số của cỡ chữ.

     Header only (footer dùng cặp -lg riêng): 2 clamp này cũng thuộc "nhóm
     1280→1850" mô tả trong header.css (phía trên .site-header__right) - 16/11
     ở 1280 (đủ nhỏ để không lấn chỗ của nav+nút+viên ngôn ngữ, nhưng vẫn rõ
     ràng là 2 cỡ khác nhau) lên đúng 33/20 gốc ở 1850. */
  --fs-brand-title: clamp(1rem, -1.386rem + 2.9825vw, 2.0625rem);   /* 16 → 33 */
  --fs-brand-sub: clamp(0.6875rem, -0.5757rem + 1.5789vw, 1.25rem); /* 11 → 20 */
  --lh-brand: clamp(1.125rem, 1.35vw, 1.625rem);               /* 18 → 26 */
  /* Chữ nền chân trang: 153.5px trên khung 1920 = đúng 8vw, và 8vw cũng là
     giá trị dự phòng khi tắt JavaScript. main.js đo chữ thật rồi ghi đè cho
     vừa khít 100% bề ngang. */
  --fs-footer-overlay: 8vw;
  --fs-brand-title-lg: clamp(2.375rem, 4.01vw, 4.8125rem);     /* 38 → 77 */
  --fs-brand-sub-lg: clamp(1.5rem, 2.5vw, 3rem);               /* 24 → 48 */
  --lh-brand-lg: clamp(1.875rem, 2.92vw, 3.5rem);              /* 30 → 56 */

  /* --- Typography: bậc cố định ---------------------------------------------- */
  --fs-xl: 1.25rem;                                           /* 20 */
  --fs-lg: 1.125rem;                                          /* 18 */
  --fs-body: 1rem;                                            /* 16 */
  --fs-sm: 0.875rem;                                          /* 14 */
  --fs-xs: 0.8125rem;                                         /* 13 */
  --fs-label: 0.75rem;                                        /* 12 */
  --fs-caption: 0.625rem;                                     /* 10 */
  --fs-micro: 0.5rem;                                         /* 8 — copyright line on a phone */
  --fs-date: 0.875rem;
  --fs-stat-sm: 2.75rem;                                      /* 44 — stat figures on a phone */

  /* Footer lockup on a phone (Figma 5907:1027): the desktop lockup (77/48/56
     over a 132px seal) at 0.566 scale. */
  --fs-brand-title-sm: 2.725rem;                              /* 43.6 */
  --fs-brand-sub-sm: 1.7rem;                                  /* 27.2 */
  --lh-brand-sm: 1.98rem;                                     /* 31.7 */
  --brand-mark-sm: 4.67rem;                                   /* 74.7 */
  --fs-numeral: 5rem;                                         /* số thứ tự dạng chữ (dự phòng) */

  /* --- Typography: line-height & tracking ------------------------------------ */
  --lh-tight: 1.2;
  --lh-heading: 1.4;             /* tiêu đề lớn nhiều dòng: trang hội nghị */
  --lh-normal: normal;
  --lh-snug: 1.48;
  --lh-body: 1.5;
  --lh-copy: 1.43;
  --lh-label: 1.33;
  --lh-relaxed: 1.6;
  --ls-nav: 0.6px;
  --ls-stat: 0.52px;
  --ls-contact: -0.0396px;
  --ls-org: -0.18px;
  --ls-copy: -0.05px;
  --ls-tag: -0.5px;              /* nhãn ngôn ngữ trên thẻ liên hệ (12px, viết hoa) */
  --ls-label: -0.28px;           /* nhãn trường (12px) */
  --ls-field: -0.32px;           /* chữ trong ô nhập (14px) */

  /* --- Spacing --------------------------------------------------------------- */
  --space-3xs: 4px;
  --space-2xs: 6px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 44px;
  --space-3xl: 54px;
  --space-4xl: 60px;
  --space-5xl: 72px;

  /* Khoảng cách giữa các section: 56px (mobile) → 120px (desktop) */
  --space-section: clamp(2rem, 2.53rem + 2vw, 5rem);

  /* --- Layout ---------------------------------------------------------------- */
  --content-max: 1824px;
  --measure: 760px;                                /* bề rộng đọc thoải mái của bài viết */
  --measure-article: 1000px;                       /* cột nội dung trang bài viết chi tiết */
  --popup-max: 1300px;                             /* bề rộng popup trên desktop */
  --gutter: clamp(1rem, 0.485rem + 2.1vw, 3rem);   /* 16 → 48 */
  /* Con dấu quyết định chiều cao thanh header, đệm chỉ cộng thêm: 64px + 12
     trên/dưới khi thanh trong suốt, 64px + 24 khi thanh xanh đặc (design để
     thanh trong suốt ôm sát hero, thanh trang trong thở rộng hơn). Hai con số
     là hai việc: --header-h là chiều cao thanh nổi, --header-h-solid là chiều
     cao thanh thật sự chiếm chỗ và dính đầu trang. */
  /* Floor is 48 rather than 44 so the seal is never shorter than the language
     pill beside it (46px): below that the bar is taller than --header-h says,
     and --header-h is what other sheets position sticky things against. */
  --header-logo: clamp(3rem, 3.33vw, 4rem);      /* 48 → 64 */
  --header-h: calc(var(--header-logo) + 24px);
  --header-h-solid: var(--header-h);
  --field-h: 40px;
  --wave-h: clamp(48px, 9.5vw, 183px);
  --footer-wave-h: clamp(28px, 4.9vw, 94px);

  /* --- Radius ----------------------------------------------------------------- */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-input: 8px;
  --radius-input-lg: 12px;
  --radius-card: 16px;
  --radius-md: 24px;
  --radius-lg: 32px;
  --radius-popup: 42px;
  --radius-pill: 999px;

  /* --- Elevation --------------------------------------------------------------- */
  --shadow-card: 0 4px 20px rgb(0 0 0 / 5%);
  --shadow-card-hover: 0 10px 32px rgb(11 11 11 / 10%);
  --shadow-float: 0 0 6px rgb(0 0 0 / 10%);
  /* Thẻ khách hàng khi rê chuột lên gian đã bán (trang sơ đồ gian hàng). */
  --shadow-popover: 0 69px 9.5px rgb(138 138 138 / 0%), 0 44px 9px rgb(138 138 138 / 1%), 0 25px 7.5px rgb(138 138 138 / 5%), 0 11px 5.5px rgb(138 138 138 / 9%), 0 3px 3px rgb(138 138 138 / 10%);
  --shadow-radio: 0 1px 1px 0 rgb(0 0 0 / 4%);
  /* Chip "Đơn vị thực hiện": quầng sáng ra ngoài + vệt tối lõm vào trong */
  --shadow-field: inset 0 0 1px 0 rgb(0 0 0 / 8%), inset 0 0 3px 0 rgb(0 0 0 / 12%);
  --shadow-field-focus: inset 0 0 1px 0 rgb(25 74 145 / 8%), inset 0 0 3px 0 rgb(25 74 145 / 12%);
  --shadow-header: 0 6px 24px rgb(11 11 11 / 8%);
  /* Quầng sáng trắng của nút "Mua gian hàng" nổi trên sơ đồ (Figma 7143:19669). */
  --shadow-btn-glow: 0 0 29.1px rgb(255 255 255 / 17%), 0 0 16px #fff, 0 4px 4px rgb(0 0 0 / 75%);

  /* --- Motion ------------------------------------------------------------------ */
  --dur-fast: 0.15s;
  --dur: 0.25s;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  /* Scroll reveals: fade in + slide up a little. */
  --reveal-dur: 0.8s;
  --reveal-dist: 24px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}


/* Below 1280 the bar is only the seal and the hamburger (no language pill to
   stay taller than), and the phone design draws the seal at 40px (Figma
   5939:605) - a 64px bar with its 12px of padding. */
@media (max-width: 1279px) {
  :root { --header-logo: 2.5rem; }
}

/* Thanh header xanh đặc dày hơn thanh trong suốt, nhưng chỉ từ desktop: dưới
   1280px chỉ còn con dấu và nút hamburger, không có gì để thở. */
@media (min-width: 1280px) {
  :root { --header-h-solid: calc(var(--header-logo) + 48px); }
}

/* Đoạn 2 của thang chữ: từ 1440px trở lên mới tiến dần về cỡ gốc trong Figma (1920px) */
@media (min-width: 1440px) {
  :root {
    --fs-hero: clamp(3.25rem, 1rem + 2.5vw, 4rem);              /* 52 → 64  */
    --fs-hero-lg: clamp(4.5rem, 1.5rem + 3.33vw, 5.5rem);       /* 72 → 88  */
    --fs-hero-kicker: clamp(1.625rem, 0.5rem + 1.25vw, 2rem);   /* 26 → 32  */
    --fs-h2: clamp(2.5rem, 1rem + 1.67vw, 3rem);                /* 40 → 48  */
    --fs-h3: clamp(2rem, 0.5rem + 1.67vw, 2.5rem);              /* 32 → 40  */
    --fs-h4: clamp(1.3125rem, 0.75rem + 0.63vw, 1.5rem);        /* 21 → 24  */
    --fs-stat: clamp(6rem, 1.5rem + 5vw, 7.5rem);               /* 96 → 120 */
    --fs-lead: clamp(1.25rem, 0.5rem + 0.7vw, 1.5rem);         /* 20 → 24  */
    --fs-zone: clamp(1.75rem, 1rem + 0.83vw, 2rem);             /* 28 → 32  */
  }
}