/* ==========================================================================
   DESIGN TOKENS & CSS VARIABLES — MEKONG INNOTECH EXPO 2026
   Bảng màu chính thức: Xanh lá – Vàng lúa – Mùa màng
   Tuân thủ tiêu chuẩn: DESIGN.md & WCAG AA
   ========================================================================== */

:root {
  /* Bộ màu thương hiệu bắt buộc */
  --color-primary: #386641;         /* Xanh rừng đậm - Header, Button chính, Heading H1/H2 */
  --color-primary-dark: #26472d;    /* Xanh sẫm cho hover và footer */
  --color-secondary: #6A994E;       /* Xanh lá tươi - Nút phụ, Hover, Badge trạng thái */
  --color-accent: #A7C957;          /* Xanh mầm non - Viền, Tag trang trí, Đường dẫn */
  --color-gold: #F2CC60;            /* Vàng lúa chín - Highlight, Badge đếm ngược */
  --color-gold-hover: #e0b845;      /* Vàng lúa đậm khi hover */
  --color-bg-warm: #FFF8E7;         /* Kem vỏ trấu - Nền chính & các section ấm */

  /* Màu bề mặt & Trung tính */
  --color-surface: #FFFFFF;         /* Trắng tinh - Nền Card, Dropdown, Modal, Input */
  --color-border: #E8E2D2;          /* Viền ấm nhẹ - Phân cách card và dải nội dung */
  --color-border-hover: #6A994E;    /* Viền khi hover thẻ */
  --color-text-main: #1F2937;       /* Xám đen - Văn bản chính (Body text) */
  --color-text-muted: #596573;      /* Xám trung - Ngày tháng, thông số file, mô tả phụ */
  --color-text-inverse: #FFFFFF;    /* Trắng - Text trên nền --color-primary hoặc --color-secondary */

  /* Màu trạng thái tài liệu */
  --color-tag-pdf: #DC2626;         /* Đỏ badge PDF */
  --color-tag-doc: #2563EB;         /* Xanh dương badge Word/DOCX */
  --color-tag-img: #059669;         /* Xanh ngọc badge Ảnh/PNG/JPG */
  --color-tag-zip: #D97706;         /* Cam badge file nén ZIP */

  /* Typography */
  --font-heading: 'Plus Jakarta Sans', 'Be Vietnam Pro', system-ui, -apple-system, sans-serif;
  --font-body: 'Be Vietnam Pro', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  /* Spacing & Container */
  --container-max-width: 1320px;
  --container-padding-desktop: 32px;
  --container-padding-tablet: 24px;
  --container-padding-mobile: 16px;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 6px 18px rgba(31, 41, 55, 0.06);
  --shadow-lg: 0 12px 32px rgba(56, 102, 65, 0.10);
  --shadow-hover: 0 16px 36px rgba(56, 102, 65, 0.16);

  /* Border Radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 0.15s ease-in-out;
  --transition-normal: 0.25s ease-in-out;
  --transition-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}