{
  "$schema": "https://design-tokens.github.io/community-group/format/",
  "$description": "VoxCloud Color System v2. Single source of truth for all colors used in website, apps, decks, and social. WCAG AA verified — see contrast notes per token.",
  "$version": "2.0.0",

  "brand": {
    "blue": {
      "50":  { "value": "#eff7fc", "comment": "Subtle background, info-veld hover" },
      "100": { "value": "#d6ebf7", "comment": "Info banners, tag background" },
      "200": { "value": "#a9d3ed", "comment": "Borders, disabled states" },
      "300": { "value": "#6fb4dd", "comment": "Secondary accents" },
      "400": { "value": "#3893cc", "comment": "Hover states (3.38:1 on #fff — large text only)" },
      "500": { "value": "#0a6fb8", "comment": "Brand base — gradient start, AA body (5.28:1 on #fff)" },
      "600": { "value": "#085c99", "comment": "PRIMARY CTA — AAA on #fff (7.00:1)" },
      "700": { "value": "#064a7a", "comment": "Hover on primary — AAA (9.26:1)" },
      "800": { "value": "#063a60", "comment": "Active / pressed states" },
      "900": { "value": "#04293f", "comment": "Dark surfaces, footer text" },
      "950": { "value": "#02161f", "comment": "Extreme dark" }
    },
    "purple": {
      "50":  { "value": "#f7f2fa" },
      "100": { "value": "#ecdef3" },
      "200": { "value": "#d4b3e0" },
      "300": { "value": "#b985cc" },
      "400": { "value": "#a061bd", "comment": "AA body (4.25:1 on #fff)" },
      "500": { "value": "#8e44ad", "comment": "Gradient endpoint, MetaVox accent — AA body (5.87:1)" },
      "600": { "value": "#763795", "comment": "AAA (7.63:1)" },
      "700": { "value": "#5d2c75" },
      "800": { "value": "#451f57" },
      "900": { "value": "#2c1437" }
    }
  },

  "neutral": {
    "gray": {
      "0":   { "value": "#ffffff", "comment": "Base white" },
      "50":  { "value": "#fafaf9", "comment": "Page background" },
      "100": { "value": "#f4f4f2", "comment": "Card background" },
      "200": { "value": "#e7e6e3", "comment": "Borders" },
      "300": { "value": "#d3d2cd", "comment": "Dividers" },
      "400": { "value": "#a8a7a1", "comment": "Placeholder text (large only)" },
      "500": { "value": "#78776f", "comment": "Secondary text — AA body (4.50:1)" },
      "600": { "value": "#56554f", "comment": "Body text on light — AAA (7.48:1)" },
      "700": { "value": "#3e3d39", "comment": "Headings light theme" },
      "800": { "value": "#2a2a26", "comment": "Dark surface" },
      "900": { "value": "#1a1a17", "comment": "Darkest text" },
      "950": { "value": "#0f0f0d", "comment": "Code background, deepest dark" }
    }
  },

  "semantic": {
    "success": { "value": "#27ae60", "comment": "WARNING: shares hex with IntroVox app accent — different context" },
    "warning": { "value": "#e67e22", "comment": "WARNING: shares hex with FormVox app accent — different context" },
    "error":   { "value": "#e74c3c" },
    "info":    { "value": "#3498db" }
  },

  "app-accent": {
    "intravox":  { "value": "#0082c9", "comment": "Blauw — intranet" },
    "metavox":   { "value": "#8e44ad", "comment": "Paars — metadata (= vox-purple-500)" },
    "introvox":  { "value": "#27ae60", "comment": "Groen — onboarding" },
    "formvox":   { "value": "#e67e22", "comment": "Oranje — formulieren" },
    "roomvox":   { "value": "#1abc9c", "comment": "Turquoise — ruimtes" }
  },

  "reserved": {
    "red":       { "value": "#e74c3c" },
    "lightblue": { "value": "#3498db" },
    "gold":      { "value": "#f39c12" }
  },

  "gradient": {
    "brand": {
      "value": "linear-gradient(135deg, #0a6fb8 0%, #8e44ad 100%)",
      "comment": "Canonical brand gradient — vox-blue-500 → vox-purple-500. Used in master logo, banner, hero, OG-images, presentation covers. Do not invent variations."
    }
  },

  "alias": {
    "color-primary":       { "value": "{brand.blue.600}" },
    "color-primary-hover": { "value": "{brand.blue.700}" },
    "color-primary-bg":    { "value": "{brand.blue.50}" },
    "color-text-primary":  { "value": "{neutral.gray.700}" },
    "color-text-body":     { "value": "{neutral.gray.600}" },
    "color-text-muted":    { "value": "{neutral.gray.500}" },
    "color-bg-page":       { "value": "{neutral.gray.50}" },
    "color-bg-card":       { "value": "{neutral.gray.0}" },
    "color-border":        { "value": "{neutral.gray.200}" },
    "color-divider":       { "value": "{neutral.gray.300}" }
  }
}