/* =========================================================
   DESIGN TOKENS — Vĩnh Lộc Plastic
   ---------------------------------------------------------
   Màu lấy trực tiếp từ logo:
   • Đỏ đô   #9E1815  → màu thương hiệu: nút chính, tab, tiêu đề nhấn
   • Vàng đồng #BF8217 → màu nhấn: nhãn, số mốc, đường kẻ, huy hiệu
   • Xám than #3E3E3E → chữ, topbar, footer (pha ấm cho hợp đỏ/vàng)
   Nền là kem ấm để nối đỏ và vàng; mọi sắc độ (50 → 900)
   sinh từ cùng một hue của logo nên các thành phần luôn ăn khớp.
   Tỷ lệ: ~60% nền trung tính, ~30% đỏ + xám than, ~10% vàng.
   ========================================================= */
:root {
  /* Primary — Đỏ đô (logo) */
  --c-primary-900: #3A0907;
  --c-primary-800: #6E110E;
  --c-primary-700: #9E1815;   /* đúng màu logo */
  --c-primary-600: #B32420;
  --c-primary-500: #C9443B;
  --c-primary-200: #EEC3BE;
  --c-primary-100: #F8E3E0;
  --c-primary-50:  #FCF3F1;

  /* Accent — Vàng đồng (logo) */
  --c-accent-700: #7E5410;    /* dùng cho chữ trên nền sáng */
  --c-accent-600: #9E6A12;
  --c-accent-500: #BF8217;    /* đúng màu logo */
  --c-accent-300: #E2B867;
  --c-accent-100: #F7EBD3;

  /* Secondary — Xanh lúa (chỉ cho nhãn nông sản) */
  --c-eco-600: #55702F;
  --c-eco-500: #6E8C3E;
  --c-eco-100: #EAF0DC;

  /* Neutrals — xám than của logo, pha ấm */
  --c-ink:      #2A2523;
  --c-text:     #463E3B;
  --c-muted:    #776B66;
  --c-line:     #E8DFD3;
  --c-surface:  #FFFFFF;
  --c-bg:       #FAF7F2;
  --c-bg-alt:   #F3ECE1;
  --c-charcoal: #2B2422;

  /* Vai trò (semantic) — component chỉ dùng các biến này */
  --bg: var(--c-bg);
  --bg-alt: var(--c-bg-alt);
  --surface: var(--c-surface);
  --ink: var(--c-ink);
  --text: var(--c-text);
  --muted: var(--c-muted);
  --line: var(--c-line);
  --brand: var(--c-primary-700);
  --brand-strong: var(--c-charcoal);
  --brand-soft: var(--c-primary-50);
  --brand-tint: var(--c-primary-100);
  --cta: var(--c-primary-700);
  --cta-hover: var(--c-primary-800);
  --cta-soft: var(--c-accent-100);
  --gold: var(--c-accent-500);
  --gold-strong: var(--c-accent-600);
  --gold-text: var(--c-accent-700);
  --eco: var(--c-eco-500);
  --eco-soft: var(--c-eco-100);
  --on-brand: #FFFFFF;
  --on-brand-muted: rgba(255,255,255,.74);

  /* Typography */
  --font-head: "Be Vietnam Pro", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --fs-xs: .78rem;
  --fs-sm: .9rem;
  --fs-md: 1rem;
  --fs-lg: 1.15rem;
  --fs-xl: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
  --fs-2xl: clamp(1.9rem, 1.3rem + 2.4vw, 3.2rem);

  /* Spacing (thang 4px) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 72px;

  /* Shape & depth */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(58,9,7,.06), 0 2px 8px rgba(58,9,7,.06);
  --shadow-2: 0 6px 24px rgba(58,9,7,.12);
  --shadow-cta: 0 8px 20px rgba(158,24,21,.28);

  --ease: cubic-bezier(.2,.7,.2,1);
  --container: 1200px;
}

/* Dark mode — giữ hue logo, chỉ đổi độ sáng */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1A1413; --bg-alt: #211918; --surface: #271E1C;
    --ink: #F4ECE8; --text: #D9CCC7; --muted: #A99A92; --line: #3E2F2B;
    --brand: #E0574D; --brand-strong: #120D0C; --brand-soft: #2E1C1A; --brand-tint: #45251F;
    --cta-soft: #33261A; --gold-text: #E2B867; --eco-soft: #232B1A;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #1A1413; --bg-alt: #211918; --surface: #271E1C;
  --ink: #F4ECE8; --text: #D9CCC7; --muted: #A99A92; --line: #3E2F2B;
  --brand: #E0574D; --brand-strong: #120D0C; --brand-soft: #2E1C1A; --brand-tint: #45251F;
  --cta-soft: #33261A; --gold-text: #E2B867; --eco-soft: #232B1A;
  color-scheme: dark;
}