{
  "$schema": "https://design-tokens.github.io/community-group/format/",
  "_meta": {
    "name": "Wisesight Brand Design Tokens",
    "description": "Exact, importable brand values. Source of truth is index.html; audit rules live in llms.txt.",
    "version": "1.2.0"
  },
  "color": {
    "primary": {
      "red":   { "value": "#850219", "comment": "Wisesight Red — attention/accent only, never a background. Print: Pantone 7427 C · CMYK 0/99/81/48 · RGB 133/2/25." },
      "black": { "value": "#101820", "comment": "Wisesight Black — primary text/information. Print: Pantone Black 6 C · CMYK 100/79/44/93 · RGB 16/24/32." },
      "gray":  { "value": "#CDCFDB", "comment": "Wisesight Gray — sub-information. Print: Pantone 650 C · CMYK 6/5/0/14 · RGB 205/207/219." }
    },
    "surface": {
      "white":   { "value": "#FFFFFF" },
      "gray-100": { "value": "#F2F3F6", "comment": "Standard neutral background." },
      "black":   { "value": "#101820" }
    },
    "text": {
      "default":  { "value": "#101820" },
      "muted":    { "value": "#3C3E47", "comment": "Neutral D1 — softer near-black for long-form body copy; headers stay Wisesight Black." },
      "on-red":   { "value": "#FFFFFF", "comment": "White text on red fills for contrast." }
    },
    "secondary": {
      "steel-blue":    { "value": "#3A4F7A" },
      "signal-blue":   { "value": "#2677D9" },
      "royal-purple":  { "value": "#3B2C5C" },
      "royal-indigo":  { "value": "#5B4B8A" },
      "emerald":       { "value": "#004A25" },
      "jewel-emerald": { "value": "#1F6B5A" },
      "rose-pink":     { "value": "#C15A7A" },
      "terracotta-red": { "value": "#C4504B" },
      "ivory-white":   { "value": "#EBE6E2" },
      "mint-green":    { "value": "#6FC9A4" },
      "amber-orange":  { "value": "#E8893A" }
    },
    "additional": {
      "_rule": "Accent layer for charts/highlights/campaign work — 11 hues, each a ramp of 6 tones: 20% / 40% / 60% tint, base (100%), darker (140%), deepest (160%). Accents ONLY — never backgrounds, and ≤20% of any layout total (COLOR-09/10). A step is named only where it exactly matches a Primary/Secondary color; otherwise it is numbered by tone. The red ramp is anchored on brand red #850219; inside plotted chart data, 'negative' still uses the distinct chart red #B22234, not these.",
      "red":     { "20": { "value": "#F0D3D6" }, "40": { "value": "#E0A7AE" }, "60": { "value": "#D17A85" }, "base": { "value": "#850219", "comment": "= Primary Wisesight Red" }, "140": { "value": "#49010D" }, "160": { "value": "#2D0008" } },
      "orange":  { "20": { "value": "#FAE7D8" }, "40": { "value": "#F6D0B0" }, "60": { "value": "#F1B889" }, "base": { "value": "#E8893A", "comment": "= Secondary Amber orange" }, "140": { "value": "#8B5223" }, "160": { "value": "#5D3717" } },
      "gold":    { "20": { "value": "#FAF1DA" }, "40": { "value": "#F5E4B4" }, "60": { "value": "#F1D68F" }, "base": { "value": "#E7BB44", "comment": "= sentiment Neutral" }, "140": { "value": "#8B7029" }, "160": { "value": "#5C4B1B" } },
      "lime":    { "20": { "value": "#EFF6DA" }, "40": { "value": "#DFEDB5" }, "60": { "value": "#CFE390" }, "base": { "value": "#AFD146", "comment": "brand Lime; sentiment Positive is a darker Lime #9AB73D" }, "140": { "value": "#697D2A" }, "160": { "value": "#46541C" } },
      "green":   { "20": { "value": "#CCF1DE" }, "40": { "value": "#99E3BE" }, "60": { "value": "#66D59D" }, "base": { "value": "#00B95C" }, "140": { "value": "#006F38" }, "160": { "value": "#004A25", "comment": "= Secondary Emerald" } },
      "teal":    { "20": { "value": "#E2F4ED" }, "40": { "value": "#C5E9DB" }, "60": { "value": "#A9DFC8" }, "base": { "value": "#6FC9A4", "comment": "= Secondary Mint Green" }, "140": { "value": "#1F6B5A", "comment": "= Secondary Jewel Emerald" }, "160": { "value": "#2C5042" } },
      "cyan":    { "20": { "value": "#DCF7FB" }, "40": { "value": "#B9EEF8" }, "60": { "value": "#95E6F4" }, "base": { "value": "#4FD5ED" }, "140": { "value": "#2F808E" }, "160": { "value": "#20555F" } },
      "blue":    { "20": { "value": "#D4E4F7" }, "40": { "value": "#A8C9F0" }, "60": { "value": "#7DADE8" }, "base": { "value": "#2677D9", "comment": "= Secondary Signal Blue" }, "140": { "value": "#174782" }, "160": { "value": "#0F2E54" } },
      "indigo":  { "20": { "value": "#DFD6FA" }, "40": { "value": "#C0ADF5" }, "60": { "value": "#A083F0" }, "base": { "value": "#6131E6", "comment": "overlaps Secondary Royal Indigo — prefer the Secondary there" }, "140": { "value": "#3A1D8A" }, "160": { "value": "#27145C" } },
      "violet":  { "20": { "value": "#D8D5DE" }, "40": { "value": "#B1ABBE" }, "60": { "value": "#89809D" }, "base": { "value": "#3B2C5C", "comment": "= Secondary Royal Purple" }, "140": { "value": "#231A37" }, "160": { "value": "#181225" } },
      "magenta": { "20": { "value": "#F3DEE4" }, "40": { "value": "#E6BDCA" }, "60": { "value": "#DA9CAF" }, "base": { "value": "#C15A7A", "comment": "= Secondary Rose Pink" }, "140": { "value": "#743649" }, "160": { "value": "#4D2431" } }
    },
    "channel": {
      "_rule": "Per-platform brand colors for social/chat channel icons/labels (ICON-04). Use each platform's own brand color; keep icons as Font Awesome Brands. Note: tiktok's channel color is #00D6D3, but its ICON renders black (#000000), like X.",
      "facebook":        { "value": "#0766FF" },
      "x":               { "value": "#000000" },
      "instagram":       { "value": "#E4405F" },
      "forum":           { "value": "#3C3963" },
      "news":            { "value": "#669900" },
      "blog":            { "value": "#F37A01" },
      "youtube":         { "value": "#CD201F" },
      "tiktok":          { "value": "#00D6D3" },
      "line":            { "value": "#06C755" },
      "messenger":       { "value": "#0084FF" },
      "whatsapp":        { "value": "#25D366" },
      "google-business": { "value": "#4285F4" }
    },
    "sentiment": {
      "_rule": "Fixed diverging sentiment palette — the same three colors on every chart, report, and layout. A color always means the same thing. Negative uses #B22234, kept distinct from Wisesight Red #850219 (a brand/layout accent that never appears inside plotted data). Same values as color.chart.sentiment; see DATAVIZ-03 for chart usage.",
      "positive": { "value": "#9AB73D" },
      "neutral":  { "value": "#E7BB44" },
      "negative": { "value": "#B22234" }
    },
    "chart": {
      "_rule": "Series default to neutral. Emphasize the ONE point that matters with black OR a single Wisesight Red focus accent (one mark only). Keep red doing one job per chart: if red marks negative data (#B22234) don't also use Wisesight Red for focus. See DATAVIZ-* in llms.txt.",
      "neutral":  { "value": "#CDCFDB", "comment": "Default series — no emphasis." },
      "emphasis": { "value": "#101820", "comment": "Highlight the one key series with dark contrast. Not 'series 1'." },
      "focus":    { "value": "#850219", "comment": "Optional Wisesight Red focus accent on the ONE key point (non-negative). One mark only; not for negative data." },
      "negative": { "value": "#B22234", "comment": "Negative/decline/alert data only; red reads as 'bad'. Matches sentiment negative." },
      "other":    { "value": "#B8BCC8", "comment": "Grouped 'Other' bucket beyond the categorical set." },
      "gridline": { "value": "#E6E7EC" },
      "categorical": {
        "_rule": "Assign in this order and stop early; most charts need <= 3.",
        "1": { "value": "#3A4F7A", "comment": "Steel Blue" },
        "2": { "value": "#1F6B5A", "comment": "Jewel Emerald" },
        "3": { "value": "#E8893A", "comment": "Amber Orange" },
        "4": { "value": "#5B4B8A", "comment": "Royal Indigo" },
        "5": { "value": "#2677D9", "comment": "Signal Blue" },
        "6": { "value": "#C15A7A", "comment": "Rose Pink" }
      },
      "sentiment": {
        "_rule": "Fixed diverging palette; same three colors on every chart. Negative uses #B22234, distinct from Wisesight Red #850219 (a brand/layout accent, never inside plotted data).",
        "positive": { "value": "#9AB73D" },
        "neutral":  { "value": "#E7BB44" },
        "negative": { "value": "#B22234" }
      },
      "sequential": {
        "_rule": "Single-hue red ramp for intensity/heatmaps, low -> high. One hue only; never rainbow.",
        "1": { "value": "#F0D3D6" },
        "2": { "value": "#E0A7AE" },
        "3": { "value": "#D17A85" },
        "4": { "value": "#B23A4E" },
        "5": { "value": "#850219" }
      }
    }
  },
  "gradient": {
    "_rule": "Only these four are approved. No other colors, angles, or stops. On photos use a solid overlay, not a gradient.",
    "red-black-90":  { "value": "linear-gradient(90deg, #850219 0%, #101820 100%)" },
    "red-black-180": { "value": "linear-gradient(180deg, #850219 0%, #101820 100%)" },
    "white-gray-90":  { "value": "linear-gradient(90deg, #FFFFFF 0%, #F2F3F6 100%)" },
    "white-gray-180": { "value": "linear-gradient(180deg, #FFFFFF 0%, #F2F3F6 100%)" }
  },
  "radius": {
    "_rule": "Allowed corner radii only. No other values. Capsules use full pill.",
    "none": { "value": "0px", "comment": "Sharp 90° — allowed." },
    "sm":   { "value": "5px" },
    "md":   { "value": "10px" },
    "pill": { "value": "9999px", "comment": "Full pill radius for capsules." }
  },
  "shadow": {
    "_rule": "Exactly one approved shadow. Use this value or none — no custom/ad-hoc shadows.",
    "flat":    { "value": "none", "comment": "No elevation; use on dark backgrounds." },
    "default": { "value": "0px 4px 12px 0px rgba(16, 24, 32, 0.18)", "comment": "The one approved Wisesight shadow." }
  },
  "spacing": {
    "_rule": "8px base. Use multiples of 8 for padding, gaps, margins.",
    "base": { "value": "8px" },
    "1": { "value": "8px" },
    "2": { "value": "16px" },
    "3": { "value": "24px" },
    "4": { "value": "32px" },
    "6": { "value": "48px", "comment": "Minimum desktop page/slide margin." },
    "8": { "value": "64px" }
  },
  "grid": {
    "columns":     { "value": 12 },
    "min-margin-desktop": { "value": "48px" }
  },
  "typography": {
    "font-family": {
      "ui":      { "value": "Roboto", "comment": "Primary system/UI font." },
      "formal":  { "value": "Sarabun", "comment": "Additional — Thai+Latin." },
      "additional": { "value": ["Prompt", "Kanit", "Poppins", "IBM Plex Sans"], "comment": "Approved additional fonts only." }
    },
    "weight": {
      "light":      { "value": 300 },
      "regular":    { "value": 400 },
      "medium":     { "value": 500 },
      "semibold":   { "value": 600 },
      "bold":       { "value": 700 }
    },
    "scale": {
      "_rule": "Type scale for content (slides, reports, branded material). One family per document; keep the scale consistent (TYPE-02).",
      "title":          { "value": { "fontSize": "28px", "fontWeight": 700, "lineHeight": 1.2 } },
      "subtitle":       { "value": { "fontSize": "22px", "fontWeight": 600, "lineHeight": 1.25 } },
      "heading":        { "value": { "fontSize": "18px", "fontWeight": 700, "lineHeight": 1.3 } },
      "subheading":     { "value": { "fontSize": "16px", "fontWeight": 600, "lineHeight": 1.35 } },
      "section-header": { "value": { "fontSize": "15px", "fontWeight": 600, "lineHeight": 1.4 } },
      "body":           { "value": { "fontSize": "14px", "fontWeight": 400, "lineHeight": 1.5 } },
      "caption":        { "value": { "fontSize": "12px", "fontWeight": 400, "lineHeight": 1.45 } },
      "quote":          { "value": { "fontSize": "14px", "fontWeight": 400, "lineHeight": 1.5, "fontStyle": "italic" } }
    }
  },
  "ratio": {
    "red-max":        { "value": 0.10, "comment": "Red ≤ 10% of a layout (9:1 neutral:red), or logo only." },
    "additional-max": { "value": 0.20, "comment": "Additional colors ≤ 20% total; never backgrounds." },
    "distribution":   { "value": "60-30-10", "comment": "Neutral 60% · primary 30% · red accent 10%." }
  }
}