/* Design token — nguồn duy nhất cho màu, chữ, khoảng cách.
   Trích từ design/src/home/_template.html. Đối chiếu: docs/design-system.md
   KHÔNG viết giá trị cứng ở file CSS khác — chỉ dùng var() từ đây. */

:root {
  /* ---- Màu thương hiệu ---- */
  --green-500: #24C354; /* LOGISTICS GREEN · PMS 354 C */
  --green-600: #1CA945;
  --green-700: #168A38;
  --green-100: #DCF6E5;
  --green-50: #EFFBF3;

  --red-500: #ED1C24; /* SIGNAL RED · PMS 485 C */
  --red-600: #CE1219;
  --red-200: #F7C4C6;
  --red-100: #FDE3E4;
  --red-800: #B91C1C;

  /* ---- Trung tính ---- */
  --slate-900: #0F172A;
  --slate-700: #334155;
  --slate-500: #64748B;
  --slate-400: #94A3B8;
  --slate-300: #CBD5E1;
  --slate-200: #E2E8F0;
  --slate-100: #F1F5F9;
  --slate-50: #F8FAFC;

  --footer-text: #8FA1B8;
  --on-dark-muted: #9DB0C6;

  /* Màu thương hiệu ngoài — KHÔNG đổi cho hợp tông site.
     Người dùng nhận ra Zalo bằng đúng màu này. */
  --zalo-blue: #0068FF;

  /* ---- Ngữ nghĩa — dùng nhóm này khi viết component ---- */
  --brand: var(--green-500);
  --accent: var(--red-500);
  --text-body: var(--slate-900);
  --text-muted: var(--slate-500);
  --border: var(--slate-200);
  --border-subtle: var(--slate-100);
  --surface: #fff;
  --surface-subtle: var(--slate-50);
  --focus-ring: var(--green-500);

  /* ---- Gradient ---- */
  --grad-brand: linear-gradient(160deg, var(--green-700) 0%, var(--green-500) 55%, var(--green-600) 100%);
  --grad-dark: linear-gradient(160deg, #0C2415 0%, #0F172A 52%, #0B1120 100%);

  /* ---- Chữ ---- */
  --font-sans: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --text-3xl: 36px;
  --text-4xl: 48px;
  --text-5xl: 60px;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  --tracking-tight: -0.025em;
  --tracking-caps: 0.22em; /* nhãn kicker — thiết kế dùng .22em, không phải .08em */

  /* ---- Khoảng cách (thang gốc nhảy cóc: sau 16 là 24) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --container-max: 1200px;
  --gutter: 32px; /* thiết kế khai 24px nhưng code dùng 32px — theo code */
  --section-y: 84px;
  --header-h: 100px; /* topbar 34 + navbar 66 — dùng cho scroll-margin + sticky top */

  /* ---- Bo góc ---- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;

  /* ---- Đổ bóng ---- */
  --shadow-card: 0 8px 30px rgba(15, 23, 42, .06);
  --shadow-card-hover: 0 14px 40px rgba(15, 23, 42, .10);
  --shadow-pop: 0 24px 60px rgba(15, 23, 42, .16);
  --shadow-cta: 0 10px 26px -8px rgba(15, 23, 42, .35);
  --shadow-brand: 0 6px 16px -6px rgba(36, 195, 84, .55);
  --shadow-lift: 0 22px 48px -28px rgba(36, 195, 84, .45);
  --shadow-glass: 0 40px 80px -40px rgba(15, 23, 42, .45);

  /* ---- Chuyển động ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 150ms;
  --dur-med: 250ms;

  /* ---- Thang z-index (mục 6 CLAUDE.md) ---- */
  --z-base: 1;
  --z-sticky-bar: 100;
  --z-header: 200;
  --z-dropdown: 300;
  --z-overlay: 400;
  --z-modal: 500;
}

@media (max-width: 549px) {
  :root {
    --section-y: 56px;
    --gutter: 20px;
  }
}