{
  "$description": "ConnectIQ design tokens. DTCG-style structure. tokens.json is the visual source of truth; application code should expose these through semantic CSS variables. Three themes: light (the default operational app UI), dark (the same app on dark surfaces), and presentation (decks, reports and customer-facing dashboards, derived from the Ember Dark study).",
  "$extensions": {
    "connectiq": {
      "version": "1.1.0",
      "theme": [
        "light",
        "dark",
        "presentation"
      ],
      "status": "proposed",
      "notes": [
        "Exact Figma font metadata was not available; Inter is the recommended normalized UI font.",
        "Purple outlines visible in component screenshots are Figma selection boundaries, not product colors.",
        "Orange, green, yellow, and red values were normalized because the supplied screens contain small color variations.",
        "1.1.0 merges the Ember Dark study as two additive themes, dark and presentation. Light-theme colour is unchanged. Ember's hues were measured against Ember's own surfaces: all five existing ConnectIQ semantic hues already pass WCAG AA on #000000, #13151A and #1E1E1E, so they are reused rather than replaced.",
        "Ember's warning hue #E0A83A was adopted for the dark theme only; #F1BF00 scores 10.60 on #13151A and competes with the brand accent there.",
        "Ember's text-low #636363 was rejected as specified: 3.50/3.04/2.77 on the three dark surfaces, failing AA for the footnote and caption text it was assigned to. Corrected to #858585 (5.69/4.95/4.52).",
        "Dark tinted backgrounds and chart fills are alpha washes of the semantic hue, not new hexes, so the dark theme cannot drift away from the light one.",
        "Ember's 14px card and 10px row radii were NOT adopted. They sit off the established radius scale, and the presentation theme inherits the application scale (4/6/8/12/16/20/pill) unchanged. There is no presentation-specific radius token.",
        "font.size.base moved 13px -> 14px in 1.1.0. The application is still compact and data-forward; 13px was simply below comfortable reading size for sustained operational use.",
        "font.size.md was retired in the same change: it was 14px and would have duplicated base. Zero references existed in the repository. Use base for 14px and lg for 16px.",
        "presentation body type moved 15px -> 16px so it stays a clear step above the new 14px application base rather than a 1px difference."
      ]
    }
  },
  "color": {
    "neutral": {
      "0": {
        "$type": "color",
        "$value": "#FFFFFF"
      },
      "25": {
        "$type": "color",
        "$value": "#FCFCFA"
      },
      "50": {
        "$type": "color",
        "$value": "#F6F7F3"
      },
      "100": {
        "$type": "color",
        "$value": "#F0F1EC"
      },
      "200": {
        "$type": "color",
        "$value": "#E1E3DC"
      },
      "300": {
        "$type": "color",
        "$value": "#CACDC4"
      },
      "400": {
        "$type": "color",
        "$value": "#A2A59C"
      },
      "500": {
        "$type": "color",
        "$value": "#73776E"
      },
      "600": {
        "$type": "color",
        "$value": "#595D56"
      },
      "700": {
        "$type": "color",
        "$value": "#3F3F3F"
      },
      "800": {
        "$type": "color",
        "$value": "#202020"
      },
      "900": {
        "$type": "color",
        "$value": "#000000"
      }
    },
    "brand": {
      "orange": {
        "50": {
          "$type": "color",
          "$value": "#FFF2E8"
        },
        "100": {
          "$type": "color",
          "$value": "#FFDCC4"
        },
        "500": {
          "$type": "color",
          "$value": "#FF6700"
        },
        "600": {
          "$type": "color",
          "$value": "#E85E00"
        },
        "700": {
          "$type": "color",
          "$value": "#C94F00"
        }
      }
    },
    "success": {
      "50": {
        "$type": "color",
        "$value": "#ECF8F2"
      },
      "100": {
        "$type": "color",
        "$value": "#D6F0E3"
      },
      "500": {
        "$type": "color",
        "$value": "#62C696"
      },
      "600": {
        "$type": "color",
        "$value": "#45AD7B"
      },
      "700": {
        "$type": "color",
        "$value": "#278F63"
      }
    },
    "warning": {
      "50": {
        "$type": "color",
        "$value": "#FFF9E6"
      },
      "100": {
        "$type": "color",
        "$value": "#FBEBAA"
      },
      "500": {
        "$type": "color",
        "$value": "#F1BF00"
      },
      "600": {
        "$type": "color",
        "$value": "#D4A700"
      },
      "700": {
        "$type": "color",
        "$value": "#9C7800"
      },
      "dark": {
        "$type": "color",
        "$value": "#E0A83A"
      }
    },
    "danger": {
      "50": {
        "$type": "color",
        "$value": "#FDEDEC"
      },
      "100": {
        "$type": "color",
        "$value": "#F9C7C3"
      },
      "500": {
        "$type": "color",
        "$value": "#F2584B"
      },
      "600": {
        "$type": "color",
        "$value": "#D8463B"
      },
      "700": {
        "$type": "color",
        "$value": "#B43128"
      }
    },
    "info": {
      "50": {
        "$type": "color",
        "$value": "#EDF4FF"
      },
      "100": {
        "$type": "color",
        "$value": "#D7E6FD"
      },
      "500": {
        "$type": "color",
        "$value": "#4C8FF7"
      },
      "600": {
        "$type": "color",
        "$value": "#3379DE"
      },
      "700": {
        "$type": "color",
        "$value": "#2466B9"
      }
    },
    "modelled": {
      "500": {
        "$type": "color",
        "$value": "#9B8FD8"
      },
      "deep": {
        "$type": "color",
        "$value": "#4A3F7A"
      }
    },
    "darkSurface": {
      "canvas": {
        "$type": "color",
        "$value": "#000000"
      },
      "recessed": {
        "$type": "color",
        "$value": "#0A0B0D"
      },
      "default": {
        "$type": "color",
        "$value": "#13151A"
      },
      "raised": {
        "$type": "color",
        "$value": "#1E1E1E"
      }
    },
    "darkText": {
      "primary": {
        "$type": "color",
        "$value": "#FFFFFF"
      },
      "secondary": {
        "$type": "color",
        "$value": "#D2D2D2"
      },
      "muted": {
        "$type": "color",
        "$value": "#94959D"
      },
      "subtle": {
        "$type": "color",
        "$value": "#858585"
      }
    },
    "darkLine": {
      "subtle": {
        "$type": "color",
        "$value": "#FFFFFF17"
      },
      "default": {
        "$type": "color",
        "$value": "#FFFFFF2E"
      }
    }
  },
  "semantic": {
    "color": {
      "background": {
        "canvas": {
          "$type": "color",
          "$value": "{color.neutral.50}"
        },
        "surface": {
          "$type": "color",
          "$value": "{color.neutral.0}"
        },
        "subtle": {
          "$type": "color",
          "$value": "{color.neutral.25}"
        },
        "muted": {
          "$type": "color",
          "$value": "{color.neutral.100}"
        },
        "inverse": {
          "$type": "color",
          "$value": "{color.neutral.900}"
        },
        "overlay": {
          "$type": "color",
          "$value": "#00000099"
        }
      },
      "foreground": {
        "primary": {
          "$type": "color",
          "$value": "{color.neutral.900}"
        },
        "secondary": {
          "$type": "color",
          "$value": "{color.neutral.700}"
        },
        "muted": {
          "$type": "color",
          "$value": "{color.neutral.500}"
        },
        "disabled": {
          "$type": "color",
          "$value": "{color.neutral.400}"
        },
        "inverse": {
          "$type": "color",
          "$value": "{color.neutral.0}"
        },
        "accent": {
          "$type": "color",
          "$value": "{color.brand.orange.500}"
        }
      },
      "border": {
        "subtle": {
          "$type": "color",
          "$value": "{color.neutral.100}"
        },
        "default": {
          "$type": "color",
          "$value": "{color.neutral.200}"
        },
        "strong": {
          "$type": "color",
          "$value": "{color.neutral.300}"
        },
        "focus": {
          "$type": "color",
          "$value": "{color.brand.orange.500}"
        }
      },
      "action": {
        "primaryBackground": {
          "$type": "color",
          "$value": "{color.neutral.900}"
        },
        "primaryForeground": {
          "$type": "color",
          "$value": "{color.neutral.0}"
        },
        "primaryHover": {
          "$type": "color",
          "$value": "{color.neutral.800}"
        },
        "secondaryBackground": {
          "$type": "color",
          "$value": "{color.neutral.0}"
        },
        "secondaryForeground": {
          "$type": "color",
          "$value": "{color.neutral.900}"
        },
        "secondaryBorder": {
          "$type": "color",
          "$value": "{color.neutral.200}"
        },
        "accent": {
          "$type": "color",
          "$value": "{color.brand.orange.500}"
        },
        "destructive": {
          "$type": "color",
          "$value": "{color.danger.500}"
        },
        "disabledBackground": {
          "$type": "color",
          "$value": "{color.neutral.700}"
        },
        "disabledForeground": {
          "$type": "color",
          "$value": "{color.neutral.400}"
        }
      },
      "state": {
        "selectedBackground": {
          "$type": "color",
          "$value": "{color.success.50}"
        },
        "selectedBorder": {
          "$type": "color",
          "$value": "{color.success.500}"
        },
        "successBackground": {
          "$type": "color",
          "$value": "{color.success.50}"
        },
        "successForeground": {
          "$type": "color",
          "$value": "{color.success.700}"
        },
        "successBorder": {
          "$type": "color",
          "$value": "{color.success.500}"
        },
        "warningBackground": {
          "$type": "color",
          "$value": "{color.warning.50}"
        },
        "warningForeground": {
          "$type": "color",
          "$value": "{color.warning.700}"
        },
        "warningBorder": {
          "$type": "color",
          "$value": "{color.warning.500}"
        },
        "dangerBackground": {
          "$type": "color",
          "$value": "{color.danger.50}"
        },
        "dangerForeground": {
          "$type": "color",
          "$value": "{color.danger.700}"
        },
        "dangerBorder": {
          "$type": "color",
          "$value": "{color.danger.500}"
        },
        "infoBackground": {
          "$type": "color",
          "$value": "{color.info.50}"
        },
        "infoForeground": {
          "$type": "color",
          "$value": "{color.info.700}"
        },
        "infoBorder": {
          "$type": "color",
          "$value": "{color.info.500}"
        }
      },
      "chart": {
        "green": {
          "$type": "color",
          "$value": "{color.success.500}"
        },
        "yellow": {
          "$type": "color",
          "$value": "{color.warning.500}"
        },
        "blue": {
          "$type": "color",
          "$value": "{color.info.500}"
        },
        "orange": {
          "$type": "color",
          "$value": "{color.brand.orange.500}"
        },
        "red": {
          "$type": "color",
          "$value": "#FF4848"
        },
        "neutral": {
          "$type": "color",
          "$value": "{color.neutral.200}"
        },
        "modelled": {
          "$type": "color",
          "$value": "{color.modelled.500}"
        }
      }
    },
    "dark": {
      "color": {
        "background": {
          "canvas": {
            "$type": "color",
            "$value": "{color.darkSurface.canvas}"
          },
          "surface": {
            "$type": "color",
            "$value": "{color.darkSurface.default}"
          },
          "subtle": {
            "$type": "color",
            "$value": "{color.darkSurface.recessed}"
          },
          "muted": {
            "$type": "color",
            "$value": "{color.darkSurface.raised}"
          },
          "inverse": {
            "$type": "color",
            "$value": "{color.neutral.0}"
          },
          "overlay": {
            "$type": "color",
            "$value": "#000000CC"
          }
        },
        "foreground": {
          "primary": {
            "$type": "color",
            "$value": "{color.darkText.primary}"
          },
          "secondary": {
            "$type": "color",
            "$value": "{color.darkText.secondary}"
          },
          "muted": {
            "$type": "color",
            "$value": "{color.darkText.muted}"
          },
          "subtle": {
            "$type": "color",
            "$value": "{color.darkText.subtle}"
          },
          "disabled": {
            "$type": "color",
            "$value": "{color.darkText.subtle}"
          },
          "inverse": {
            "$type": "color",
            "$value": "{color.neutral.900}"
          },
          "accent": {
            "$type": "color",
            "$value": "{color.brand.orange.500}"
          }
        },
        "border": {
          "subtle": {
            "$type": "color",
            "$value": "{color.darkLine.subtle}"
          },
          "default": {
            "$type": "color",
            "$value": "{color.darkLine.default}"
          },
          "strong": {
            "$type": "color",
            "$value": "#FFFFFF52"
          },
          "focus": {
            "$type": "color",
            "$value": "{color.brand.orange.500}"
          }
        },
        "action": {
          "primaryBackground": {
            "$type": "color",
            "$value": "{color.neutral.0}"
          },
          "primaryForeground": {
            "$type": "color",
            "$value": "{color.neutral.900}"
          },
          "primaryHover": {
            "$type": "color",
            "$value": "{color.neutral.200}"
          },
          "secondaryBackground": {
            "$type": "color",
            "$value": "{color.darkSurface.raised}"
          },
          "secondaryForeground": {
            "$type": "color",
            "$value": "{color.darkText.primary}"
          },
          "secondaryBorder": {
            "$type": "color",
            "$value": "{color.darkLine.default}"
          },
          "accent": {
            "$type": "color",
            "$value": "{color.brand.orange.500}"
          },
          "destructive": {
            "$type": "color",
            "$value": "{color.danger.500}"
          },
          "disabledBackground": {
            "$type": "color",
            "$value": "{color.darkSurface.recessed}"
          },
          "disabledForeground": {
            "$type": "color",
            "$value": "{color.darkText.subtle}"
          }
        },
        "state": {
          "selectedBackground": {
            "$type": "color",
            "$value": "#62C6961F"
          },
          "selectedBorder": {
            "$type": "color",
            "$value": "{color.success.500}"
          },
          "successBackground": {
            "$type": "color",
            "$value": "#62C6961F"
          },
          "successForeground": {
            "$type": "color",
            "$value": "{color.success.500}"
          },
          "successBorder": {
            "$type": "color",
            "$value": "{color.success.500}"
          },
          "warningBackground": {
            "$type": "color",
            "$value": "#E0A83A1F"
          },
          "warningForeground": {
            "$type": "color",
            "$value": "{color.warning.dark}"
          },
          "warningBorder": {
            "$type": "color",
            "$value": "{color.warning.dark}"
          },
          "dangerBackground": {
            "$type": "color",
            "$value": "#F2584B1F"
          },
          "dangerForeground": {
            "$type": "color",
            "$value": "{color.danger.500}"
          },
          "dangerBorder": {
            "$type": "color",
            "$value": "{color.danger.500}"
          },
          "infoBackground": {
            "$type": "color",
            "$value": "#4C8FF71F"
          },
          "infoForeground": {
            "$type": "color",
            "$value": "{color.info.500}"
          },
          "infoBorder": {
            "$type": "color",
            "$value": "{color.info.500}"
          },
          "pausedOpacity": {
            "$type": "number",
            "$value": 0.5
          }
        },
        "chart": {
          "green": {
            "$type": "color",
            "$value": "{color.success.500}"
          },
          "yellow": {
            "$type": "color",
            "$value": "{color.warning.dark}"
          },
          "blue": {
            "$type": "color",
            "$value": "{color.info.500}"
          },
          "orange": {
            "$type": "color",
            "$value": "{color.brand.orange.500}"
          },
          "red": {
            "$type": "color",
            "$value": "{color.danger.500}"
          },
          "modelled": {
            "$type": "color",
            "$value": "{color.modelled.500}"
          },
          "neutral": {
            "$type": "color",
            "$value": "{color.darkText.muted}"
          },
          "gridline": {
            "$type": "color",
            "$value": "{color.darkLine.subtle}"
          },
          "fillGreen": {
            "$type": "color",
            "$value": "#62C69652"
          },
          "fillYellow": {
            "$type": "color",
            "$value": "#E0A83A52"
          },
          "fillBlue": {
            "$type": "color",
            "$value": "#4C8FF752"
          },
          "fillOrange": {
            "$type": "color",
            "$value": "#FF670052"
          },
          "fillRed": {
            "$type": "color",
            "$value": "#F2584B52"
          },
          "fillModelled": {
            "$type": "color",
            "$value": "#9B8FD852"
          }
        }
      }
    }
  },
  "font": {
    "family": {
      "display": {
        "$type": "fontFamily",
        "$value": [
          "Neue Montreal",
          "Inter",
          "ui-sans-serif",
          "system-ui",
          "-apple-system",
          "BlinkMacSystemFont",
          "Segoe UI",
          "sans-serif"
        ]
      },
      "sans": {
        "$type": "fontFamily",
        "$value": [
          "Inter",
          "ui-sans-serif",
          "system-ui",
          "-apple-system",
          "BlinkMacSystemFont",
          "Segoe UI",
          "sans-serif"
        ]
      },
      "data": {
        "$type": "fontFamily",
        "$value": [
          "ui-monospace",
          "SFMono-Regular",
          "Menlo",
          "Monaco",
          "Consolas",
          "monospace"
        ]
      }
    },
    "weight": {
      "regular": {
        "$type": "fontWeight",
        "$value": 400
      },
      "medium": {
        "$type": "fontWeight",
        "$value": 500
      },
      "semibold": {
        "$type": "fontWeight",
        "$value": 600
      },
      "bold": {
        "$type": "fontWeight",
        "$value": 700
      },
      "extrabold": {
        "$type": "fontWeight",
        "$value": 800
      }
    },
    "size": {
      "xs": {
        "$type": "dimension",
        "$value": "11px"
      },
      "sm": {
        "$type": "dimension",
        "$value": "12px"
      },
      "base": {
        "$type": "dimension",
        "$value": "14px"
      },
      "lg": {
        "$type": "dimension",
        "$value": "16px"
      },
      "xl": {
        "$type": "dimension",
        "$value": "18px"
      },
      "2xl": {
        "$type": "dimension",
        "$value": "20px"
      },
      "3xl": {
        "$type": "dimension",
        "$value": "24px"
      },
      "4xl": {
        "$type": "dimension",
        "$value": "28px"
      },
      "5xl": {
        "$type": "dimension",
        "$value": "32px"
      },
      "kpi": {
        "$type": "dimension",
        "$value": "36px"
      }
    },
    "lineHeight": {
      "tight": {
        "$type": "number",
        "$value": 1.15
      },
      "heading": {
        "$type": "number",
        "$value": 1.25
      },
      "body": {
        "$type": "number",
        "$value": 1.4
      },
      "relaxed": {
        "$type": "number",
        "$value": 1.55
      }
    },
    "letterSpacing": {
      "tight": {
        "$type": "dimension",
        "$value": "-0.02em"
      },
      "normal": {
        "$type": "dimension",
        "$value": "0em"
      },
      "label": {
        "$type": "dimension",
        "$value": "0.06em"
      },
      "display": {
        "$type": "dimension",
        "$value": "-0.025em"
      },
      "labelWide": {
        "$type": "dimension",
        "$value": "0.14em"
      }
    }
  },
  "space": {
    "0": {
      "$type": "dimension",
      "$value": "0px"
    },
    "0.5": {
      "$type": "dimension",
      "$value": "2px"
    },
    "1": {
      "$type": "dimension",
      "$value": "4px"
    },
    "1.5": {
      "$type": "dimension",
      "$value": "6px"
    },
    "2": {
      "$type": "dimension",
      "$value": "8px"
    },
    "3": {
      "$type": "dimension",
      "$value": "12px"
    },
    "4": {
      "$type": "dimension",
      "$value": "16px"
    },
    "5": {
      "$type": "dimension",
      "$value": "20px"
    },
    "6": {
      "$type": "dimension",
      "$value": "24px"
    },
    "8": {
      "$type": "dimension",
      "$value": "32px"
    },
    "10": {
      "$type": "dimension",
      "$value": "40px"
    },
    "12": {
      "$type": "dimension",
      "$value": "48px"
    },
    "16": {
      "$type": "dimension",
      "$value": "64px"
    }
  },
  "size": {
    "control": {
      "sm": {
        "$type": "dimension",
        "$value": "32px"
      },
      "md": {
        "$type": "dimension",
        "$value": "40px"
      },
      "lg": {
        "$type": "dimension",
        "$value": "48px"
      }
    },
    "icon": {
      "xs": {
        "$type": "dimension",
        "$value": "12px"
      },
      "sm": {
        "$type": "dimension",
        "$value": "16px"
      },
      "md": {
        "$type": "dimension",
        "$value": "20px"
      },
      "lg": {
        "$type": "dimension",
        "$value": "24px"
      }
    },
    "layout": {
      "sidebar": {
        "$type": "dimension",
        "$value": "224px"
      },
      "sidebarCollapsed": {
        "$type": "dimension",
        "$value": "64px"
      },
      "pageMax": {
        "$type": "dimension",
        "$value": "1440px"
      },
      "contentReadable": {
        "$type": "dimension",
        "$value": "1120px"
      }
    }
  },
  "radius": {
    "none": {
      "$type": "dimension",
      "$value": "0px"
    },
    "xs": {
      "$type": "dimension",
      "$value": "4px"
    },
    "sm": {
      "$type": "dimension",
      "$value": "6px"
    },
    "md": {
      "$type": "dimension",
      "$value": "8px"
    },
    "lg": {
      "$type": "dimension",
      "$value": "12px"
    },
    "xl": {
      "$type": "dimension",
      "$value": "16px"
    },
    "2xl": {
      "$type": "dimension",
      "$value": "20px"
    },
    "pill": {
      "$type": "dimension",
      "$value": "9999px"
    }
  },
  "border": {
    "width": {
      "default": {
        "$type": "dimension",
        "$value": "1px"
      },
      "active": {
        "$type": "dimension",
        "$value": "2px"
      }
    }
  },
  "shadow": {
    "none": {
      "$type": "shadow",
      "$value": {
        "color": "#00000000",
        "offsetX": "0px",
        "offsetY": "0px",
        "blur": "0px",
        "spread": "0px"
      }
    },
    "sm": {
      "$type": "shadow",
      "$value": {
        "color": "#0000000F",
        "offsetX": "0px",
        "offsetY": "1px",
        "blur": "2px",
        "spread": "0px"
      }
    },
    "md": {
      "$type": "shadow",
      "$value": {
        "color": "#0000001F",
        "offsetX": "0px",
        "offsetY": "8px",
        "blur": "24px",
        "spread": "-4px"
      }
    },
    "lg": {
      "$type": "shadow",
      "$value": {
        "color": "#00000029",
        "offsetX": "0px",
        "offsetY": "16px",
        "blur": "40px",
        "spread": "-8px"
      }
    }
  },
  "motion": {
    "duration": {
      "fast": {
        "$type": "duration",
        "$value": "120ms"
      },
      "normal": {
        "$type": "duration",
        "$value": "180ms"
      },
      "slow": {
        "$type": "duration",
        "$value": "240ms"
      }
    },
    "easing": {
      "standard": {
        "$type": "cubicBezier",
        "$value": [
          0.2,
          0,
          0,
          1
        ]
      },
      "exit": {
        "$type": "cubicBezier",
        "$value": [
          0.4,
          0,
          1,
          1
        ]
      }
    }
  },
  "opacity": {
    "disabled": {
      "$type": "number",
      "$value": 0.5
    },
    "muted": {
      "$type": "number",
      "$value": 0.72
    },
    "overlay": {
      "$type": "number",
      "$value": 0.6
    }
  },
  "presentation": {
    "font": {
      "size": {
        "eyebrow": {
          "$type": "dimension",
          "$value": "12px"
        },
        "data": {
          "$type": "dimension",
          "$value": "13px"
        },
        "body": {
          "$type": "dimension",
          "$value": "16px"
        },
        "lede": {
          "$type": "dimension",
          "$value": "18px"
        },
        "cardTitle": {
          "$type": "dimension",
          "$value": "20px"
        },
        "heading": {
          "$type": "dimension",
          "$value": "32px"
        },
        "display": {
          "$type": "dimension",
          "$value": "48px"
        },
        "displayMax": {
          "$type": "dimension",
          "$value": "56px"
        }
      },
      "lineHeight": {
        "display": {
          "$type": "number",
          "$value": 1.05
        },
        "heading": {
          "$type": "number",
          "$value": 1.12
        },
        "body": {
          "$type": "number",
          "$value": 1.6
        }
      }
    },
    "layout": {
      "contentMax": {
        "$type": "dimension",
        "$value": "1120px"
      },
      "marginRatio": {
        "$type": "number",
        "$value": 0.045
      },
      "splitPrimary": {
        "$type": "number",
        "$value": 0.55
      },
      "splitSecondary": {
        "$type": "number",
        "$value": 0.4
      },
      "barAccent": {
        "$type": "dimension",
        "$value": "3px"
      },
      "maxSteps": {
        "$type": "number",
        "$value": 6
      },
      "maxRatioSegments": {
        "$type": "number",
        "$value": 3
      }
    }
  }
}