{
  "$schema": "https://design-tokens.org/draft-1/schema.json",
  "$description": "HV GROUP design tokens — W3C DTCG Format. Nguồn sự thật cho web, app, ấn phẩm số. Mọi giá trị màu đã kiểm tra tương phản WCAG 2.2.",

  "brand": {
    "$description": "HV GROUP — thương mại điện tử",

    "color": {
      "primary": {
        "green":  { "$value": "#4CAF50", "$type": "color", "$description": "HV Green — màu chủ đạo. Mảng lớn, biểu tượng, nền khối. Tương phản trên trắng 2.78:1 → KHÔNG dùng cho chữ nhỏ." },
        "orange": { "$value": "#F26522", "$type": "color", "$description": "HV Orange — màu nhấn, ≤20% diện tích. Tương phản trên trắng 3.15:1 → chỉ dùng cho chữ ≥24px hoặc ≥18.5px in đậm." },
        "silver": { "$value": "#C9CDCE", "$type": "color", "$description": "HV Silver — nếp gấp trong biểu tượng, đường kẻ, viền thẻ." }
      },

      "action": {
        "orange": { "$value": "#D24405", "$type": "color", "$description": "Cam hành động — nút bấm nền đặc có chữ trắng. Tương phản với trắng 4.60:1 ✓ WCAG AA." },
        "green":  { "$value": "#2E7D32", "$type": "color", "$description": "Xanh chữ — link, nhãn 'còn hàng', chữ xanh trên nền trắng. Tương phản 5.13:1 ✓ AA." }
      },

      "neutral": {
        "graphite": { "$value": "#1F2426", "$type": "color", "$description": "Chữ chính · 15.69:1 ✓ AAA" },
        "slate":    { "$value": "#5A6468", "$type": "color", "$description": "Chữ phụ, chú thích · 6.07:1 ✓ AA" },
        "silver":   { "$value": "#C9CDCE", "$type": "color", "$description": "Đường kẻ, viền, ô vô hiệu" },
        "cloud":    { "$value": "#F2F4F5", "$type": "color", "$description": "Nền phụ, nền thẻ sản phẩm" },
        "white":    { "$value": "#FFFFFF", "$type": "color", "$description": "Nền chính · nền ảnh sản phẩm bắt buộc" }
      },

      "semantic": {
        "success": { "$value": "#2E7D32", "$type": "color", "$description": "Đặt hàng thành công · còn hàng · 5.13:1 ✓ AA" },
        "warning": { "$value": "#B45309", "$type": "color", "$description": "Sắp hết hàng · cảnh báo · 5.02:1 ✓ AA" },
        "danger":  { "$value": "#C02626", "$type": "color", "$description": "Hết hàng · huỷ đơn · lỗi · 5.92:1 ✓ AA" },
        "info":    { "$value": "#1D6BB8", "$type": "color", "$description": "Thông tin vận chuyển · 5.46:1 ✓ AA" },
        "sale":    { "$value": "#D24405", "$type": "color", "$description": "Giá khuyến mãi · nhãn giảm giá" }
      },

      "gradient": {
        "brand": { "$value": "linear-gradient(100deg, #4CAF50 0%, #F26522 100%)", "$type": "gradient", "$description": "Chỉ dùng cho mảng trang trí lớn (banner, cover). CẤM đặt dưới chữ và CẤM tô vào logo." }
      }
    },

    "font": {
      "family": {
        "display":  { "$value": "Montserrat, 'Helvetica Neue', Arial, sans-serif", "$type": "fontFamily", "$description": "Tiêu đề — cùng gốc với chữ ký thương hiệu" },
        "body":     { "$value": "Inter, 'Helvetica Neue', Arial, sans-serif",      "$type": "fontFamily", "$description": "Nội dung, giao diện, số liệu" },
        "fallback": { "$value": "Arial, sans-serif", "$type": "fontFamily", "$description": "Máy không cài font — email, file Office" }
      },
      "weight": {
        "regular":   { "$value": 400, "$type": "fontWeight" },
        "medium":    { "$value": 500, "$type": "fontWeight" },
        "semibold":  { "$value": 600, "$type": "fontWeight" },
        "bold":      { "$value": 700, "$type": "fontWeight" },
        "extrabold": { "$value": 800, "$type": "fontWeight", "$description": "Chỉ dùng cho chữ ký thương hiệu và tiêu đề lớn" }
      },
      "size": {
        "display": { "$value": "clamp(40px, 5vw, 64px)", "$type": "dimension" },
        "h1":      { "$value": "clamp(32px, 4vw, 48px)", "$type": "dimension" },
        "h2":      { "$value": "clamp(26px, 3vw, 36px)", "$type": "dimension" },
        "h3":      { "$value": "24px", "$type": "dimension" },
        "body-lg": { "$value": "18px", "$type": "dimension" },
        "body":    { "$value": "16px", "$type": "dimension" },
        "small":   { "$value": "14px", "$type": "dimension" },
        "caption": { "$value": "12px", "$type": "dimension", "$description": "Sàn nhỏ nhất cho web — không dùng chữ dưới 12px" }
      },
      "lineHeight": {
        "tight":   { "$value": 1.15, "$type": "number", "$description": "Tiêu đề lớn" },
        "heading": { "$value": 1.25, "$type": "number" },
        "body":    { "$value": 1.6,  "$type": "number" }
      },
      "letterSpacing": {
        "logotype": { "$value": "0.055em", "$type": "dimension", "$description": "Giãn chữ của chữ ký thương hiệu — chỉ dùng cho logo" },
        "heading":  { "$value": "-0.01em", "$type": "dimension" },
        "body":     { "$value": "0em", "$type": "dimension" },
        "label":    { "$value": "0.08em", "$type": "dimension", "$description": "Nhãn viết hoa" }
      }
    },

    "spacing": {
      "1": { "$value": "4px",  "$type": "dimension" },
      "2": { "$value": "8px",  "$type": "dimension" },
      "3": { "$value": "12px", "$type": "dimension" },
      "4": { "$value": "16px", "$type": "dimension" },
      "5": { "$value": "24px", "$type": "dimension" },
      "6": { "$value": "32px", "$type": "dimension" },
      "7": { "$value": "48px", "$type": "dimension" },
      "8": { "$value": "64px", "$type": "dimension" },
      "9": { "$value": "96px", "$type": "dimension" }
    },

    "grid": {
      "columns-desktop": { "$value": 12, "$type": "number" },
      "columns-tablet":  { "$value": 8,  "$type": "number" },
      "columns-mobile":  { "$value": 4,  "$type": "number" },
      "gutter":          { "$value": "24px", "$type": "dimension" },
      "margin":          { "$value": "clamp(16px, 5vw, 80px)", "$type": "dimension" },
      "max-width":       { "$value": "1280px", "$type": "dimension" }
    },

    "border": {
      "radius": {
        "sm":   { "$value": "4px",   "$type": "dimension" },
        "md":   { "$value": "8px",   "$type": "dimension", "$description": "Mặc định — thẻ sản phẩm, ô nhập, nút" },
        "lg":   { "$value": "16px",  "$type": "dimension", "$description": "Thẻ lớn, hộp thoại" },
        "pill": { "$value": "999px", "$type": "dimension", "$description": "Nhãn, chip lọc" }
      },
      "width": {
        "hairline": { "$value": "1px", "$type": "dimension" },
        "thick":    { "$value": "2px", "$type": "dimension" }
      }
    },

    "shadow": {
      "sm": { "$value": "0 1px 2px rgba(31,36,38,.08)",   "$type": "shadow", "$description": "Thẻ tĩnh" },
      "md": { "$value": "0 4px 12px rgba(31,36,38,.10)",  "$type": "shadow", "$description": "Thẻ nổi, dropdown" },
      "lg": { "$value": "0 12px 32px rgba(31,36,38,.14)", "$type": "shadow", "$description": "Hộp thoại, giỏ hàng" }
    },

    "motion": {
      "duration": {
        "fast":   { "$value": "150ms", "$type": "duration", "$description": "Đổi màu khi rê chuột" },
        "normal": { "$value": "250ms", "$type": "duration", "$description": "Mở/đóng thành phần" },
        "slow":   { "$value": "400ms", "$type": "duration", "$description": "Chuyển trang, hiện lớp phủ" }
      },
      "easing": {
        "standard": { "$value": "cubic-bezier(.2,0,0,1)", "$type": "cubicBezier" },
        "enter":    { "$value": "cubic-bezier(0,0,.2,1)", "$type": "cubicBezier" }
      }
    },

    "logo": {
      "clearspace":       { "$value": "1X", "$type": "other", "$description": "X = bề rộng một cột của biểu tượng. Bốn phía logo phải trống tối thiểu 1X." },
      "min-size-digital": { "$value": "24px", "$type": "dimension", "$description": "Chiều cao nhỏ nhất của khoá ngang trên màn hình" },
      "min-size-print":   { "$value": "12mm", "$type": "dimension", "$description": "Bề rộng nhỏ nhất khi in khoá ngang" },
      "min-size-mark":    { "$value": "16px", "$type": "dimension", "$description": "Biểu tượng đứng riêng — favicon" }
    }
  }
}