/**
 * Do not edit directly
 * Generated on Fri, 09 Oct 2026 14:38:16 GMT
 */

export declare const breakpoints: {
  /**
   * **value**: `{base.unit} * 80` (20rem | 320px)
   * 
   * **CSS Var**: `--cnvs-sys-breakpoints-s`
   * 
   * The `min-width` for mobile devices, such as phones and tablets.
   * 
   * @deprecated 
   */
  "s": "--cnvs-sys-breakpoints-s",
  /**
   * **value**: `{base.unit} * 192` (48rem | 768px)
   * 
   * **CSS Var**: `--cnvs-sys-breakpoints-m`
   * 
   * Medium screens, such as laptops.
   * 
   * @deprecated 
   */
  "m": "--cnvs-sys-breakpoints-m",
  /**
   * **value**: `{base.unit} * 256` (64rem | 1024px)
   * 
   * **CSS Var**: `--cnvs-sys-breakpoints-l`
   * 
   * Large screens, such as desktops.
   * 
   * @deprecated 
   */
  "l": "--cnvs-sys-breakpoints-l",
  /**
   * **value**: `0`
   * 
   * **CSS Var**: `--cnvs-sys-breakpoints-zero`
   * 
   * Use to set a media query `min-width` below small.
   */
  "zero": "--cnvs-sys-breakpoints-zero",
  /**
   * **value**: `{base.baseline} * 40` (20rem | 320px)
   * 
   * **CSS Var**: `--cnvs-sys-breakpoints-sm`
   * 
   * The `min-width` for mobile devices, such as phones and tablets.
   */
  "sm": "--cnvs-sys-breakpoints-sm",
  /**
   * **value**: `{base.baseline} * 96` (48rem | 768px)
   * 
   * **CSS Var**: `--cnvs-sys-breakpoints-md`
   * 
   * Medium screens, such as laptops.
   */
  "md": "--cnvs-sys-breakpoints-md",
  /**
   * **value**: `{base.baseline} * 128` (64rem | 1024px)
   * 
   * **CSS Var**: `--cnvs-sys-breakpoints-lg`
   * 
   * Large screens, such as desktops.
   */
  "lg": "--cnvs-sys-breakpoints-lg",
  /**
   * **value**: `{base.baseline} * 180` (90rem | 1440px)
   * 
   * **CSS Var**: `--cnvs-sys-breakpoints-xl`
   * 
   * Used for extra large screens, such as wide monitors and TVs.
   */
  "xl": "--cnvs-sys-breakpoints-xl",
};

export declare const shape: {
  /**
   * **value**: `{sys.shape.none}`
   * 
   * **CSS Var**: `--cnvs-sys-shape-zero`
   * 
   * Full-width and background containers. Fixed navigation containers such as headers, and side-panels.
   * 
   * @deprecated Use {sys.shape.none} instead
   */
  "zero": "--cnvs-sys-shape-zero",
  /**
   * **value**: `{base.unit} * 0.5` (0.125rem | 2px)
   * 
   * **CSS Var**: `--cnvs-sys-shape-half`
   * 
   * Use this for subtle and small components that don't require to group complex information like Status Indicators, Checkboxes and Color Swatches.
   * 
   * @deprecated 
   */
  "half": "--cnvs-sys-shape-half",
  /**
   * **value**: `{base.unit}` (0.25rem | 4px)
   * 
   * **CSS Var**: `--cnvs-sys-shape-x1`
   * 
   * @deprecated 
   */
  "x1": "--cnvs-sys-shape-x1",
  /**
   * **value**: `{base.unit} * 1.5` (0.375rem | 6px)
   * 
   * **CSS Var**: `--cnvs-sys-shape-x1-half`
   * 
   * @deprecated 
   */
  "x1Half": "--cnvs-sys-shape-x1-half",
  /**
   * **value**: `{base.unit} * 2` (0.5rem | 8px)
   * 
   * **CSS Var**: `--cnvs-sys-shape-x2`
   * 
   * Use this for all the containers and popups: All Cards, Modals, Tooltips and Toasts.
   * 
   * @deprecated 
   */
  "x2": "--cnvs-sys-shape-x2",
  /**
   * **value**: `{base.unit} * 4` (1rem | 16px)
   * 
   * **CSS Var**: `--cnvs-sys-shape-x4`
   * 
   * (Mobile) Primary containers that house a large amount of other elements and complex information
   * 
   * @deprecated 
   */
  "x4": "--cnvs-sys-shape-x4",
  /**
   * **value**: `{base.unit} * 6` (1.5rem | 24px)
   * 
   * **CSS Var**: `--cnvs-sys-shape-x6`
   * 
   * (Mobile) Full width sheets that are temporary and modal views
   * 
   * @deprecated 
   */
  "x6": "--cnvs-sys-shape-x6",
  /**
   * **value**: `{base.unit} * 250` (62.5rem | 1000px)
   * 
   * **CSS Var**: `--cnvs-sys-shape-round`
   * 
   * Commonly used for our standard buttons and profile avatars: All Primary, Secondary Buttons, Radio Buttons and Notification Badges.
   * 
   * @deprecated 
   */
  "round": "--cnvs-sys-shape-round",
  /**
   * **value**: `{base.size.0}`
   * 
   * **CSS Var**: `--cnvs-sys-shape-none`
   * 
   * Full-width and background containers. Fixed navigation containers such as headers, and side-panels.
   */
  "none": "--cnvs-sys-shape-none",
  /**
   * **value**: `{base.size.50}` (0.25rem | 4px)
   * 
   * **CSS Var**: `--cnvs-sys-shape-sm`
   * 
   * Pill, Status Indicator, Checkbox
   */
  "sm": "--cnvs-sys-shape-sm",
  /**
   * **value**: `{base.size.100}` (0.5rem | 8px)
   * 
   * **CSS Var**: `--cnvs-sys-shape-md`
   * 
   * Inputs, Toast, Tooltip, Snackbar
   */
  "md": "--cnvs-sys-shape-md",
  /**
   * **value**: `{base.size.150}` (0.75rem | 12px)
   * 
   * **CSS Var**: `--cnvs-sys-shape-lg`
   * 
   * Rich text editor
   */
  "lg": "--cnvs-sys-shape-lg",
  /**
   * **value**: `{base.size.200}` (1rem | 16px)
   * 
   * **CSS Var**: `--cnvs-sys-shape-xl`
   * 
   * Extra large rounding for prominent containers
   */
  "xl": "--cnvs-sys-shape-xl",
  /**
   * **value**: `{base.size.300}` (1.5rem | 24px)
   * 
   * **CSS Var**: `--cnvs-sys-shape-xxl`
   * 
   * Extra extra large rounding for cards and items
   */
  "xxl": "--cnvs-sys-shape-xxl",
  /**
   * **value**: `{base.size.400}` (2rem | 32px)
   * 
   * **CSS Var**: `--cnvs-sys-shape-xxxl`
   * 
   * Maximum rounding for modals and large containers
   */
  "xxxl": "--cnvs-sys-shape-xxxl",
  /**
   * **value**: `{base.size.75} * 100` (37.5rem | 600px)
   * 
   * **CSS Var**: `--cnvs-sys-shape-full`
   * 
   * Full rounding is reserved high-visibility components. This shape is intended to draw attention. Buttons, Badge, Status Indicator, Essential Inputs, Border Containers (Not Cards)
   */
  "full": "--cnvs-sys-shape-full",
};

export declare const space: {
  /**
   * **value**: `0`
   * 
   * **CSS Var**: `--cnvs-sys-space-zero`
   * 
   * Stacks, rows in tables
   * 
   * @deprecated Use semantic padding and gap values instead
   */
  "zero": "--cnvs-sys-space-zero",
  /**
   * **value**: `{base.unit} * 0.5` (0.125rem | 2px)
   * 
   * **CSS Var**: `--cnvs-sys-space-half`
   * 
   * Mobile only
   * 
   * @deprecated Use semantic padding and gap values instead
   */
  "half": "--cnvs-sys-space-half",
  /**
   * **value**: `{base.unit}` (0.25rem | 4px)
   * 
   * **CSS Var**: `--cnvs-sys-space-x1`
   * 
   * Compact spacing between text or icons
   * 
   * @deprecated Use semantic padding and gap values instead
   */
  "x1": "--cnvs-sys-space-x1",
  /**
   * **value**: `{base.unit} * 2` (0.5rem | 8px)
   * 
   * **CSS Var**: `--cnvs-sys-space-x2`
   * 
   * Commonly used to group compact elements like icon buttons
   * 
   * @deprecated Use semantic padding and gap values instead
   */
  "x2": "--cnvs-sys-space-x2",
  /**
   * **value**: `{base.unit} * 3` (0.75rem | 12px)
   * 
   * **CSS Var**: `--cnvs-sys-space-x3`
   * 
   * Use when compact padding is required
   * 
   * @deprecated Use semantic padding and gap values instead
   */
  "x3": "--cnvs-sys-space-x3",
  /**
   * **value**: `{base.unit} * 4` (1rem | 16px)
   * 
   * **CSS Var**: `--cnvs-sys-space-x4`
   * 
   * Default space token. Used to group Inputs with related data
   * 
   * @deprecated Use semantic padding and gap values instead
   */
  "x4": "--cnvs-sys-space-x4",
  /**
   * **value**: `{base.unit} * 5` (1.25rem | 20px)
   * 
   * **CSS Var**: `--cnvs-sys-space-x5`
   * 
   * Mobile only
   * 
   * @deprecated Use semantic padding and gap values instead
   */
  "x5": "--cnvs-sys-space-x5",
  /**
   * **value**: `{base.unit} * 6` (1.5rem | 24px)
   * 
   * **CSS Var**: `--cnvs-sys-space-x6`
   * 
   * - Padding around card content
   * - Related elements where more space between them can be afforded
   * - Separate section headings or titles from body text or inputs
   * 
   * @deprecated Use semantic padding and gap values instead
   */
  "x6": "--cnvs-sys-space-x6",
  /**
   * **value**: `{base.unit} * 8` (2rem | 32px)
   * 
   * **CSS Var**: `--cnvs-sys-space-x8`
   * 
   * - Standard spacing between cards
   * - Used to separate groups of content 
   * - Separate section headings or titles from body text or inputs
   * 
   * @deprecated Use semantic padding and gap values instead
   */
  "x8": "--cnvs-sys-space-x8",
  /**
   * **value**: `{base.unit} * 10` (2.5rem | 40px)
   * 
   * **CSS Var**: `--cnvs-sys-space-x10`
   * 
   * - Used for outer margins on the overall page content 
   * - Used for inner margins on large items such as page sections
   * 
   * @deprecated Use semantic padding and gap values instead
   */
  "x10": "--cnvs-sys-space-x10",
  /**
   * **value**: `{base.unit} * 14` (3.5rem | 56px)
   * 
   * **CSS Var**: `--cnvs-sys-space-x14`
   * 
   * Mobile only
   * 
   * @deprecated Use semantic padding and gap values instead
   */
  "x14": "--cnvs-sys-space-x14",
  /**
   * **value**: `{base.unit} * 16` (4rem | 64px)
   * 
   * **CSS Var**: `--cnvs-sys-space-x16`
   * 
   * - Use to de-clutter your UI when a lot of space is available
   * - Separate banner sections from page content
   * - Use to differentiate page content like page sections
   * 
   * @deprecated Use semantic padding and gap values instead
   */
  "x16": "--cnvs-sys-space-x16",
  /**
   * **value**: `{base.unit} * 20` (5rem | 80px)
   * 
   * **CSS Var**: `--cnvs-sys-space-x20`
   * 
   * - Use sparingly
   * - Helps to put focus on the primary element within your page
   * - Use to de-clutter your UI when a lot of space is available
   * 
   * @deprecated Use semantic padding and gap values instead
   */
  "x20": "--cnvs-sys-space-x20",
};

export declare const fontSize: {
  "subtext": {
    /**
     * **value**: `{base.font-size.25}` (0.625rem | 10px)
     * 
     * **CSS Var**: `--cnvs-sys-font-size-subtext-small`
     * 
     * @deprecated 
     */
    "small": "--cnvs-sys-font-size-subtext-small",
    /**
     * **value**: `{base.font-size.50}` (0.75rem | 12px)
     * 
     * **CSS Var**: `--cnvs-sys-font-size-subtext-medium`
     * 
     * @deprecated 
     */
    "medium": "--cnvs-sys-font-size-subtext-medium",
    /**
     * **value**: `{base.font-size.75}` (0.875rem | 14px)
     * 
     * **CSS Var**: `--cnvs-sys-font-size-subtext-large`
     * 
     * @deprecated 
     */
    "large": "--cnvs-sys-font-size-subtext-large",
    /**
     * **value**: `{base.size.125}` (0.625rem | 10px)
     * 
     * **CSS Var**: `--cnvs-sys-font-size-subtext-sm`
     */
    "sm": "--cnvs-sys-font-size-subtext-sm",
    /**
     * **value**: `{base.size.150}` (0.75rem | 12px)
     * 
     * **CSS Var**: `--cnvs-sys-font-size-subtext-md`
     */
    "md": "--cnvs-sys-font-size-subtext-md",
    /**
     * **value**: `{base.size.175}` (0.875rem | 14px)
     * 
     * **CSS Var**: `--cnvs-sys-font-size-subtext-lg`
     */
    "lg": "--cnvs-sys-font-size-subtext-lg",
  },
  "body": {
    /**
     * **value**: `{base.font-size.100}` (1rem | 16px)
     * 
     * **CSS Var**: `--cnvs-sys-font-size-body-small`
     * 
     * @deprecated 
     */
    "small": "--cnvs-sys-font-size-body-small",
    /**
     * **value**: `{base.font-size.125}` (1.125rem | 18px)
     * 
     * **CSS Var**: `--cnvs-sys-font-size-body-medium`
     * 
     * @deprecated 
     */
    "medium": "--cnvs-sys-font-size-body-medium",
    /**
     * **value**: `{base.font-size.150}` (1.25rem | 20px)
     * 
     * **CSS Var**: `--cnvs-sys-font-size-body-large`
     * 
     * @deprecated 
     */
    "large": "--cnvs-sys-font-size-body-large",
    /**
     * **value**: `{base.size.200}` (1rem | 16px)
     * 
     * **CSS Var**: `--cnvs-sys-font-size-body-sm`
     */
    "sm": "--cnvs-sys-font-size-body-sm",
    /**
     * **value**: `{base.size.225}` (1.125rem | 18px)
     * 
     * **CSS Var**: `--cnvs-sys-font-size-body-md`
     */
    "md": "--cnvs-sys-font-size-body-md",
    /**
     * **value**: `{base.size.250}` (1.25rem | 20px)
     * 
     * **CSS Var**: `--cnvs-sys-font-size-body-lg`
     */
    "lg": "--cnvs-sys-font-size-body-lg",
  },
  "heading": {
    /**
     * **value**: `{base.font-size.200}` (1.5rem | 24px)
     * 
     * **CSS Var**: `--cnvs-sys-font-size-heading-small`
     * 
     * @deprecated 
     */
    "small": "--cnvs-sys-font-size-heading-small",
    /**
     * **value**: `{base.font-size.250}` (1.75rem | 28px)
     * 
     * **CSS Var**: `--cnvs-sys-font-size-heading-medium`
     * 
     * @deprecated 
     */
    "medium": "--cnvs-sys-font-size-heading-medium",
    /**
     * **value**: `{base.font-size.300}` (2rem | 32px)
     * 
     * **CSS Var**: `--cnvs-sys-font-size-heading-large`
     * 
     * @deprecated 
     */
    "large": "--cnvs-sys-font-size-heading-large",
    /**
     * **value**: `{base.size.300}` (1.5rem | 24px)
     * 
     * **CSS Var**: `--cnvs-sys-font-size-heading-sm`
     */
    "sm": "--cnvs-sys-font-size-heading-sm",
    /**
     * **value**: `{base.size.350}` (1.75rem | 28px)
     * 
     * **CSS Var**: `--cnvs-sys-font-size-heading-md`
     */
    "md": "--cnvs-sys-font-size-heading-md",
    /**
     * **value**: `{base.size.400}` (2rem | 32px)
     * 
     * **CSS Var**: `--cnvs-sys-font-size-heading-lg`
     */
    "lg": "--cnvs-sys-font-size-heading-lg",
  },
  "title": {
    /**
     * **value**: `{base.font-size.400}` (2.5rem | 40px)
     * 
     * **CSS Var**: `--cnvs-sys-font-size-title-small`
     * 
     * @deprecated 
     */
    "small": "--cnvs-sys-font-size-title-small",
    /**
     * **value**: `{base.font-size.500}` (3rem | 48px)
     * 
     * **CSS Var**: `--cnvs-sys-font-size-title-medium`
     * 
     * @deprecated 
     */
    "medium": "--cnvs-sys-font-size-title-medium",
    /**
     * **value**: `{base.font-size.600}` (3.5rem | 56px)
     * 
     * **CSS Var**: `--cnvs-sys-font-size-title-large`
     * 
     * @deprecated 
     */
    "large": "--cnvs-sys-font-size-title-large",
    /**
     * **value**: `{base.size.500}` (2.5rem | 40px)
     * 
     * **CSS Var**: `--cnvs-sys-font-size-title-sm`
     */
    "sm": "--cnvs-sys-font-size-title-sm",
    /**
     * **value**: `{base.size.600}` (3rem | 48px)
     * 
     * **CSS Var**: `--cnvs-sys-font-size-title-md`
     */
    "md": "--cnvs-sys-font-size-title-md",
    /**
     * **value**: `{base.size.700}` (3.5rem | 56px)
     * 
     * **CSS Var**: `--cnvs-sys-font-size-title-lg`
     */
    "lg": "--cnvs-sys-font-size-title-lg",
  },
};

export declare const lineHeight: {
  "subtext": {
    /**
     * **value**: `{base.line-height.50}`
     * 
     * **CSS Var**: `--cnvs-sys-line-height-subtext-small`
     * 
     * @deprecated 
     */
    "small": "--cnvs-sys-line-height-subtext-small",
    /**
     * **value**: `{base.line-height.50}`
     * 
     * **CSS Var**: `--cnvs-sys-line-height-subtext-medium`
     * 
     * @deprecated 
     */
    "medium": "--cnvs-sys-line-height-subtext-medium",
    /**
     * **value**: `{base.line-height.100}`
     * 
     * **CSS Var**: `--cnvs-sys-line-height-subtext-large`
     * 
     * @deprecated 
     */
    "large": "--cnvs-sys-line-height-subtext-large",
    /**
     * **value**: `{base.size.200}` (1rem | 16px)
     * 
     * **CSS Var**: `--cnvs-sys-line-height-subtext-sm`
     */
    "sm": "--cnvs-sys-line-height-subtext-sm",
    /**
     * **value**: `{base.size.200}` (1rem | 16px)
     * 
     * **CSS Var**: `--cnvs-sys-line-height-subtext-md`
     */
    "md": "--cnvs-sys-line-height-subtext-md",
    /**
     * **value**: `{base.size.250}` (1.25rem | 20px)
     * 
     * **CSS Var**: `--cnvs-sys-line-height-subtext-lg`
     */
    "lg": "--cnvs-sys-line-height-subtext-lg",
  },
  "body": {
    /**
     * **value**: `{base.line-height.150}`
     * 
     * **CSS Var**: `--cnvs-sys-line-height-body-small`
     * 
     * @deprecated 
     */
    "small": "--cnvs-sys-line-height-body-small",
    /**
     * **value**: `{base.line-height.200}`
     * 
     * **CSS Var**: `--cnvs-sys-line-height-body-medium`
     * 
     * @deprecated 
     */
    "medium": "--cnvs-sys-line-height-body-medium",
    /**
     * **value**: `{base.line-height.200}`
     * 
     * **CSS Var**: `--cnvs-sys-line-height-body-large`
     * 
     * @deprecated 
     */
    "large": "--cnvs-sys-line-height-body-large",
    /**
     * **value**: `{base.size.300}` (1.5rem | 24px)
     * 
     * **CSS Var**: `--cnvs-sys-line-height-body-sm`
     */
    "sm": "--cnvs-sys-line-height-body-sm",
    /**
     * **value**: `{base.size.350}` (1.75rem | 28px)
     * 
     * **CSS Var**: `--cnvs-sys-line-height-body-md`
     */
    "md": "--cnvs-sys-line-height-body-md",
    /**
     * **value**: `{base.size.350}` (1.75rem | 28px)
     * 
     * **CSS Var**: `--cnvs-sys-line-height-body-lg`
     */
    "lg": "--cnvs-sys-line-height-body-lg",
  },
  "heading": {
    /**
     * **value**: `{base.line-height.250}`
     * 
     * **CSS Var**: `--cnvs-sys-line-height-heading-small`
     * 
     * @deprecated 
     */
    "small": "--cnvs-sys-line-height-heading-small",
    /**
     * **value**: `{base.line-height.300}`
     * 
     * **CSS Var**: `--cnvs-sys-line-height-heading-medium`
     * 
     * @deprecated 
     */
    "medium": "--cnvs-sys-line-height-heading-medium",
    /**
     * **value**: `{base.line-height.350}`
     * 
     * **CSS Var**: `--cnvs-sys-line-height-heading-large`
     * 
     * @deprecated 
     */
    "large": "--cnvs-sys-line-height-heading-large",
    /**
     * **value**: `{base.size.400}` (2rem | 32px)
     * 
     * **CSS Var**: `--cnvs-sys-line-height-heading-sm`
     */
    "sm": "--cnvs-sys-line-height-heading-sm",
    /**
     * **value**: `{base.size.450}` (2.25rem | 36px)
     * 
     * **CSS Var**: `--cnvs-sys-line-height-heading-md`
     */
    "md": "--cnvs-sys-line-height-heading-md",
    /**
     * **value**: `{base.size.500}` (2.5rem | 40px)
     * 
     * **CSS Var**: `--cnvs-sys-line-height-heading-lg`
     */
    "lg": "--cnvs-sys-line-height-heading-lg",
  },
  "title": {
    /**
     * **value**: `{base.line-height.400}`
     * 
     * **CSS Var**: `--cnvs-sys-line-height-title-small`
     * 
     * @deprecated 
     */
    "small": "--cnvs-sys-line-height-title-small",
    /**
     * **value**: `{base.line-height.500}`
     * 
     * **CSS Var**: `--cnvs-sys-line-height-title-medium`
     * 
     * @deprecated 
     */
    "medium": "--cnvs-sys-line-height-title-medium",
    /**
     * **value**: `{base.line-height.600}`
     * 
     * **CSS Var**: `--cnvs-sys-line-height-title-large`
     * 
     * @deprecated 
     */
    "large": "--cnvs-sys-line-height-title-large",
    /**
     * **value**: `{base.size.600}` (3rem | 48px)
     * 
     * **CSS Var**: `--cnvs-sys-line-height-title-sm`
     */
    "sm": "--cnvs-sys-line-height-title-sm",
    /**
     * **value**: `{base.size.700}` (3.5rem | 56px)
     * 
     * **CSS Var**: `--cnvs-sys-line-height-title-md`
     */
    "md": "--cnvs-sys-line-height-title-md",
    /**
     * **value**: `{base.size.800}` (4rem | 64px)
     * 
     * **CSS Var**: `--cnvs-sys-line-height-title-lg`
     */
    "lg": "--cnvs-sys-line-height-title-lg",
  },
};

export declare const type: {
  "subtext": {
    "small": {
      /**
       * **value**: `{base.font-family.50}`
       * 
       * **CSS Var**: `--cnvs-sys-font-family-default`
       */
      "fontFamily": "--cnvs-sys-font-family-default",
      /**
       * **value**: `{base.font-weight.400}`
       * 
       * **CSS Var**: `--cnvs-sys-font-weight-normal`
       */
      "fontWeight": "--cnvs-sys-font-weight-normal",
      /**
       * **value**: `{base.line-height.50}`
       * 
       * **CSS Var**: `--cnvs-sys-line-height-subtext-small`
       * 
       * @deprecated 
       */
      "lineHeight": "--cnvs-sys-line-height-subtext-small",
      /**
       * **value**: `{base.font-size.25}` (0.625rem | 10px)
       * 
       * **CSS Var**: `--cnvs-sys-font-size-subtext-small`
       * 
       * @deprecated 
       */
      "fontSize": "--cnvs-sys-font-size-subtext-small",
      /**
       * **value**: `0.4`
       * 
       * **CSS Var**: `--cnvs-base-letter-spacing-50`
       */
      "letterSpacing": "--cnvs-base-letter-spacing-50",
    },
    "medium": {
      /**
       * **value**: `{base.font-family.50}`
       * 
       * **CSS Var**: `--cnvs-sys-font-family-default`
       */
      "fontFamily": "--cnvs-sys-font-family-default",
      /**
       * **value**: `{base.font-weight.400}`
       * 
       * **CSS Var**: `--cnvs-sys-font-weight-normal`
       */
      "fontWeight": "--cnvs-sys-font-weight-normal",
      /**
       * **value**: `{base.line-height.50}`
       * 
       * **CSS Var**: `--cnvs-sys-line-height-subtext-medium`
       * 
       * @deprecated 
       */
      "lineHeight": "--cnvs-sys-line-height-subtext-medium",
      /**
       * **value**: `{base.font-size.50}` (0.75rem | 12px)
       * 
       * **CSS Var**: `--cnvs-sys-font-size-subtext-medium`
       * 
       * @deprecated 
       */
      "fontSize": "--cnvs-sys-font-size-subtext-medium",
      /**
       * **value**: `0.32`
       * 
       * **CSS Var**: `--cnvs-base-letter-spacing-100`
       */
      "letterSpacing": "--cnvs-base-letter-spacing-100",
    },
    "large": {
      /**
       * **value**: `{base.font-family.50}`
       * 
       * **CSS Var**: `--cnvs-sys-font-family-default`
       */
      "fontFamily": "--cnvs-sys-font-family-default",
      /**
       * **value**: `{base.font-weight.400}`
       * 
       * **CSS Var**: `--cnvs-sys-font-weight-normal`
       */
      "fontWeight": "--cnvs-sys-font-weight-normal",
      /**
       * **value**: `{base.line-height.100}`
       * 
       * **CSS Var**: `--cnvs-sys-line-height-subtext-large`
       * 
       * @deprecated 
       */
      "lineHeight": "--cnvs-sys-line-height-subtext-large",
      /**
       * **value**: `{base.font-size.75}` (0.875rem | 14px)
       * 
       * **CSS Var**: `--cnvs-sys-font-size-subtext-large`
       * 
       * @deprecated 
       */
      "fontSize": "--cnvs-sys-font-size-subtext-large",
      /**
       * **value**: `0.24`
       * 
       * **CSS Var**: `--cnvs-base-letter-spacing-150`
       */
      "letterSpacing": "--cnvs-base-letter-spacing-150",
    },
    "sm": {
      /**
       * **value**: `{base.font-family.50}`
       * 
       * **CSS Var**: `--cnvs-sys-font-family-default`
       */
      "fontFamily": "--cnvs-sys-font-family-default",
      /**
       * **value**: `{base.font-weight.400}`
       * 
       * **CSS Var**: `--cnvs-sys-font-weight-normal`
       */
      "fontWeight": "--cnvs-sys-font-weight-normal",
      /**
       * **value**: `{base.size.200}` (1rem | 16px)
       * 
       * **CSS Var**: `--cnvs-sys-line-height-subtext-sm`
       */
      "lineHeight": "--cnvs-sys-line-height-subtext-sm",
      /**
       * **value**: `{base.size.125}` (0.625rem | 10px)
       * 
       * **CSS Var**: `--cnvs-sys-font-size-subtext-sm`
       */
      "fontSize": "--cnvs-sys-font-size-subtext-sm",
      /**
       * **value**: `{base.letter-spacing.50}`
       * 
       * **CSS Var**: `--cnvs-sys-letter-spacing-subtext-sm`
       */
      "letterSpacing": "--cnvs-sys-letter-spacing-subtext-sm",
    },
    "md": {
      /**
       * **value**: `{base.font-family.50}`
       * 
       * **CSS Var**: `--cnvs-sys-font-family-default`
       */
      "fontFamily": "--cnvs-sys-font-family-default",
      /**
       * **value**: `{base.font-weight.400}`
       * 
       * **CSS Var**: `--cnvs-sys-font-weight-normal`
       */
      "fontWeight": "--cnvs-sys-font-weight-normal",
      /**
       * **value**: `{base.size.200}` (1rem | 16px)
       * 
       * **CSS Var**: `--cnvs-sys-line-height-subtext-md`
       */
      "lineHeight": "--cnvs-sys-line-height-subtext-md",
      /**
       * **value**: `{base.size.150}` (0.75rem | 12px)
       * 
       * **CSS Var**: `--cnvs-sys-font-size-subtext-md`
       */
      "fontSize": "--cnvs-sys-font-size-subtext-md",
      /**
       * **value**: `{base.letter-spacing.100}`
       * 
       * **CSS Var**: `--cnvs-sys-letter-spacing-subtext-md`
       */
      "letterSpacing": "--cnvs-sys-letter-spacing-subtext-md",
    },
    "lg": {
      /**
       * **value**: `{base.font-family.50}`
       * 
       * **CSS Var**: `--cnvs-sys-font-family-default`
       */
      "fontFamily": "--cnvs-sys-font-family-default",
      /**
       * **value**: `{base.font-weight.400}`
       * 
       * **CSS Var**: `--cnvs-sys-font-weight-normal`
       */
      "fontWeight": "--cnvs-sys-font-weight-normal",
      /**
       * **value**: `{base.size.250}` (1.25rem | 20px)
       * 
       * **CSS Var**: `--cnvs-sys-line-height-subtext-lg`
       */
      "lineHeight": "--cnvs-sys-line-height-subtext-lg",
      /**
       * **value**: `{base.size.175}` (0.875rem | 14px)
       * 
       * **CSS Var**: `--cnvs-sys-font-size-subtext-lg`
       */
      "fontSize": "--cnvs-sys-font-size-subtext-lg",
      /**
       * **value**: `{base.letter-spacing.150}`
       * 
       * **CSS Var**: `--cnvs-sys-letter-spacing-subtext-lg`
       */
      "letterSpacing": "--cnvs-sys-letter-spacing-subtext-lg",
    },
  },
  "body": {
    "small": {
      /**
       * **value**: `{base.font-family.50}`
       * 
       * **CSS Var**: `--cnvs-sys-font-family-default`
       */
      "fontFamily": "--cnvs-sys-font-family-default",
      /**
       * **value**: `{base.font-weight.400}`
       * 
       * **CSS Var**: `--cnvs-sys-font-weight-normal`
       */
      "fontWeight": "--cnvs-sys-font-weight-normal",
      /**
       * **value**: `{base.line-height.150}`
       * 
       * **CSS Var**: `--cnvs-sys-line-height-body-small`
       * 
       * @deprecated 
       */
      "lineHeight": "--cnvs-sys-line-height-body-small",
      /**
       * **value**: `{base.font-size.100}` (1rem | 16px)
       * 
       * **CSS Var**: `--cnvs-sys-font-size-body-small`
       * 
       * @deprecated 
       */
      "fontSize": "--cnvs-sys-font-size-body-small",
      /**
       * **value**: `0.16`
       * 
       * **CSS Var**: `--cnvs-base-letter-spacing-200`
       */
      "letterSpacing": "--cnvs-base-letter-spacing-200",
    },
    "medium": {
      /**
       * **value**: `{base.font-family.50}`
       * 
       * **CSS Var**: `--cnvs-sys-font-family-default`
       */
      "fontFamily": "--cnvs-sys-font-family-default",
      /**
       * **value**: `{base.font-weight.400}`
       * 
       * **CSS Var**: `--cnvs-sys-font-weight-normal`
       */
      "fontWeight": "--cnvs-sys-font-weight-normal",
      /**
       * **value**: `{base.line-height.200}`
       * 
       * **CSS Var**: `--cnvs-sys-line-height-body-medium`
       * 
       * @deprecated 
       */
      "lineHeight": "--cnvs-sys-line-height-body-medium",
      /**
       * **value**: `{base.font-size.125}` (1.125rem | 18px)
       * 
       * **CSS Var**: `--cnvs-sys-font-size-body-medium`
       * 
       * @deprecated 
       */
      "fontSize": "--cnvs-sys-font-size-body-medium",
    },
    "large": {
      /**
       * **value**: `{base.font-family.50}`
       * 
       * **CSS Var**: `--cnvs-sys-font-family-default`
       */
      "fontFamily": "--cnvs-sys-font-family-default",
      /**
       * **value**: `{base.font-weight.400}`
       * 
       * **CSS Var**: `--cnvs-sys-font-weight-normal`
       */
      "fontWeight": "--cnvs-sys-font-weight-normal",
      /**
       * **value**: `{base.line-height.200}`
       * 
       * **CSS Var**: `--cnvs-sys-line-height-body-large`
       * 
       * @deprecated 
       */
      "lineHeight": "--cnvs-sys-line-height-body-large",
      /**
       * **value**: `{base.font-size.150}` (1.25rem | 20px)
       * 
       * **CSS Var**: `--cnvs-sys-font-size-body-large`
       * 
       * @deprecated 
       */
      "fontSize": "--cnvs-sys-font-size-body-large",
    },
    "sm": {
      /**
       * **value**: `{base.font-family.50}`
       * 
       * **CSS Var**: `--cnvs-sys-font-family-default`
       */
      "fontFamily": "--cnvs-sys-font-family-default",
      /**
       * **value**: `{base.font-weight.400}`
       * 
       * **CSS Var**: `--cnvs-sys-font-weight-normal`
       */
      "fontWeight": "--cnvs-sys-font-weight-normal",
      /**
       * **value**: `{base.size.300}` (1.5rem | 24px)
       * 
       * **CSS Var**: `--cnvs-sys-line-height-body-sm`
       */
      "lineHeight": "--cnvs-sys-line-height-body-sm",
      /**
       * **value**: `{base.size.200}` (1rem | 16px)
       * 
       * **CSS Var**: `--cnvs-sys-font-size-body-sm`
       */
      "fontSize": "--cnvs-sys-font-size-body-sm",
      /**
       * **value**: `{base.letter-spacing.200}`
       * 
       * **CSS Var**: `--cnvs-sys-letter-spacing-body-sm`
       */
      "letterSpacing": "--cnvs-sys-letter-spacing-body-sm",
    },
    "md": {
      /**
       * **value**: `{base.font-family.50}`
       * 
       * **CSS Var**: `--cnvs-sys-font-family-default`
       */
      "fontFamily": "--cnvs-sys-font-family-default",
      /**
       * **value**: `{base.font-weight.400}`
       * 
       * **CSS Var**: `--cnvs-sys-font-weight-normal`
       */
      "fontWeight": "--cnvs-sys-font-weight-normal",
      /**
       * **value**: `{base.size.350}` (1.75rem | 28px)
       * 
       * **CSS Var**: `--cnvs-sys-line-height-body-md`
       */
      "lineHeight": "--cnvs-sys-line-height-body-md",
      /**
       * **value**: `{base.size.225}` (1.125rem | 18px)
       * 
       * **CSS Var**: `--cnvs-sys-font-size-body-md`
       */
      "fontSize": "--cnvs-sys-font-size-body-md",
    },
    "lg": {
      /**
       * **value**: `{base.font-family.50}`
       * 
       * **CSS Var**: `--cnvs-sys-font-family-default`
       */
      "fontFamily": "--cnvs-sys-font-family-default",
      /**
       * **value**: `{base.font-weight.400}`
       * 
       * **CSS Var**: `--cnvs-sys-font-weight-normal`
       */
      "fontWeight": "--cnvs-sys-font-weight-normal",
      /**
       * **value**: `{base.size.350}` (1.75rem | 28px)
       * 
       * **CSS Var**: `--cnvs-sys-line-height-body-lg`
       */
      "lineHeight": "--cnvs-sys-line-height-body-lg",
      /**
       * **value**: `{base.size.250}` (1.25rem | 20px)
       * 
       * **CSS Var**: `--cnvs-sys-font-size-body-lg`
       */
      "fontSize": "--cnvs-sys-font-size-body-lg",
    },
  },
  "heading": {
    "small": {
      /**
       * **value**: `{base.font-family.50}`
       * 
       * **CSS Var**: `--cnvs-sys-font-family-default`
       */
      "fontFamily": "--cnvs-sys-font-family-default",
      /**
       * **value**: `{base.font-weight.700}`
       * 
       * **CSS Var**: `--cnvs-sys-font-weight-bold`
       */
      "fontWeight": "--cnvs-sys-font-weight-bold",
      /**
       * **value**: `{base.line-height.250}`
       * 
       * **CSS Var**: `--cnvs-sys-line-height-heading-small`
       * 
       * @deprecated 
       */
      "lineHeight": "--cnvs-sys-line-height-heading-small",
      /**
       * **value**: `{base.font-size.200}` (1.5rem | 24px)
       * 
       * **CSS Var**: `--cnvs-sys-font-size-heading-small`
       * 
       * @deprecated 
       */
      "fontSize": "--cnvs-sys-font-size-heading-small",
    },
    "medium": {
      /**
       * **value**: `{base.font-family.50}`
       * 
       * **CSS Var**: `--cnvs-sys-font-family-default`
       */
      "fontFamily": "--cnvs-sys-font-family-default",
      /**
       * **value**: `{base.font-weight.700}`
       * 
       * **CSS Var**: `--cnvs-sys-font-weight-bold`
       */
      "fontWeight": "--cnvs-sys-font-weight-bold",
      /**
       * **value**: `{base.line-height.300}`
       * 
       * **CSS Var**: `--cnvs-sys-line-height-heading-medium`
       * 
       * @deprecated 
       */
      "lineHeight": "--cnvs-sys-line-height-heading-medium",
      /**
       * **value**: `{base.font-size.250}` (1.75rem | 28px)
       * 
       * **CSS Var**: `--cnvs-sys-font-size-heading-medium`
       * 
       * @deprecated 
       */
      "fontSize": "--cnvs-sys-font-size-heading-medium",
    },
    "large": {
      /**
       * **value**: `{base.font-family.50}`
       * 
       * **CSS Var**: `--cnvs-sys-font-family-default`
       */
      "fontFamily": "--cnvs-sys-font-family-default",
      /**
       * **value**: `{base.font-weight.700}`
       * 
       * **CSS Var**: `--cnvs-sys-font-weight-bold`
       */
      "fontWeight": "--cnvs-sys-font-weight-bold",
      /**
       * **value**: `{base.line-height.350}`
       * 
       * **CSS Var**: `--cnvs-sys-line-height-heading-large`
       * 
       * @deprecated 
       */
      "lineHeight": "--cnvs-sys-line-height-heading-large",
      /**
       * **value**: `{base.font-size.300}` (2rem | 32px)
       * 
       * **CSS Var**: `--cnvs-sys-font-size-heading-large`
       * 
       * @deprecated 
       */
      "fontSize": "--cnvs-sys-font-size-heading-large",
    },
    "sm": {
      /**
       * **value**: `{base.font-family.50}`
       * 
       * **CSS Var**: `--cnvs-sys-font-family-default`
       */
      "fontFamily": "--cnvs-sys-font-family-default",
      /**
       * **value**: `{base.font-weight.700}`
       * 
       * **CSS Var**: `--cnvs-sys-font-weight-bold`
       */
      "fontWeight": "--cnvs-sys-font-weight-bold",
      /**
       * **value**: `{base.size.400}` (2rem | 32px)
       * 
       * **CSS Var**: `--cnvs-sys-line-height-heading-sm`
       */
      "lineHeight": "--cnvs-sys-line-height-heading-sm",
      /**
       * **value**: `{base.size.300}` (1.5rem | 24px)
       * 
       * **CSS Var**: `--cnvs-sys-font-size-heading-sm`
       */
      "fontSize": "--cnvs-sys-font-size-heading-sm",
    },
    "md": {
      /**
       * **value**: `{base.font-family.50}`
       * 
       * **CSS Var**: `--cnvs-sys-font-family-default`
       */
      "fontFamily": "--cnvs-sys-font-family-default",
      /**
       * **value**: `{base.font-weight.700}`
       * 
       * **CSS Var**: `--cnvs-sys-font-weight-bold`
       */
      "fontWeight": "--cnvs-sys-font-weight-bold",
      /**
       * **value**: `{base.size.450}` (2.25rem | 36px)
       * 
       * **CSS Var**: `--cnvs-sys-line-height-heading-md`
       */
      "lineHeight": "--cnvs-sys-line-height-heading-md",
      /**
       * **value**: `{base.size.350}` (1.75rem | 28px)
       * 
       * **CSS Var**: `--cnvs-sys-font-size-heading-md`
       */
      "fontSize": "--cnvs-sys-font-size-heading-md",
    },
    "lg": {
      /**
       * **value**: `{base.font-family.50}`
       * 
       * **CSS Var**: `--cnvs-sys-font-family-default`
       */
      "fontFamily": "--cnvs-sys-font-family-default",
      /**
       * **value**: `{base.font-weight.700}`
       * 
       * **CSS Var**: `--cnvs-sys-font-weight-bold`
       */
      "fontWeight": "--cnvs-sys-font-weight-bold",
      /**
       * **value**: `{base.size.500}` (2.5rem | 40px)
       * 
       * **CSS Var**: `--cnvs-sys-line-height-heading-lg`
       */
      "lineHeight": "--cnvs-sys-line-height-heading-lg",
      /**
       * **value**: `{base.size.400}` (2rem | 32px)
       * 
       * **CSS Var**: `--cnvs-sys-font-size-heading-lg`
       */
      "fontSize": "--cnvs-sys-font-size-heading-lg",
    },
  },
  "title": {
    "small": {
      /**
       * **value**: `{base.font-family.50}`
       * 
       * **CSS Var**: `--cnvs-sys-font-family-default`
       */
      "fontFamily": "--cnvs-sys-font-family-default",
      /**
       * **value**: `{base.font-weight.700}`
       * 
       * **CSS Var**: `--cnvs-sys-font-weight-bold`
       */
      "fontWeight": "--cnvs-sys-font-weight-bold",
      /**
       * **value**: `{base.line-height.400}`
       * 
       * **CSS Var**: `--cnvs-sys-line-height-title-small`
       * 
       * @deprecated 
       */
      "lineHeight": "--cnvs-sys-line-height-title-small",
      /**
       * **value**: `{base.font-size.400}` (2.5rem | 40px)
       * 
       * **CSS Var**: `--cnvs-sys-font-size-title-small`
       * 
       * @deprecated 
       */
      "fontSize": "--cnvs-sys-font-size-title-small",
    },
    "medium": {
      /**
       * **value**: `{base.font-family.50}`
       * 
       * **CSS Var**: `--cnvs-sys-font-family-default`
       */
      "fontFamily": "--cnvs-sys-font-family-default",
      /**
       * **value**: `{base.font-weight.700}`
       * 
       * **CSS Var**: `--cnvs-sys-font-weight-bold`
       */
      "fontWeight": "--cnvs-sys-font-weight-bold",
      /**
       * **value**: `{base.line-height.500}`
       * 
       * **CSS Var**: `--cnvs-sys-line-height-title-medium`
       * 
       * @deprecated 
       */
      "lineHeight": "--cnvs-sys-line-height-title-medium",
      /**
       * **value**: `{base.font-size.500}` (3rem | 48px)
       * 
       * **CSS Var**: `--cnvs-sys-font-size-title-medium`
       * 
       * @deprecated 
       */
      "fontSize": "--cnvs-sys-font-size-title-medium",
    },
    "large": {
      /**
       * **value**: `{base.font-family.50}`
       * 
       * **CSS Var**: `--cnvs-sys-font-family-default`
       */
      "fontFamily": "--cnvs-sys-font-family-default",
      /**
       * **value**: `{base.font-weight.700}`
       * 
       * **CSS Var**: `--cnvs-sys-font-weight-bold`
       */
      "fontWeight": "--cnvs-sys-font-weight-bold",
      /**
       * **value**: `{base.line-height.600}`
       * 
       * **CSS Var**: `--cnvs-sys-line-height-title-large`
       * 
       * @deprecated 
       */
      "lineHeight": "--cnvs-sys-line-height-title-large",
      /**
       * **value**: `{base.font-size.600}` (3.5rem | 56px)
       * 
       * **CSS Var**: `--cnvs-sys-font-size-title-large`
       * 
       * @deprecated 
       */
      "fontSize": "--cnvs-sys-font-size-title-large",
    },
    "sm": {
      /**
       * **value**: `{base.font-family.50}`
       * 
       * **CSS Var**: `--cnvs-sys-font-family-default`
       */
      "fontFamily": "--cnvs-sys-font-family-default",
      /**
       * **value**: `{base.font-weight.700}`
       * 
       * **CSS Var**: `--cnvs-sys-font-weight-bold`
       */
      "fontWeight": "--cnvs-sys-font-weight-bold",
      /**
       * **value**: `{base.size.600}` (3rem | 48px)
       * 
       * **CSS Var**: `--cnvs-sys-line-height-title-sm`
       */
      "lineHeight": "--cnvs-sys-line-height-title-sm",
      /**
       * **value**: `{base.size.500}` (2.5rem | 40px)
       * 
       * **CSS Var**: `--cnvs-sys-font-size-title-sm`
       */
      "fontSize": "--cnvs-sys-font-size-title-sm",
    },
    "md": {
      /**
       * **value**: `{base.font-family.50}`
       * 
       * **CSS Var**: `--cnvs-sys-font-family-default`
       */
      "fontFamily": "--cnvs-sys-font-family-default",
      /**
       * **value**: `{base.font-weight.700}`
       * 
       * **CSS Var**: `--cnvs-sys-font-weight-bold`
       */
      "fontWeight": "--cnvs-sys-font-weight-bold",
      /**
       * **value**: `{base.size.700}` (3.5rem | 56px)
       * 
       * **CSS Var**: `--cnvs-sys-line-height-title-md`
       */
      "lineHeight": "--cnvs-sys-line-height-title-md",
      /**
       * **value**: `{base.size.600}` (3rem | 48px)
       * 
       * **CSS Var**: `--cnvs-sys-font-size-title-md`
       */
      "fontSize": "--cnvs-sys-font-size-title-md",
    },
    "lg": {
      /**
       * **value**: `{base.font-family.50}`
       * 
       * **CSS Var**: `--cnvs-sys-font-family-default`
       */
      "fontFamily": "--cnvs-sys-font-family-default",
      /**
       * **value**: `{base.font-weight.700}`
       * 
       * **CSS Var**: `--cnvs-sys-font-weight-bold`
       */
      "fontWeight": "--cnvs-sys-font-weight-bold",
      /**
       * **value**: `{base.size.800}` (4rem | 64px)
       * 
       * **CSS Var**: `--cnvs-sys-line-height-title-lg`
       */
      "lineHeight": "--cnvs-sys-line-height-title-lg",
      /**
       * **value**: `{base.size.700}` (3.5rem | 56px)
       * 
       * **CSS Var**: `--cnvs-sys-font-size-title-lg`
       */
      "fontSize": "--cnvs-sys-font-size-title-lg",
    },
  },
};

export declare const color: {
  "bg": {
    "primary": {
      /**
       * **value**: `{base.palette.blue.25}`
       * 
       * **CSS Var**: `--cnvs-sys-color-bg-primary-softest`
       * 
       * Surface
       * 
       * @deprecated Use sys.color.brand.surface.primary.default instead
       */
      "softest": "--cnvs-sys-color-bg-primary-softest",
      /**
       * **value**: `{base.palette.blue.50}`
       * 
       * **CSS Var**: `--cnvs-sys-color-bg-primary-softer`
       * 
       * Select
       * 
       * @deprecated Use sys.color.brand.surface.primary.strong tokens instead
       */
      "softer": "--cnvs-sys-color-bg-primary-softer",
      /**
       * **value**: `{base.palette.blue.100}`
       * 
       * **CSS Var**: `--cnvs-sys-color-bg-primary-soft`
       * 
       * Primary disabled
       * 
       * @deprecated Use sys.color.brand.surface.primary.default tokens instead
       */
      "soft": "--cnvs-sys-color-bg-primary-soft",
      /**
       * **value**: `{base.palette.blue.600}`
       * 
       * **CSS Var**: `--cnvs-sys-color-bg-primary-default`
       * 
       * Primary brand color
       * 
       * @deprecated Use sys.color.brand.accent.primary instead
       */
      "default": "--cnvs-sys-color-bg-primary-default",
      /**
       * **value**: `{base.palette.blue.700}`
       * 
       * **CSS Var**: `--cnvs-sys-color-bg-primary-strong`
       * 
       * Brand hover background
       * 
       * @deprecated Use sys.color.brand.accent.primary instead with sys.color.accent.overlay.hover
       */
      "strong": "--cnvs-sys-color-bg-primary-strong",
      /**
       * **value**: `{base.palette.blue.800}`
       * 
       * **CSS Var**: `--cnvs-sys-color-bg-primary-stronger`
       * 
       * Brand active background
       * 
       * @deprecated Use sys.color.brand.accent.primary instead with sys.color.accent.overlay.pressed
       */
      "stronger": "--cnvs-sys-color-bg-primary-stronger",
    },
    "transparent": {
      /**
       * **value**: `oklch({base.palette.neutral.1000} / {base.opacity.0})`
       * 
       * **CSS Var**: `--cnvs-sys-color-bg-transparent-default`
       * 
       * Transparent background
       * 
       * @deprecated Use sys.color.surface.transparent instead
       */
      "default": "--cnvs-sys-color-bg-transparent-default",
      /**
       * **value**: `oklch({base.palette.neutral.1000} / {base.opacity.100})`
       * 
       * **CSS Var**: `--cnvs-sys-color-bg-transparent-strong`
       * 
       * Inverse Secondary Button Hover state
       * 
       * @deprecated Use sys.color.surface.overlay.hover.default tokens instead
       */
      "strong": "--cnvs-sys-color-bg-transparent-strong",
      /**
       * **value**: `oklch({base.palette.neutral.1000} / {base.opacity.250})`
       * 
       * **CSS Var**: `--cnvs-sys-color-bg-transparent-stronger`
       * 
       * Inverse Secondary Button Active state
       * 
       * @deprecated Use sys.color.surface.overlay.pressed.default tokens instead
       */
      "stronger": "--cnvs-sys-color-bg-transparent-stronger",
    },
    /**
     * **value**: `oklch({base.palette.neutral.1000} / {base.opacity.400})`
     * 
     * **CSS Var**: `--cnvs-sys-color-bg-overlay`
     * 
     * Overlay background
     * 
     * @deprecated Use sys.color.surface.overlay.scrim instead
     */
    "overlay": "--cnvs-sys-color-bg-overlay",
    /**
     * **value**: `oklch({base.palette.neutral.1000} / {base.opacity.500})`
     * 
     * **CSS Var**: `--cnvs-sys-color-bg-translucent`
     * 
     * Tooltip, Status Indicator
     * 
     * @deprecated Use sys.color.surface.contrast.default tokens instead
     */
    "translucent": "--cnvs-sys-color-bg-translucent",
    "alt": {
      /**
       * **value**: `{base.palette.slate.25}`
       * 
       * **CSS Var**: `--cnvs-sys-color-bg-alt-softer`
       * 
       * Disabled inputs
       * 
       * @deprecated Use sys.color.surface.raised tokens instead
       */
      "softer": "--cnvs-sys-color-bg-alt-softer",
      /**
       * **value**: `{base.palette.slate.50}`
       * 
       * **CSS Var**: `--cnvs-sys-color-bg-alt-soft`
       * 
       * Alternative page background
       * 
       * @deprecated Use sys.color.surface.alt.default instead
       */
      "soft": "--cnvs-sys-color-bg-alt-soft",
      /**
       * **value**: `{base.palette.slate.200}`
       * 
       * **CSS Var**: `--cnvs-sys-color-bg-alt-strong`
       * 
       * Active states
       * 
       * @deprecated Use sys.color.surface.default tokens instead with sys.color.surface.overlay.hover.default
       */
      "strong": "--cnvs-sys-color-bg-alt-strong",
      /**
       * **value**: `{base.palette.slate.300}`
       * 
       * **CSS Var**: `--cnvs-sys-color-bg-alt-stronger`
       * 
       * Active state for segmented control, Pill
       * 
       * @deprecated Use sys.color.surface.alt.default with sys.color.surface.overlay.pressed.default
       */
      "stronger": "--cnvs-sys-color-bg-alt-stronger",
      /**
       * **value**: `{base.palette.slate.50}`
       * 
       * **CSS Var**: `--cnvs-sys-color-bg-alt-default`
       * 
       * Alternative page background for visual separation between page sections
       */
      "default": "--cnvs-sys-color-bg-alt-default",
    },
    "muted": {
      /**
       * **value**: `{base.palette.slate.400}`
       * 
       * **CSS Var**: `--cnvs-sys-color-bg-muted-softer`
       * 
       * @deprecated Use sys.color.accent.muted.soft token instead
       */
      "softer": "--cnvs-sys-color-bg-muted-softer",
      /**
       * **value**: `{base.palette.slate.500}`
       * 
       * **CSS Var**: `--cnvs-sys-color-bg-muted-soft`
       * 
       * @deprecated Use sys.color.accent.muted.soft token instead
       */
      "soft": "--cnvs-sys-color-bg-muted-soft",
      /**
       * **value**: `{base.palette.slate.600}`
       * 
       * **CSS Var**: `--cnvs-sys-color-bg-muted-default`
       * 
       * @deprecated Use sys.color.accent.muted.default instead
       */
      "default": "--cnvs-sys-color-bg-muted-default",
      /**
       * **value**: `{base.palette.slate.700}`
       * 
       * **CSS Var**: `--cnvs-sys-color-bg-muted-strong`
       * 
       * @deprecated Use sys.color.accent.muted.default token instead with sys.color.accent.overlay.hover
       */
      "strong": "--cnvs-sys-color-bg-muted-strong",
    },
    "contrast": {
      /**
       * **value**: `{base.palette.neutral.900}`
       * 
       * **CSS Var**: `--cnvs-sys-color-bg-contrast-default`
       * 
       * Contrast backgrounds, like Secondary Buttons
       * 
       * @deprecated Use sys.color.surface.contrast.default instead
       */
      "default": "--cnvs-sys-color-bg-contrast-default",
      /**
       * **value**: `{base.palette.neutral.950}`
       * 
       * **CSS Var**: `--cnvs-sys-color-bg-contrast-strong`
       * 
       * Contrast backgrounds, like Secondary Buttons
       * 
       * @deprecated Use sys.color.surface.contrast.strong with sys.color.accent.overlay.hover
       */
      "strong": "--cnvs-sys-color-bg-contrast-strong",
    },
    "positive": {
      /**
       * **value**: `{base.palette.green.25}`
       * 
       * **CSS Var**: `--cnvs-sys-color-bg-positive-softest`
       * 
       * Lightest surface success background
       * 
       * @deprecated Use sys.color.surface.success.default tokens instead
       */
      "softest": "--cnvs-sys-color-bg-positive-softest",
      /**
       * **value**: `{base.palette.green.50}`
       * 
       * **CSS Var**: `--cnvs-sys-color-bg-positive-softer`
       * 
       * Surface success background
       * 
       * @deprecated Use sys.color.brand.surface.positive.strong tokens instead
       */
      "softer": "--cnvs-sys-color-bg-positive-softer",
      /**
       * **value**: `{base.palette.green.100}`
       * 
       * **CSS Var**: `--cnvs-sys-color-bg-positive-soft`
       * 
       * Disabled success background
       * 
       * @deprecated Use sys.color.brand.surface.positive.default tokens instead
       */
      "soft": "--cnvs-sys-color-bg-positive-soft",
      /**
       * **value**: `{base.palette.green.600}`
       * 
       * **CSS Var**: `--cnvs-sys-color-bg-positive-default`
       * 
       * Disabled success background
       * 
       * @deprecated Use sys.color.accent.success instead
       */
      "default": "--cnvs-sys-color-bg-positive-default",
      /**
       * **value**: `{base.palette.green.700}`
       * 
       * **CSS Var**: `--cnvs-sys-color-bg-positive-strong`
       * 
       * Hover success background
       * 
       * @deprecated Use sys.color.brand.accent.positive instead with sys.color.accent.overlay.hover
       */
      "strong": "--cnvs-sys-color-bg-positive-strong",
      /**
       * **value**: `{base.palette.green.800}`
       * 
       * **CSS Var**: `--cnvs-sys-color-bg-positive-stronger`
       * 
       * Active success background
       * 
       * @deprecated Use sys.color.brand.accent.positive instead with sys.color.accent.overlay.pressed
       */
      "stronger": "--cnvs-sys-color-bg-positive-stronger",
    },
    "caution": {
      /**
       * **value**: `{base.palette.amber.25}`
       * 
       * **CSS Var**: `--cnvs-sys-color-bg-caution-softest`
       * 
       * Disabled warning background
       * 
       * @deprecated Use sys.color.brand.surface.caution.default tokens instead
       */
      "softest": "--cnvs-sys-color-bg-caution-softest",
      /**
       * **value**: `{base.palette.amber.50}`
       * 
       * **CSS Var**: `--cnvs-sys-color-bg-caution-softer`
       * 
       * Softer warning background
       * 
       * @deprecated Use sys.color.brand.surface.caution.strong tokens instead
       */
      "softer": "--cnvs-sys-color-bg-caution-softer",
      /**
       * **value**: `{base.palette.amber.100}`
       * 
       * **CSS Var**: `--cnvs-sys-color-bg-caution-soft`
       * 
       * Softer warning background
       * 
       * @deprecated Use sys.color.surface.warning.default tokens instead
       */
      "soft": "--cnvs-sys-color-bg-caution-soft",
      /**
       * **value**: `{base.palette.amber.400}`
       * 
       * **CSS Var**: `--cnvs-sys-color-bg-caution-default`
       * 
       * Default warning background
       * 
       * @deprecated Use sys.color.brand.accent.caution instead
       */
      "default": "--cnvs-sys-color-bg-caution-default",
      /**
       * **value**: `{base.palette.amber.500}`
       * 
       * **CSS Var**: `--cnvs-sys-color-bg-caution-strong`
       * 
       * Strong warning background
       * 
       * @deprecated Use sys.color.brand.accent.caution instead with sys.color.accent.overlay.hover
       */
      "strong": "--cnvs-sys-color-bg-caution-strong",
      /**
       * **value**: `{base.palette.amber.600}`
       * 
       * **CSS Var**: `--cnvs-sys-color-bg-caution-stronger`
       * 
       * Stronger warning background
       * 
       * @deprecated Use sys.color.brand.accent.caution instead with sys.color.accent.overlay.pressed
       */
      "stronger": "--cnvs-sys-color-bg-caution-stronger",
    },
    "critical": {
      /**
       * **value**: `{base.palette.red.25}`
       * 
       * **CSS Var**: `--cnvs-sys-color-bg-critical-softest`
       * 
       * Input error background
       * 
       * @deprecated Use sys.color.brand.surface.critical.default tokens instead
       */
      "softest": "--cnvs-sys-color-bg-critical-softest",
      /**
       * **value**: `{base.palette.red.50}`
       * 
       * **CSS Var**: `--cnvs-sys-color-bg-critical-softer`
       * 
       * Disabled error background
       * 
       * @deprecated Use sys.color.brand.surface.critical.strong tokens instead
       */
      "softer": "--cnvs-sys-color-bg-critical-softer",
      /**
       * **value**: `{base.palette.red.100}`
       * 
       * **CSS Var**: `--cnvs-sys-color-bg-critical-soft`
       * 
       * Disabled error background
       * 
       * @deprecated Use sys.color.surface.danger.default tokens instead
       */
      "soft": "--cnvs-sys-color-bg-critical-soft",
      /**
       * **value**: `{base.palette.red.600}`
       * 
       * **CSS Var**: `--cnvs-sys-color-bg-critical-default`
       * 
       * Default error background
       * 
       * @deprecated Use sys.color.brand.accent.critical instead
       */
      "default": "--cnvs-sys-color-bg-critical-default",
      /**
       * **value**: `{base.palette.red.700}`
       * 
       * **CSS Var**: `--cnvs-sys-color-bg-critical-strong`
       * 
       * Strong error background
       * 
       * @deprecated Use sys.color.brand.accent.critical instead with sys.color.accent.overlay.hover
       */
      "strong": "--cnvs-sys-color-bg-critical-strong",
      /**
       * **value**: `{base.palette.red.800}`
       * 
       * **CSS Var**: `--cnvs-sys-color-bg-critical-stronger`
       * 
       * Stronger error background
       * 
       * @deprecated Use sys.color.brand.accent.critical instead with sys.color.accent.overlay.pressed
       */
      "stronger": "--cnvs-sys-color-bg-critical-stronger",
    },
    "ai": {
      /**
       * **value**: `{base.palette.blue.100}`
       * 
       * **CSS Var**: `--cnvs-sys-color-bg-ai-default`
       * 
       * AI container
       * 
       * @deprecated Use sys.color.surface.ai.default instead
       */
      "default": "--cnvs-sys-color-bg-ai-default",
      /**
       * **value**: `{base.palette.blue.200}`
       * 
       * **CSS Var**: `--cnvs-sys-color-bg-ai-strong`
       * 
       * Hover on AI container
       * 
       * @deprecated Use sys.color.surface.ai.hover instead
       */
      "strong": "--cnvs-sys-color-bg-ai-strong",
      /**
       * **value**: `{base.palette.blue.400}`
       * 
       * **CSS Var**: `--cnvs-sys-color-bg-ai-stronger`
       * 
       * Active state on AI containers
       * 
       * @deprecated Use sys.color.surface.ai.pressed instead
       */
      "stronger": "--cnvs-sys-color-bg-ai-stronger",
      /**
       * **value**: `{base.palette.blue.950}`
       * 
       * **CSS Var**: `--cnvs-sys-color-bg-ai-strongest`
       * 
       * AI surfaces
       * 
       * @deprecated Use sys.color.accent.ai instead
       */
      "strongest": "--cnvs-sys-color-bg-ai-strongest",
    },
    "info": {
      /**
       * **value**: `{base.palette.blue.25}`
       * 
       * **CSS Var**: `--cnvs-sys-color-bg-info-softest`
       * 
       * Surface
       * 
       * @deprecated Use sys.color.surface.info.default instead
       */
      "softest": "--cnvs-sys-color-bg-info-softest",
      /**
       * **value**: `{base.palette.blue.50}`
       * 
       * **CSS Var**: `--cnvs-sys-color-bg-info-softer`
       * 
       * Select
       * 
       * @deprecated Use sys.color.surface.info.strong instead
       */
      "softer": "--cnvs-sys-color-bg-info-softer",
      /**
       * **value**: `{base.palette.blue.100}`
       * 
       * **CSS Var**: `--cnvs-sys-color-bg-info-soft`
       * 
       * Disabled
       * 
       * @deprecated Use sys.color.surface.info.default tokens instead
       */
      "soft": "--cnvs-sys-color-bg-info-soft",
      /**
       * **value**: `{base.palette.blue.600}`
       * 
       * **CSS Var**: `--cnvs-sys-color-bg-info-default`
       * 
       * Info color
       * 
       * @deprecated Use sys.color.accent.info instead
       */
      "default": "--cnvs-sys-color-bg-info-default",
      /**
       * **value**: `{base.palette.blue.700}`
       * 
       * **CSS Var**: `--cnvs-sys-color-bg-info-strong`
       * 
       * Brand hover background
       * 
       * @deprecated Use sys.color.accent.info instead with sys.color.accent.overlay.hover
       */
      "strong": "--cnvs-sys-color-bg-info-strong",
      /**
       * **value**: `{base.palette.blue.800}`
       * 
       * **CSS Var**: `--cnvs-sys-color-bg-info-stronger`
       * 
       * Brand active background
       * 
       * @deprecated Use sys.color.accent.info instead with sys.color.accent.overlay.pressed
       */
      "stronger": "--cnvs-sys-color-bg-info-stronger",
    },
    /**
     * **value**: `{base.palette.neutral.0}`
     * 
     * **CSS Var**: `--cnvs-sys-color-bg-default`
     * 
     * Default page background
     */
    "default": "--cnvs-sys-color-bg-default",
  },
  "text": {
    /**
     * **value**: `{base.palette.neutral.800}`
     * 
     * **CSS Var**: `--cnvs-sys-color-text-default`
     * 
     * Body text
     * 
     * @deprecated Use sys.color.fg.default instead
     */
    "default": "--cnvs-sys-color-text-default",
    /**
     * **value**: `{base.palette.neutral.900}`
     * 
     * **CSS Var**: `--cnvs-sys-color-text-strong`
     * 
     * Heading text
     * 
     * @deprecated Use sys.color.fg.strong instead
     */
    "strong": "--cnvs-sys-color-text-strong",
    /**
     * **value**: `{base.palette.neutral.950}`
     * 
     * **CSS Var**: `--cnvs-sys-color-text-stronger`
     * 
     * Display text
     * 
     * @deprecated Use sys.color.fg.strong instead
     */
    "stronger": "--cnvs-sys-color-text-stronger",
    /**
     * **value**: `{base.palette.slate.400}`
     * 
     * **CSS Var**: `--cnvs-sys-color-text-disabled`
     * 
     * Disabled text color
     * 
     * @deprecated Use sys.opacity.disabled instead
     */
    "disabled": "--cnvs-sys-color-text-disabled",
    /**
     * **value**: `{base.palette.slate.600}`
     * 
     * **CSS Var**: `--cnvs-sys-color-text-hint`
     * 
     * Hint text color
     * 
     * @deprecated Use sys.color.fg.muted.default instead
     */
    "hint": "--cnvs-sys-color-text-hint",
    /**
     * **value**: `{base.palette.neutral.0}`
     * 
     * **CSS Var**: `--cnvs-sys-color-text-inverse`
     * 
     * Inverse text color
     * 
     * @deprecated Use sys.color.fg.inverse instead
     */
    "inverse": "--cnvs-sys-color-text-inverse",
    "critical": {
      /**
       * **value**: `{base.palette.red.600}`
       * 
       * **CSS Var**: `--cnvs-sys-color-text-critical-default`
       * 
       * Error text
       * 
       * @deprecated Use sys.color.brand.fg.critical.default instead
       */
      "default": "--cnvs-sys-color-text-critical-default",
      /**
       * **value**: `{base.palette.red.700}`
       * 
       * **CSS Var**: `--cnvs-sys-color-text-critical-strong`
       * 
       * Error text
       * 
       * @deprecated Use sys.color.brand.fg.critical.strong instead
       */
      "strong": "--cnvs-sys-color-text-critical-strong",
      /**
       * **value**: `{base.palette.red.800}`
       * 
       * **CSS Var**: `--cnvs-sys-color-text-critical-stronger`
       * 
       * Error text
       * 
       * @deprecated Use sys.color.brand.fg.critical.strong instead
       */
      "stronger": "--cnvs-sys-color-text-critical-stronger",
      /**
       * **value**: `{base.palette.red.400}`
       * 
       * **CSS Var**: `--cnvs-sys-color-text-critical-soft`
       * 
       * Error text
       * 
       * @deprecated Use sys.color.fg.danger.default instead
       */
      "soft": "--cnvs-sys-color-text-critical-soft",
      /**
       * **value**: `{base.palette.red.200}`
       * 
       * **CSS Var**: `--cnvs-sys-color-text-critical-softer`
       * 
       * Error text
       * 
       * @deprecated Use sys.color.fg.danger.default instead
       */
      "softer": "--cnvs-sys-color-text-critical-softer",
    },
    "primary": {
      /**
       * **value**: `{base.palette.blue.600}`
       * 
       * **CSS Var**: `--cnvs-sys-color-text-primary-default`
       * 
       * Branded text
       * 
       * @deprecated Use sys.color.brand.fg.primary.default instead
       */
      "default": "--cnvs-sys-color-text-primary-default",
      /**
       * **value**: `{base.palette.blue.700}`
       * 
       * **CSS Var**: `--cnvs-sys-color-text-primary-strong`
       * 
       * Branded hover text
       * 
       * @deprecated Use sys.color.brand.fg.primary.strong instead
       */
      "strong": "--cnvs-sys-color-text-primary-strong",
      /**
       * **value**: `{base.palette.blue.800}`
       * 
       * **CSS Var**: `--cnvs-sys-color-text-primary-stronger`
       * 
       * Active links
       * 
       * @deprecated Use sys.color.brand.fg.primary.strong instead
       */
      "stronger": "--cnvs-sys-color-text-primary-stronger",
      /**
       * **value**: `{base.palette.blue.400}`
       * 
       * **CSS Var**: `--cnvs-sys-color-text-primary-soft`
       * 
       * Active links
       * 
       * @deprecated Use sys.color.fg.info.default instead
       */
      "soft": "--cnvs-sys-color-text-primary-soft",
      /**
       * **value**: `{base.palette.blue.200}`
       * 
       * **CSS Var**: `--cnvs-sys-color-text-primary-softer`
       * 
       * Active links
       * 
       * @deprecated Use sys.color.fg.info.default instead
       */
      "softer": "--cnvs-sys-color-text-primary-softer",
    },
    "caution": {
      /**
       * **value**: `{base.palette.amber.900}`
       * 
       * **CSS Var**: `--cnvs-sys-color-text-caution-default`
       * 
       * Warning text
       * 
       * @deprecated Use sys.color.fg.warning.default instead
       */
      "default": "--cnvs-sys-color-text-caution-default",
      /**
       * **value**: `{base.palette.amber.950}`
       * 
       * **CSS Var**: `--cnvs-sys-color-text-caution-strong`
       * 
       * Strong warning text
       * 
       * @deprecated Use sys.color.fg.contrast.strong instead
       */
      "strong": "--cnvs-sys-color-text-caution-strong",
      /**
       * **value**: `{base.palette.amber.400}`
       * 
       * **CSS Var**: `--cnvs-sys-color-text-caution-soft`
       * 
       * Disabled warning text
       * 
       * @deprecated Use sys.color.fg.warning.default instead
       */
      "soft": "--cnvs-sys-color-text-caution-soft",
      /**
       * **value**: `{base.palette.amber.975}`
       * 
       * **CSS Var**: `--cnvs-sys-color-text-caution-stronger`
       * 
       * Stronger warning text
       * 
       * @deprecated Use sys.color.fg.contrast.strong instead
       */
      "stronger": "--cnvs-sys-color-text-caution-stronger",
      /**
       * **value**: `{base.palette.amber.200}`
       * 
       * **CSS Var**: `--cnvs-sys-color-text-caution-softer`
       * 
       * Softer warning text
       * 
       * @deprecated Use sys.color.fg.warning.default instead
       */
      "softer": "--cnvs-sys-color-text-caution-softer",
    },
    /**
     * **value**: `{base.palette.blue.950}`
     * 
     * **CSS Var**: `--cnvs-sys-color-text-ai`
     * 
     * @deprecated Use sys.color.fg.ai instead
     */
    "ai": "--cnvs-sys-color-text-ai",
    "positive": {
      /**
       * **value**: `{base.palette.green.600}`
       * 
       * **CSS Var**: `--cnvs-sys-color-text-positive-default`
       * 
       * Branded text
       * 
       * @deprecated Use sys.color.brand.fg.positive.default instead
       */
      "default": "--cnvs-sys-color-text-positive-default",
      /**
       * **value**: `{base.palette.green.700}`
       * 
       * **CSS Var**: `--cnvs-sys-color-text-positive-strong`
       * 
       * Branded hover text
       * 
       * @deprecated Use sys.color.brand.fg.positive.strong instead
       */
      "strong": "--cnvs-sys-color-text-positive-strong",
      /**
       * **value**: `{base.palette.green.800}`
       * 
       * **CSS Var**: `--cnvs-sys-color-text-positive-stronger`
       * 
       * Active links
       * 
       * @deprecated Use sys.color.brand.fg.positive.strong instead
       */
      "stronger": "--cnvs-sys-color-text-positive-stronger",
      /**
       * **value**: `{base.palette.green.400}`
       * 
       * **CSS Var**: `--cnvs-sys-color-text-positive-soft`
       * 
       * Active links
       * 
       * @deprecated Use sys.color.fg.success.default instead
       */
      "soft": "--cnvs-sys-color-text-positive-soft",
      /**
       * **value**: `{base.palette.green.200}`
       * 
       * **CSS Var**: `--cnvs-sys-color-text-positive-softer`
       * 
       * Active links
       * 
       * @deprecated Use sys.color.fg.success.default instead
       */
      "softer": "--cnvs-sys-color-text-positive-softer",
    },
    "info": {
      /**
       * **value**: `{base.palette.blue.600}`
       * 
       * **CSS Var**: `--cnvs-sys-color-text-info-default`
       * 
       * Branded text
       * 
       * @deprecated Use sys.color.fg.info.default instead
       */
      "default": "--cnvs-sys-color-text-info-default",
      /**
       * **value**: `{base.palette.blue.700}`
       * 
       * **CSS Var**: `--cnvs-sys-color-text-info-strong`
       * 
       * Branded hover text
       * 
       * @deprecated Use sys.color.fg.info.strong instead
       */
      "strong": "--cnvs-sys-color-text-info-strong",
      /**
       * **value**: `{base.palette.blue.800}`
       * 
       * **CSS Var**: `--cnvs-sys-color-text-info-stronger`
       * 
       * Active links
       * 
       * @deprecated Use sys.color.fg.info.strong instead
       */
      "stronger": "--cnvs-sys-color-text-info-stronger",
      /**
       * **value**: `{base.palette.blue.400}`
       * 
       * **CSS Var**: `--cnvs-sys-color-text-info-soft`
       * 
       * Active links
       * 
       * @deprecated Use sys.color.fg.info.default instead
       */
      "soft": "--cnvs-sys-color-text-info-soft",
      /**
       * **value**: `{base.palette.blue.200}`
       * 
       * **CSS Var**: `--cnvs-sys-color-text-info-softer`
       * 
       * Active links
       * 
       * @deprecated Use sys.color.fg.info.default instead
       */
      "softer": "--cnvs-sys-color-text-info-softer",
    },
  },
  "icon": {
    /**
     * **value**: `{base.palette.neutral.800}`
     * 
     * **CSS Var**: `--cnvs-sys-color-icon-default`
     * 
     * Default icon color
     * 
     * @deprecated Use sys.color.fg.default instead
     */
    "default": "--cnvs-sys-color-icon-default",
    /**
     * **value**: `{base.palette.slate.600}`
     * 
     * **CSS Var**: `--cnvs-sys-color-icon-soft`
     * 
     * Disabled icon color
     * 
     * @deprecated Use sys.color.fg.muted.default instead
     */
    "soft": "--cnvs-sys-color-icon-soft",
    /**
     * **value**: `{base.palette.neutral.900}`
     * 
     * **CSS Var**: `--cnvs-sys-color-icon-strong`
     * 
     * Hover icon color
     * 
     * @deprecated Use sys.color.fg.muted.strong instead
     */
    "strong": "--cnvs-sys-color-icon-strong",
    /**
     * **value**: `{base.palette.neutral.0}`
     * 
     * **CSS Var**: `--cnvs-sys-color-icon-inverse`
     * 
     * Inverse icon color
     * 
     * @deprecated Use sys.color.fg.inverse instead
     */
    "inverse": "--cnvs-sys-color-icon-inverse",
    "primary": {
      /**
       * **value**: `{base.palette.blue.600}`
       * 
       * **CSS Var**: `--cnvs-sys-color-icon-primary-default`
       * 
       * Brand icon color
       * 
       * @deprecated Use sys.color.brand.fg.primary.default instead
       */
      "default": "--cnvs-sys-color-icon-primary-default",
      /**
       * **value**: `{base.palette.blue.700}`
       * 
       * **CSS Var**: `--cnvs-sys-color-icon-primary-strong`
       * 
       * Stronger brand icon color
       * 
       * @deprecated Use sys.color.brand.fg.primary.strong instead
       */
      "strong": "--cnvs-sys-color-icon-primary-strong",
      /**
       * **value**: `{base.palette.blue.800}`
       * 
       * **CSS Var**: `--cnvs-sys-color-icon-primary-stronger`
       * 
       * Stronger brand icon color
       * 
       * @deprecated Use sys.color.brand.fg.primary.strong instead
       */
      "stronger": "--cnvs-sys-color-icon-primary-stronger",
      /**
       * **value**: `{base.palette.blue.400}`
       * 
       * **CSS Var**: `--cnvs-sys-color-icon-primary-soft`
       * 
       * Stronger brand icon color
       * 
       * @deprecated Use sys.color.fg.info.default instead
       */
      "soft": "--cnvs-sys-color-icon-primary-soft",
      /**
       * **value**: `{base.palette.blue.200}`
       * 
       * **CSS Var**: `--cnvs-sys-color-icon-primary-softer`
       * 
       * Stronger brand icon color
       * 
       * @deprecated Use sys.color.fg.info.default instead
       */
      "softer": "--cnvs-sys-color-icon-primary-softer",
    },
    "positive": {
      /**
       * **value**: `{base.palette.green.600}`
       * 
       * **CSS Var**: `--cnvs-sys-color-icon-positive-default`
       * 
       * Success icon color
       * 
       * @deprecated Use sys.color.brand.fg.positive.default instead
       */
      "default": "--cnvs-sys-color-icon-positive-default",
      /**
       * **value**: `{base.palette.green.700}`
       * 
       * **CSS Var**: `--cnvs-sys-color-icon-positive-strong`
       * 
       * Success icon color
       * 
       * @deprecated Use sys.color.brand.fg.positive.strong instead with sys.color.accent.overlay.hover
       */
      "strong": "--cnvs-sys-color-icon-positive-strong",
      /**
       * **value**: `{base.palette.green.800}`
       * 
       * **CSS Var**: `--cnvs-sys-color-icon-positive-stronger`
       * 
       * Success icon color
       * 
       * @deprecated Use sys.color.brand.fg.positive.strong instead with sys.color.accent.overlay.pressed
       */
      "stronger": "--cnvs-sys-color-icon-positive-stronger",
      /**
       * **value**: `{base.palette.green.400}`
       * 
       * **CSS Var**: `--cnvs-sys-color-icon-positive-soft`
       * 
       * Success icon color
       * 
       * @deprecated Use sys.color.fg.success.default instead
       */
      "soft": "--cnvs-sys-color-icon-positive-soft",
      /**
       * **value**: `{base.palette.green.200}`
       * 
       * **CSS Var**: `--cnvs-sys-color-icon-positive-softer`
       * 
       * Success icon color
       * 
       * @deprecated Use sys.color.fg.success.default instead
       */
      "softer": "--cnvs-sys-color-icon-positive-softer",
    },
    "critical": {
      /**
       * **value**: `{base.palette.red.600}`
       * 
       * **CSS Var**: `--cnvs-sys-color-icon-critical-default`
       * 
       * Error icon color
       * 
       * @deprecated Use sys.color.brand.fg.critical.default instead
       */
      "default": "--cnvs-sys-color-icon-critical-default",
      /**
       * **value**: `{base.palette.red.700}`
       * 
       * **CSS Var**: `--cnvs-sys-color-icon-critical-strong`
       * 
       * Error icon color
       * 
       * @deprecated Use sys.color.fg.danger.strong instead
       */
      "strong": "--cnvs-sys-color-icon-critical-strong",
      /**
       * **value**: `{base.palette.red.800}`
       * 
       * **CSS Var**: `--cnvs-sys-color-icon-critical-stronger`
       * 
       * Error icon color
       * 
       * @deprecated Use sys.color.fg.danger.strong instead
       */
      "stronger": "--cnvs-sys-color-icon-critical-stronger",
      /**
       * **value**: `{base.palette.red.400}`
       * 
       * **CSS Var**: `--cnvs-sys-color-icon-critical-soft`
       * 
       * Error icon color
       * 
       * @deprecated Use sys.color.fg.danger.default instead
       */
      "soft": "--cnvs-sys-color-icon-critical-soft",
      /**
       * **value**: `{base.palette.red.200}`
       * 
       * **CSS Var**: `--cnvs-sys-color-icon-critical-softer`
       * 
       * Error icon color
       * 
       * @deprecated Use sys.color.fg.danger.default instead
       */
      "softer": "--cnvs-sys-color-icon-critical-softer",
    },
    "caution": {
      /**
       * **value**: `{base.palette.amber.900}`
       * 
       * **CSS Var**: `--cnvs-sys-color-icon-caution-default`
       * 
       * Caution icon color
       * 
       * @deprecated Use sys.color.fg.contrast.default instead
       */
      "default": "--cnvs-sys-color-icon-caution-default",
      /**
       * **value**: `{base.palette.amber.950}`
       * 
       * **CSS Var**: `--cnvs-sys-color-icon-caution-strong`
       * 
       * Strong caution icon color
       * 
       * @deprecated Use sys.color.brand.fg.caution.default instead
       */
      "strong": "--cnvs-sys-color-icon-caution-strong",
      /**
       * **value**: `{base.palette.amber.975}`
       * 
       * **CSS Var**: `--cnvs-sys-color-icon-caution-stronger`
       * 
       * Strong caution icon color
       * 
       * @deprecated Use sys.color.brand.fg.caution.strong instead
       */
      "stronger": "--cnvs-sys-color-icon-caution-stronger",
      /**
       * **value**: `{base.palette.amber.700}`
       * 
       * **CSS Var**: `--cnvs-sys-color-icon-caution-soft`
       * 
       * Soft caution icon color
       * 
       * @deprecated Use sys.color.fg.warning.default instead
       */
      "soft": "--cnvs-sys-color-icon-caution-soft",
      /**
       * **value**: `{base.palette.amber.500}`
       * 
       * **CSS Var**: `--cnvs-sys-color-icon-caution-softer`
       * 
       * Softer caution icon color
       * 
       * @deprecated Use sys.color.fg.warning.default instead
       */
      "softer": "--cnvs-sys-color-icon-caution-softer",
    },
    /**
     * **value**: `{base.palette.slate.400}`
     * 
     * **CSS Var**: `--cnvs-sys-color-icon-disabled`
     * 
     * Disabled icon color
     * 
     * @deprecated Use sys.color.fg.disabled instead
     */
    "disabled": "--cnvs-sys-color-icon-disabled",
    "info": {
      /**
       * **value**: `{base.palette.blue.600}`
       * 
       * **CSS Var**: `--cnvs-sys-color-icon-info-default`
       * 
       * Brand icon color
       * 
       * @deprecated Use sys.color.fg.info.default instead
       */
      "default": "--cnvs-sys-color-icon-info-default",
      /**
       * **value**: `{base.palette.blue.700}`
       * 
       * **CSS Var**: `--cnvs-sys-color-icon-info-strong`
       * 
       * Stronger brand icon color
       * 
       * @deprecated Use sys.color.fg.info.strong instead
       */
      "strong": "--cnvs-sys-color-icon-info-strong",
      /**
       * **value**: `{base.palette.blue.800}`
       * 
       * **CSS Var**: `--cnvs-sys-color-icon-info-stronger`
       * 
       * Stronger brand icon color
       * 
       * @deprecated Use sys.color.fg.info.strong instead
       */
      "stronger": "--cnvs-sys-color-icon-info-stronger",
    },
  },
  "fg": {
    "critical": {
      /**
       * **value**: `{base.palette.red.600}`
       * 
       * **CSS Var**: `--cnvs-sys-color-fg-critical-default`
       * 
       * Error
       * 
       * @deprecated Use sys.color.brand.fg.critical.default instead
       */
      "default": "--cnvs-sys-color-fg-critical-default",
      /**
       * **value**: `{base.palette.red.700}`
       * 
       * **CSS Var**: `--cnvs-sys-color-fg-critical-strong`
       * 
       * Error
       * 
       * @deprecated Use sys.color.brand.fg.critical.strong instead with sys.color.accent.overlay.hover
       */
      "strong": "--cnvs-sys-color-fg-critical-strong",
      /**
       * **value**: `{base.palette.red.800}`
       * 
       * **CSS Var**: `--cnvs-sys-color-fg-critical-stronger`
       * 
       * Error
       * 
       * @deprecated Use sys.color.fg.danger.default tokens instead
       */
      "stronger": "--cnvs-sys-color-fg-critical-stronger",
      /**
       * **value**: `{base.palette.red.400}`
       * 
       * **CSS Var**: `--cnvs-sys-color-fg-critical-soft`
       * 
       * Error
       * 
       * @deprecated Use sys.color.fg.danger.default instead
       */
      "soft": "--cnvs-sys-color-fg-critical-soft",
      /**
       * **value**: `{base.palette.red.200}`
       * 
       * **CSS Var**: `--cnvs-sys-color-fg-critical-softer`
       * 
       * Error
       * 
       * @deprecated Use sys.color.fg.danger.default instead
       */
      "softer": "--cnvs-sys-color-fg-critical-softer",
    },
    "muted": {
      /**
       * **value**: `{base.palette.slate.800}`
       * 
       * **CSS Var**: `--cnvs-sys-color-fg-muted-stronger`
       * 
       * @deprecated Use sys.color.fg.muted.strong instead
       */
      "stronger": "--cnvs-sys-color-fg-muted-stronger",
      /**
       * **value**: `{base.palette.slate.400}`
       * 
       * **CSS Var**: `--cnvs-sys-color-fg-muted-soft`
       * 
       * Tab item foreground
       * 
       * @deprecated Use sys.color.fg.muted.default instead
       */
      "soft": "--cnvs-sys-color-fg-muted-soft",
      /**
       * **value**: `{base.palette.slate.A600}`
       * 
       * **CSS Var**: `--cnvs-sys-color-fg-muted-default`
       * 
       * Secondary text for hints and placeholders
       */
      "default": "--cnvs-sys-color-fg-muted-default",
      /**
       * **value**: `{base.palette.slate.A700}`
       * 
       * **CSS Var**: `--cnvs-sys-color-fg-muted-strong`
       * 
       * Stronger secondary text
       */
      "strong": "--cnvs-sys-color-fg-muted-strong",
    },
    "primary": {
      /**
       * **value**: `{base.palette.blue.600}`
       * 
       * **CSS Var**: `--cnvs-sys-color-fg-primary-default`
       * 
       * Branded text
       * 
       * @deprecated Use sys.color.brand.fg.primary.default instead
       */
      "default": "--cnvs-sys-color-fg-primary-default",
      /**
       * **value**: `{base.palette.blue.400}`
       * 
       * **CSS Var**: `--cnvs-sys-color-fg-primary-soft`
       * 
       * @deprecated Use sys.color.fg.info.default or sys.color.brand.fg.primary.default instead
       */
      "soft": "--cnvs-sys-color-fg-primary-soft",
      /**
       * **value**: `{base.palette.blue.200}`
       * 
       * **CSS Var**: `--cnvs-sys-color-fg-primary-softer`
       * 
       * Link Inverse, Disabled
       * 
       * @deprecated Use sys.color.fg.info.default or sys.color.brand.fg.primary.default instead
       */
      "softer": "--cnvs-sys-color-fg-primary-softer",
      /**
       * **value**: `{base.palette.blue.800}`
       * 
       * **CSS Var**: `--cnvs-sys-color-fg-primary-stronger`
       * 
       * Links on hover
       * 
       * @deprecated Use sys.color.brand.fg.primary.strong instead
       */
      "stronger": "--cnvs-sys-color-fg-primary-stronger",
      /**
       * **value**: `{base.palette.blue.700}`
       * 
       * **CSS Var**: `--cnvs-sys-color-fg-primary-strong`
       * 
       * Links on hover
       * 
       * @deprecated Use sys.color.brand.fg.primary.strong instead
       */
      "strong": "--cnvs-sys-color-fg-primary-strong",
    },
    "caution": {
      /**
       * **value**: `{base.palette.amber.900}`
       * 
       * **CSS Var**: `--cnvs-sys-color-fg-caution-default`
       * 
       * Warning
       * 
       * @deprecated Use sys.color.brand.fg.caution.default instead
       */
      "default": "--cnvs-sys-color-fg-caution-default",
      /**
       * **value**: `{base.palette.amber.950}`
       * 
       * **CSS Var**: `--cnvs-sys-color-fg-caution-strong`
       * 
       * Warning on hover
       * 
       * @deprecated Use sys.color.brand.fg.caution.strong instead with sys.color.accent.overlay.hover
       */
      "strong": "--cnvs-sys-color-fg-caution-strong",
      /**
       * **value**: `{base.palette.amber.700}`
       * 
       * **CSS Var**: `--cnvs-sys-color-fg-caution-soft`
       * 
       * Warning
       * 
       * @deprecated Use sys.color.fg.warning.default instead
       */
      "soft": "--cnvs-sys-color-fg-caution-soft",
      /**
       * **value**: `{base.palette.amber.975}`
       * 
       * **CSS Var**: `--cnvs-sys-color-fg-caution-stronger`
       * 
       * Warning on hover
       * 
       * @deprecated Use sys.color.fg.warning.strong instead
       */
      "stronger": "--cnvs-sys-color-fg-caution-stronger",
      /**
       * **value**: `{base.palette.amber.500}`
       * 
       * **CSS Var**: `--cnvs-sys-color-fg-caution-softer`
       * 
       * Warning
       * 
       * @deprecated Use sys.color.fg.warning.default instead
       */
      "softer": "--cnvs-sys-color-fg-caution-softer",
    },
    "info": {
      /**
       * **value**: `{base.palette.blue.200}`
       * 
       * **CSS Var**: `--cnvs-sys-color-fg-info-softer`
       * 
       * Link Inverse, Disabled
       * 
       * @deprecated Use sys.color.fg.ai instead
       */
      "softer": "--cnvs-sys-color-fg-info-softer",
      /**
       * **value**: `{base.palette.blue.400}`
       * 
       * **CSS Var**: `--cnvs-sys-color-fg-info-soft`
       * 
       * @deprecated Use sys.color.fg.info.default instead
       */
      "soft": "--cnvs-sys-color-fg-info-soft",
      /**
       * **value**: `{base.palette.blue.800}`
       * 
       * **CSS Var**: `--cnvs-sys-color-fg-info-stronger`
       * 
       * Links on hover
       * 
       * @deprecated Use sys.color.fg.info.strong instead
       */
      "stronger": "--cnvs-sys-color-fg-info-stronger",
      /**
       * **value**: `{base.palette.blue.600}`
       * 
       * **CSS Var**: `--cnvs-sys-color-fg-info-default`
       * 
       * Informational text and icons (not tenant themeable)
       */
      "default": "--cnvs-sys-color-fg-info-default",
      /**
       * **value**: `{base.palette.blue.700}`
       * 
       * **CSS Var**: `--cnvs-sys-color-fg-info-strong`
       * 
       * Stronger informational text and icons
       */
      "strong": "--cnvs-sys-color-fg-info-strong",
    },
    "positive": {
      /**
       * **value**: `{base.palette.green.600}`
       * 
       * **CSS Var**: `--cnvs-sys-color-fg-positive-default`
       * 
       * Error
       * 
       * @deprecated Use sys.color.brand.fg.positive.default instead
       */
      "default": "--cnvs-sys-color-fg-positive-default",
      /**
       * **value**: `{base.palette.green.200}`
       * 
       * **CSS Var**: `--cnvs-sys-color-fg-positive-softer`
       * 
       * Error
       * 
       * @deprecated Use sys.color.fg.success.default instead
       */
      "softer": "--cnvs-sys-color-fg-positive-softer",
      /**
       * **value**: `{base.palette.green.400}`
       * 
       * **CSS Var**: `--cnvs-sys-color-fg-positive-soft`
       * 
       * Error
       * 
       * @deprecated Use sys.color.fg.success.default instead
       */
      "soft": "--cnvs-sys-color-fg-positive-soft",
      /**
       * **value**: `{base.palette.green.700}`
       * 
       * **CSS Var**: `--cnvs-sys-color-fg-positive-strong`
       * 
       * Error
       * 
       * @deprecated Use sys.color.brand.fg.positive.strong instead with sys.color.accent.overlay.hover
       */
      "strong": "--cnvs-sys-color-fg-positive-strong",
      /**
       * **value**: `{base.palette.green.800}`
       * 
       * **CSS Var**: `--cnvs-sys-color-fg-positive-stronger`
       * 
       * Error
       * 
       * @deprecated Use sys.color.brand.fg.positive.strong instead with sys.color.accent.overlay.pressed
       */
      "stronger": "--cnvs-sys-color-fg-positive-stronger",
    },
    /**
     * **value**: `{base.palette.neutral.A800}`
     * 
     * **CSS Var**: `--cnvs-sys-color-fg-default`
     * 
     * Default body text and icons
     */
    "default": "--cnvs-sys-color-fg-default",
    /**
     * **value**: `{base.palette.neutral.A900}`
     * 
     * **CSS Var**: `--cnvs-sys-color-fg-strong`
     * 
     * Stronger text for headings and labels
     */
    "strong": "--cnvs-sys-color-fg-strong",
    /**
     * **value**: `{base.palette.neutral.A950}`
     * 
     * **CSS Var**: `--cnvs-sys-color-fg-stronger`
     * 
     * Strongest text for titles
     */
    "stronger": "--cnvs-sys-color-fg-stronger",
    /**
     * **value**: `{base.palette.slate.A400}`
     * 
     * **CSS Var**: `--cnvs-sys-color-fg-disabled`
     * 
     * Disabled state text and icons
     */
    "disabled": "--cnvs-sys-color-fg-disabled",
    /**
     * **value**: `{base.palette.neutral.0}`
     * 
     * **CSS Var**: `--cnvs-sys-color-fg-inverse`
     * 
     * Text and icons for use on dark backgrounds
     */
    "inverse": "--cnvs-sys-color-fg-inverse",
    "danger": {
      /**
       * **value**: `{base.palette.red.600}`
       * 
       * **CSS Var**: `--cnvs-sys-color-fg-danger-default`
       * 
       * Error text and icons (not tenant themeable)
       */
      "default": "--cnvs-sys-color-fg-danger-default",
      /**
       * **value**: `{base.palette.red.700}`
       * 
       * **CSS Var**: `--cnvs-sys-color-fg-danger-strong`
       * 
       * Stronger error text and icons
       */
      "strong": "--cnvs-sys-color-fg-danger-strong",
    },
    "warning": {
      /**
       * **value**: `{base.palette.amber.600}`
       * 
       * **CSS Var**: `--cnvs-sys-color-fg-warning-default`
       * 
       * Warning text and icons (not tenant themeable)
       */
      "default": "--cnvs-sys-color-fg-warning-default",
      /**
       * **value**: `{base.palette.amber.700}`
       * 
       * **CSS Var**: `--cnvs-sys-color-fg-warning-strong`
       * 
       * Stronger warning text and icons
       */
      "strong": "--cnvs-sys-color-fg-warning-strong",
    },
    "success": {
      /**
       * **value**: `{base.palette.green.600}`
       * 
       * **CSS Var**: `--cnvs-sys-color-fg-success-default`
       * 
       * Success text and icons (not tenant themeable)
       */
      "default": "--cnvs-sys-color-fg-success-default",
      /**
       * **value**: `{base.palette.green.700}`
       * 
       * **CSS Var**: `--cnvs-sys-color-fg-success-strong`
       * 
       * Stronger success text and icons
       */
      "strong": "--cnvs-sys-color-fg-success-strong",
    },
    "link": {
      /**
       * **value**: `{base.palette.blue.600}`
       * 
       * **CSS Var**: `--cnvs-sys-color-fg-link-default`
       * 
       * Default text color for hyperlinks (not tenant themeable)
       */
      "default": "--cnvs-sys-color-fg-link-default",
      /**
       * **value**: `{base.palette.blue.700}`
       * 
       * **CSS Var**: `--cnvs-sys-color-fg-link-hover`
       * 
       * Text color for hyperlinks on hover
       */
      "hover": "--cnvs-sys-color-fg-link-hover",
    },
    /**
     * **value**: `{base.palette.blue.950}`
     * 
     * **CSS Var**: `--cnvs-sys-color-fg-ai`
     * 
     * Text and icons indicating AI-generated content
     */
    "ai": "--cnvs-sys-color-fg-ai",
    "contrast": {
      /**
       * **value**: `{base.palette.neutral.A900}`
       * 
       * **CSS Var**: `--cnvs-sys-color-fg-contrast-default`
       * 
       * High contrast text for maximum readability
       */
      "default": "--cnvs-sys-color-fg-contrast-default",
      /**
       * **value**: `{base.palette.neutral.A950}`
       * 
       * **CSS Var**: `--cnvs-sys-color-fg-contrast-strong`
       * 
       * Stronger high contrast text
       */
      "strong": "--cnvs-sys-color-fg-contrast-strong",
    },
  },
  "border": {
    /**
     * **value**: `{base.palette.blue.950}`
     * 
     * **CSS Var**: `--cnvs-sys-color-border-ai`
     * 
     * Active state on AI borders
     * 
     * @deprecated Use sys.color.accent.ai instead
     */
    "ai": "--cnvs-sys-color-border-ai",
    "input": {
      /**
       * **value**: `{base.palette.slate.400}`
       * 
       * **CSS Var**: `--cnvs-sys-color-border-input-disabled`
       * 
       * Disabled inputs
       * 
       * @deprecated Use sys.color.fg.disabled instead
       */
      "disabled": "--cnvs-sys-color-border-input-disabled",
      /**
       * **value**: `{base.palette.slate.700}`
       * 
       * **CSS Var**: `--cnvs-sys-color-border-input-strong`
       * 
       * Input hover
       * 
       * @deprecated Use sys.color.border.input.hover instead
       */
      "strong": "--cnvs-sys-color-border-input-strong",
      /**
       * **value**: `{base.palette.neutral.0}`
       * 
       * **CSS Var**: `--cnvs-sys-color-border-input-inverse`
       * 
       * Borders on checkboxes and radios
       * 
       * @deprecated Use sys.color.border.inverse.default instead
       */
      "inverse": "--cnvs-sys-color-border-input-inverse",
      /**
       * **value**: `{base.palette.slate.A500}`
       * 
       * **CSS Var**: `--cnvs-sys-color-border-input-default`
       * 
       * Default border for form inputs
       */
      "default": "--cnvs-sys-color-border-input-default",
      /**
       * **value**: `{base.palette.slate.A700}`
       * 
       * **CSS Var**: `--cnvs-sys-color-border-input-hover`
       * 
       * Hover state border for form inputs
       */
      "hover": "--cnvs-sys-color-border-input-hover",
    },
    "contrast": {
      /**
       * **value**: `{base.palette.neutral.950}`
       * 
       * **CSS Var**: `--cnvs-sys-color-border-contrast-strong`
       * 
       * Secondary Button Hover
       * 
       * @deprecated Use sys.color.border.contrast.default instead
       */
      "strong": "--cnvs-sys-color-border-contrast-strong",
      /**
       * **value**: `{base.palette.neutral.A900}`
       * 
       * **CSS Var**: `--cnvs-sys-color-border-contrast-default`
       * 
       * High contrast border for maximum visibility
       */
      "default": "--cnvs-sys-color-border-contrast-default",
    },
    "critical": {
      /**
       * **value**: `{base.palette.red.500}`
       * 
       * **CSS Var**: `--cnvs-sys-color-border-critical-default`
       * 
       * Error
       * 
       * @deprecated Use sys.color.brand.border.critical instead
       */
      "default": "--cnvs-sys-color-border-critical-default",
    },
    "caution": {
      /**
       * **value**: `{base.palette.amber.400}`
       * 
       * **CSS Var**: `--cnvs-sys-color-border-caution-default`
       * 
       * Warning inner
       * 
       * @deprecated Use sys.color.brand.focus.caution.inner instead
       */
      "default": "--cnvs-sys-color-border-caution-default",
      /**
       * **value**: `{base.palette.amber.500}`
       * 
       * **CSS Var**: `--cnvs-sys-color-border-caution-strong`
       * 
       * Warning outer (box shadow)
       * 
       * @deprecated Use sys.color.brand.focus.caution.outer instead
       */
      "strong": "--cnvs-sys-color-border-caution-strong",
    },
    /**
     * **value**: `{base.palette.slate.200}`
     * 
     * **CSS Var**: `--cnvs-sys-color-border-divider`
     * 
     * Dividers
     * 
     * @deprecated Use sys.color.border.default instead
     */
    "divider": "--cnvs-sys-color-border-divider",
    "primary": {
      /**
       * **value**: `{base.palette.blue.500}`
       * 
       * **CSS Var**: `--cnvs-sys-color-border-primary-default`
       * 
       * Brand, Focus
       * 
       * @deprecated Use sys.color.brand.border.primary instead
       */
      "default": "--cnvs-sys-color-border-primary-default",
    },
    /**
     * **value**: `{base.palette.slate.300}`
     * 
     * **CSS Var**: `--cnvs-sys-color-border-container`
     * 
     * Cards, Toasts, Surfaces
     * 
     * @deprecated Use sys.color.border.strong instead
     */
    "container": "--cnvs-sys-color-border-container",
    /**
     * **value**: `{base.palette.slate.A200}`
     * 
     * **CSS Var**: `--cnvs-sys-color-border-default`
     * 
     * Default border for containers and dividers
     */
    "default": "--cnvs-sys-color-border-default",
    /**
     * **value**: `{base.palette.slate.A300}`
     * 
     * **CSS Var**: `--cnvs-sys-color-border-strong`
     * 
     * Stronger border for more visible separation
     */
    "strong": "--cnvs-sys-color-border-strong",
    "info": {
      /**
       * **value**: `{base.palette.blue.500}`
       * 
       * **CSS Var**: `--cnvs-sys-color-border-info-default`
       * 
       * Border for informational containers (not tenant themeable)
       */
      "default": "--cnvs-sys-color-border-info-default",
    },
    /**
     * **value**: `{base.palette.red.500}`
     * 
     * **CSS Var**: `--cnvs-sys-color-border-danger`
     * 
     * Border for error states (not tenant themeable)
     */
    "danger": "--cnvs-sys-color-border-danger",
    /**
     * **value**: `{base.palette.amber.400}`
     * 
     * **CSS Var**: `--cnvs-sys-color-border-warning`
     * 
     * Border for warning states (not tenant themeable)
     */
    "warning": "--cnvs-sys-color-border-warning",
    "inverse": {
      /**
       * **value**: `{base.palette.neutral.0}`
       * 
       * **CSS Var**: `--cnvs-sys-color-border-inverse-default`
       * 
       * Border for use on dark backgrounds
       */
      "default": "--cnvs-sys-color-border-inverse-default",
      /**
       * **value**: `{base.palette.white.A700}`
       * 
       * **CSS Var**: `--cnvs-sys-color-border-inverse-strong`
       * 
       * Stronger border for use on dark backgrounds
       */
      "strong": "--cnvs-sys-color-border-inverse-strong",
    },
    /**
     * **value**: `{base.palette.neutral.A0}`
     * 
     * **CSS Var**: `--cnvs-sys-color-border-transparent`
     * 
     * Invisible border for layout spacing
     */
    "transparent": "--cnvs-sys-color-border-transparent",
  },
  "shadow": {
    /**
     * **value**: `{sys.color.shadow.base}`
     * 
     * **CSS Var**: `--cnvs-sys-color-shadow-1`
     * 
     * First shadow color
     * 
     * @deprecated Use sys.color.shadow.base instead
     */
    "1": "--cnvs-sys-color-shadow-1",
    /**
     * **value**: `{sys.color.shadow.ambient}`
     * 
     * **CSS Var**: `--cnvs-sys-color-shadow-2`
     * 
     * Second shadow color
     * 
     * @deprecated Use sys.color.shadow.ambient instead
     */
    "2": "--cnvs-sys-color-shadow-2",
    /**
     * **value**: `{sys.color.shadow.base}`
     * 
     * **CSS Var**: `--cnvs-sys-color-shadow-default`
     * 
     * Main shadow color
     * 
     * @deprecated Use sys.color.shadow.base instead
     */
    "default": "--cnvs-sys-color-shadow-default",
    /**
     * **value**: `{base.palette.slate.A200}`
     * 
     * **CSS Var**: `--cnvs-sys-color-shadow-base`
     * 
     * Primary shadow color for elevated elements
     */
    "base": "--cnvs-sys-color-shadow-base",
    /**
     * **value**: `{base.palette.slate.A100}`
     * 
     * **CSS Var**: `--cnvs-sys-color-shadow-ambient`
     * 
     * Subtle ambient shadow for soft depth
     */
    "ambient": "--cnvs-sys-color-shadow-ambient",
  },
  "static": {
    "gold": {
      /**
       * **value**: `{base.palette.amber.600}`
       * 
       * **CSS Var**: `--cnvs-sys-color-static-gold-stronger`
       * 
       * @deprecated replace static.gold.stronger with {sys.color.static.amber.stronger}. Prefer to replace with `sys.color.bg.caution.stronger` if used as a background color.
       */
      "stronger": "--cnvs-sys-color-static-gold-stronger",
    },
    "orange": {
      /**
       * **value**: `{base.palette.amber.400}`
       * 
       * **CSS Var**: `--cnvs-sys-color-static-orange-default`
       * 
       * @deprecated replace static.orange.default with {sys.color.static.amber.default}. Prefer to replace with `sys.color.bg.caution.default` if used as a background color.
       */
      "default": "--cnvs-sys-color-static-orange-default",
      /**
       * **value**: `{base.palette.amber.100}`
       * 
       * **CSS Var**: `--cnvs-sys-color-static-orange-soft`
       * 
       * @deprecated replace static.orange.soft with {sys.color.static.amber.soft}. Prefer to replace with `sys.color.bg.caution.soft` if used as a background color.
       */
      "soft": "--cnvs-sys-color-static-orange-soft",
      /**
       * **value**: `{base.palette.amber.500}`
       * 
       * **CSS Var**: `--cnvs-sys-color-static-orange-strong`
       * 
       * @deprecated replace static.orange.strong with {sys.color.static.amber.strong}. Prefer to replace with `sys.color.bg.caution.strong` if used as a background color.
       */
      "strong": "--cnvs-sys-color-static-orange-strong",
    },
    "blue": {
      /**
       * **value**: `{base.palette.blue.600}`
       * 
       * **CSS Var**: `--cnvs-sys-color-static-blue-default`
       * 
       * Blue
       * 
       * @deprecated Use sys.color.accent.info instead
       */
      "default": "--cnvs-sys-color-static-blue-default",
      /**
       * **value**: `{base.palette.blue.25}`
       * 
       * **CSS Var**: `--cnvs-sys-color-static-blue-softest`
       * 
       * Light blue
       * 
       * @deprecated Use palette.blue tokens directly instead
       */
      "softest": "--cnvs-sys-color-static-blue-softest",
      /**
       * **value**: `{base.palette.blue.700}`
       * 
       * **CSS Var**: `--cnvs-sys-color-static-blue-strong`
       * 
       * Stronger blue
       * 
       * @deprecated Use palette.blue tokens directly instead
       */
      "strong": "--cnvs-sys-color-static-blue-strong",
      /**
       * **value**: `{base.palette.blue.800}`
       * 
       * **CSS Var**: `--cnvs-sys-color-static-blue-stronger`
       * 
       * Stronger blue
       * 
       * @deprecated Use palette.blue tokens directly instead
       */
      "stronger": "--cnvs-sys-color-static-blue-stronger",
      /**
       * **value**: `{base.palette.blue.50}`
       * 
       * **CSS Var**: `--cnvs-sys-color-static-blue-softer`
       * 
       * Light blue
       * 
       * @deprecated Use palette.blue tokens directly instead
       */
      "softer": "--cnvs-sys-color-static-blue-softer",
      /**
       * **value**: `{base.palette.blue.100}`
       * 
       * **CSS Var**: `--cnvs-sys-color-static-blue-soft`
       * 
       * Light blue
       * 
       * @deprecated Use palette.blue tokens directly instead
       */
      "soft": "--cnvs-sys-color-static-blue-soft",
      /**
       * **value**: `{base.palette.blue.950}`
       * 
       * **CSS Var**: `--cnvs-sys-color-static-blue-strongest`
       * 
       * Stronger blue
       * 
       * @deprecated Use palette.blue tokens directly instead
       */
      "strongest": "--cnvs-sys-color-static-blue-strongest",
    },
    "green": {
      /**
       * **value**: `{base.palette.green.600}`
       * 
       * **CSS Var**: `--cnvs-sys-color-static-green-default`
       * 
       * Default green
       * 
       * @deprecated Use palette.green tokens directly instead
       */
      "default": "--cnvs-sys-color-static-green-default",
      /**
       * **value**: `{base.palette.green.100}`
       * 
       * **CSS Var**: `--cnvs-sys-color-static-green-soft`
       * 
       * Light green
       * 
       * @deprecated Use palette.green tokens directly instead
       */
      "soft": "--cnvs-sys-color-static-green-soft",
      /**
       * **value**: `{base.palette.green.700}`
       * 
       * **CSS Var**: `--cnvs-sys-color-static-green-strong`
       * 
       * Stronger green
       * 
       * @deprecated Use palette.green tokens directly instead
       */
      "strong": "--cnvs-sys-color-static-green-strong",
      /**
       * **value**: `{base.palette.green.50}`
       * 
       * **CSS Var**: `--cnvs-sys-color-static-green-softer`
       * 
       * Light green
       * 
       * @deprecated Use palette.green tokens directly instead
       */
      "softer": "--cnvs-sys-color-static-green-softer",
      /**
       * **value**: `{base.palette.green.800}`
       * 
       * **CSS Var**: `--cnvs-sys-color-static-green-stronger`
       * 
       * Stronger green
       * 
       * @deprecated Use palette.green tokens directly instead
       */
      "stronger": "--cnvs-sys-color-static-green-stronger",
      /**
       * **value**: `{base.palette.green.25}`
       * 
       * **CSS Var**: `--cnvs-sys-color-static-green-softest`
       * 
       * Light green
       * 
       * @deprecated Use palette.green tokens directly instead
       */
      "softest": "--cnvs-sys-color-static-green-softest",
      /**
       * **value**: `{base.palette.green.950}`
       * 
       * **CSS Var**: `--cnvs-sys-color-static-green-strongest`
       * 
       * Stronger green
       * 
       * @deprecated Use palette.green tokens directly instead
       */
      "strongest": "--cnvs-sys-color-static-green-strongest",
    },
    "red": {
      /**
       * **value**: `{base.palette.red.600}`
       * 
       * **CSS Var**: `--cnvs-sys-color-static-red-default`
       * 
       * Red
       * 
       * @deprecated Use palette.red tokens directly instead
       */
      "default": "--cnvs-sys-color-static-red-default",
      /**
       * **value**: `{base.palette.red.100}`
       * 
       * **CSS Var**: `--cnvs-sys-color-static-red-soft`
       * 
       * Light red
       * 
       * @deprecated Use palette.red tokens directly instead
       */
      "soft": "--cnvs-sys-color-static-red-soft",
      /**
       * **value**: `{base.palette.red.700}`
       * 
       * **CSS Var**: `--cnvs-sys-color-static-red-strong`
       * 
       * Strong red
       * 
       * @deprecated Use palette.red tokens directly instead
       */
      "strong": "--cnvs-sys-color-static-red-strong",
      /**
       * **value**: `{base.palette.red.800}`
       * 
       * **CSS Var**: `--cnvs-sys-color-static-red-stronger`
       * 
       * Strong red
       * 
       * @deprecated Use palette.red tokens directly instead
       */
      "stronger": "--cnvs-sys-color-static-red-stronger",
      /**
       * **value**: `{base.palette.red.25}`
       * 
       * **CSS Var**: `--cnvs-sys-color-static-red-softest`
       * 
       * Light red
       * 
       * @deprecated Use palette.red tokens directly instead
       */
      "softest": "--cnvs-sys-color-static-red-softest",
      /**
       * **value**: `{base.palette.red.950}`
       * 
       * **CSS Var**: `--cnvs-sys-color-static-red-strongest`
       * 
       * Strong red
       * 
       * @deprecated Use palette.red tokens directly instead
       */
      "strongest": "--cnvs-sys-color-static-red-strongest",
      /**
       * **value**: `{base.palette.red.50}`
       * 
       * **CSS Var**: `--cnvs-sys-color-static-red-softer`
       * 
       * Light red
       * 
       * @deprecated Use palette.red tokens directly instead
       */
      "softer": "--cnvs-sys-color-static-red-softer",
    },
    /**
     * **value**: `{base.palette.neutral.0}`
     * 
     * **CSS Var**: `--cnvs-sys-color-static-white`
     * 
     * Just white
     * 
     * @deprecated Use palette.neutral.0 directly instead
     */
    "white": "--cnvs-sys-color-static-white",
    /**
     * **value**: `{base.palette.neutral.1000}`
     * 
     * **CSS Var**: `--cnvs-sys-color-static-black`
     * 
     * Just black
     * 
     * @deprecated Use palette.neutral.1000 directly instead
     */
    "black": "--cnvs-sys-color-static-black",
    "gray": {
      /**
       * **value**: `{base.palette.slate.600}`
       * 
       * **CSS Var**: `--cnvs-sys-color-static-gray-default`
       * 
       * Gray
       * 
       * @deprecated Use palette.slate tokens directly instead
       */
      "default": "--cnvs-sys-color-static-gray-default",
      /**
       * **value**: `{base.palette.slate.200}`
       * 
       * **CSS Var**: `--cnvs-sys-color-static-gray-soft`
       * 
       * Light gray
       * 
       * @deprecated Use palette.slate tokens directly instead
       */
      "soft": "--cnvs-sys-color-static-gray-soft",
      /**
       * **value**: `{base.palette.slate.700}`
       * 
       * **CSS Var**: `--cnvs-sys-color-static-gray-strong`
       * 
       * Stronger gray
       * 
       * @deprecated Use palette.slate tokens directly instead
       */
      "strong": "--cnvs-sys-color-static-gray-strong",
      /**
       * **value**: `{base.palette.slate.800}`
       * 
       * **CSS Var**: `--cnvs-sys-color-static-gray-stronger`
       * 
       * Stronger gray
       * 
       * @deprecated Use palette.slate tokens directly instead
       */
      "stronger": "--cnvs-sys-color-static-gray-stronger",
      /**
       * **value**: `{base.palette.slate.950}`
       * 
       * **CSS Var**: `--cnvs-sys-color-static-gray-strongest`
       * 
       * Stronger gray
       * 
       * @deprecated Use palette.slate tokens directly instead
       */
      "strongest": "--cnvs-sys-color-static-gray-strongest",
      /**
       * **value**: `{base.palette.slate.50}`
       * 
       * **CSS Var**: `--cnvs-sys-color-static-gray-softest`
       * 
       * Light gray
       * 
       * @deprecated Use palette.slate tokens directly instead
       */
      "softest": "--cnvs-sys-color-static-gray-softest",
      /**
       * **value**: `{base.palette.slate.100}`
       * 
       * **CSS Var**: `--cnvs-sys-color-static-gray-softer`
       * 
       * Light gray
       * 
       * @deprecated Use palette.slate tokens directly instead
       */
      "softer": "--cnvs-sys-color-static-gray-softer",
    },
    "amber": {
      /**
       * **value**: `{base.palette.amber.400}`
       * 
       * **CSS Var**: `--cnvs-sys-color-static-amber-default`
       * 
       * amber
       * 
       * @deprecated Use sys.color.accent.warning token instead
       */
      "default": "--cnvs-sys-color-static-amber-default",
      /**
       * **value**: `{base.palette.amber.25}`
       * 
       * **CSS Var**: `--cnvs-sys-color-static-amber-softest`
       * 
       * Soft amber
       * 
       * @deprecated Use sys.color.accent.warning instead
       */
      "softest": "--cnvs-sys-color-static-amber-softest",
      /**
       * **value**: `{base.palette.amber.500}`
       * 
       * **CSS Var**: `--cnvs-sys-color-static-amber-strong`
       * 
       * Stronger amber
       * 
       * @deprecated Use sys.color.accent.warning instead
       */
      "strong": "--cnvs-sys-color-static-amber-strong",
      /**
       * **value**: `{base.palette.amber.600}`
       * 
       * **CSS Var**: `--cnvs-sys-color-static-amber-stronger`
       * 
       * Stronger amber
       * 
       * @deprecated Use sys.color.accent.warning instead
       */
      "stronger": "--cnvs-sys-color-static-amber-stronger",
      /**
       * **value**: `{base.palette.amber.50}`
       * 
       * **CSS Var**: `--cnvs-sys-color-static-amber-softer`
       * 
       * Soft amber
       * 
       * @deprecated Use palette.amber tokens directly instead
       */
      "softer": "--cnvs-sys-color-static-amber-softer",
      /**
       * **value**: `{base.palette.amber.950}`
       * 
       * **CSS Var**: `--cnvs-sys-color-static-amber-strongest`
       * 
       * Stronger amber
       * 
       * @deprecated Use sys.color.fg.warning.strong instead
       */
      "strongest": "--cnvs-sys-color-static-amber-strongest",
      /**
       * **value**: `{base.palette.amber.100}`
       * 
       * **CSS Var**: `--cnvs-sys-color-static-amber-soft`
       * 
       * Soft amber
       * 
       * @deprecated Use sys.color.surface.warning.strong instead
       */
      "soft": "--cnvs-sys-color-static-amber-soft",
    },
  },
  "surface": {
    /**
     * **value**: `{base.palette.neutral.0}`
     * 
     * **CSS Var**: `--cnvs-sys-color-surface-default`
     * 
     * Default background for containers on top of the page
     */
    "default": "--cnvs-sys-color-surface-default",
    /**
     * **value**: `{base.palette.slate.50}`
     * 
     * **CSS Var**: `--cnvs-sys-color-surface-navigation`
     * 
     * Background for navigation containers like sidebars and top bars
     */
    "navigation": "--cnvs-sys-color-surface-navigation",
    /**
     * **value**: `{base.palette.neutral.0}`
     * 
     * **CSS Var**: `--cnvs-sys-color-surface-popover`
     * 
     * Background for floating containers like dropdowns and tooltips
     */
    "popover": "--cnvs-sys-color-surface-popover",
    /**
     * **value**: `{base.palette.neutral.0}`
     * 
     * **CSS Var**: `--cnvs-sys-color-surface-modal`
     * 
     * Background for modal dialog containers
     */
    "modal": "--cnvs-sys-color-surface-modal",
    /**
     * **value**: `{base.palette.slate.A25}`
     * 
     * **CSS Var**: `--cnvs-sys-color-surface-raised`
     * 
     * Separates a layer from the surface, e.g. table headers or sticky elements
     */
    "raised": "--cnvs-sys-color-surface-raised",
    "alt": {
      /**
       * **value**: `{base.palette.slate.A50}`
       * 
       * **CSS Var**: `--cnvs-sys-color-surface-alt-default`
       * 
       * De-emphasized container background for secondary information
       */
      "default": "--cnvs-sys-color-surface-alt-default",
      /**
       * **value**: `{base.palette.slate.A100}`
       * 
       * **CSS Var**: `--cnvs-sys-color-surface-alt-strong`
       * 
       * Stronger de-emphasized container background
       */
      "strong": "--cnvs-sys-color-surface-alt-strong",
    },
    /**
     * **value**: `{base.palette.slate.A200}`
     * 
     * **CSS Var**: `--cnvs-sys-color-surface-loading`
     * 
     * Background for skeleton loaders and loading states
     */
    "loading": "--cnvs-sys-color-surface-loading",
    "info": {
      /**
       * **value**: `{base.palette.blue.A25}`
       * 
       * **CSS Var**: `--cnvs-sys-color-surface-info-default`
       * 
       * Container background for informational callouts
       */
      "default": "--cnvs-sys-color-surface-info-default",
      /**
       * **value**: `{base.palette.blue.A50}`
       * 
       * **CSS Var**: `--cnvs-sys-color-surface-info-strong`
       * 
       * Stronger container background for info badges and indicators
       */
      "strong": "--cnvs-sys-color-surface-info-strong",
    },
    "danger": {
      /**
       * **value**: `{base.palette.red.A25}`
       * 
       * **CSS Var**: `--cnvs-sys-color-surface-danger-default`
       * 
       * Container background for error states (not tenant themeable)
       */
      "default": "--cnvs-sys-color-surface-danger-default",
      /**
       * **value**: `{base.palette.red.A50}`
       * 
       * **CSS Var**: `--cnvs-sys-color-surface-danger-strong`
       * 
       * Stronger container background for error states
       */
      "strong": "--cnvs-sys-color-surface-danger-strong",
    },
    "warning": {
      /**
       * **value**: `{base.palette.amber.A25}`
       * 
       * **CSS Var**: `--cnvs-sys-color-surface-warning-default`
       * 
       * Container background for warning states (not tenant themeable)
       */
      "default": "--cnvs-sys-color-surface-warning-default",
      /**
       * **value**: `{base.palette.amber.A50}`
       * 
       * **CSS Var**: `--cnvs-sys-color-surface-warning-strong`
       * 
       * Stronger container background for warning states
       */
      "strong": "--cnvs-sys-color-surface-warning-strong",
    },
    "success": {
      /**
       * **value**: `{base.palette.green.A25}`
       * 
       * **CSS Var**: `--cnvs-sys-color-surface-success-default`
       * 
       * Container background for success states (not tenant themeable)
       */
      "default": "--cnvs-sys-color-surface-success-default",
      /**
       * **value**: `{base.palette.green.A50}`
       * 
       * **CSS Var**: `--cnvs-sys-color-surface-success-strong`
       * 
       * Stronger container background for success states
       */
      "strong": "--cnvs-sys-color-surface-success-strong",
    },
    "ai": {
      /**
       * **value**: `{base.palette.blue.A100}`
       * 
       * **CSS Var**: `--cnvs-sys-color-surface-ai-default`
       * 
       * Container background indicating AI-generated content
       */
      "default": "--cnvs-sys-color-surface-ai-default",
      /**
       * **value**: `{base.palette.blue.A200}`
       * 
       * **CSS Var**: `--cnvs-sys-color-surface-ai-hover`
       * 
       * Hover state for AI-generated content containers
       */
      "hover": "--cnvs-sys-color-surface-ai-hover",
      /**
       * **value**: `{base.palette.blue.400}`
       * 
       * **CSS Var**: `--cnvs-sys-color-surface-ai-pressed`
       * 
       * Pressed state for AI-generated content containers
       */
      "pressed": "--cnvs-sys-color-surface-ai-pressed",
    },
    /**
     * **value**: `{base.palette.neutral.A0}`
     * 
     * **CSS Var**: `--cnvs-sys-color-surface-transparent`
     * 
     * Fully transparent container background
     */
    "transparent": "--cnvs-sys-color-surface-transparent",
    /**
     * **value**: `{base.palette.neutral.0}`
     * 
     * **CSS Var**: `--cnvs-sys-color-surface-inverse`
     * 
     * Container background for use on dark backgrounds
     */
    "inverse": "--cnvs-sys-color-surface-inverse",
    "contrast": {
      /**
       * **value**: `{base.palette.neutral.A900}`
       * 
       * **CSS Var**: `--cnvs-sys-color-surface-contrast-default`
       * 
       * High contrast dark container background
       */
      "default": "--cnvs-sys-color-surface-contrast-default",
      /**
       * **value**: `{base.palette.neutral.A950}`
       * 
       * **CSS Var**: `--cnvs-sys-color-surface-contrast-strong`
       * 
       * Stronger high contrast dark container background
       */
      "strong": "--cnvs-sys-color-surface-contrast-strong",
    },
    "overlay": {
      "hover": {
        /**
         * **value**: `{base.palette.slate.A50}`
         * 
         * **CSS Var**: `--cnvs-sys-color-surface-overlay-hover-default`
         * 
         * Hover state overlay for interactive containers
         */
        "default": "--cnvs-sys-color-surface-overlay-hover-default",
        /**
         * **value**: `{base.palette.white.A200}`
         * 
         * **CSS Var**: `--cnvs-sys-color-surface-overlay-hover-inverse`
         * 
         * Hover overlay for containers on dark backgrounds
         */
        "inverse": "--cnvs-sys-color-surface-overlay-hover-inverse",
      },
      /**
       * **value**: `{base.palette.slate.500}`
       * 
       * **CSS Var**: `--cnvs-sys-color-surface-overlay-mixin`
       * 
       * Pressed state overlay for interactive containers
       */
      "mixin": "--cnvs-sys-color-surface-overlay-mixin",
      "pressed": {
        /**
         * **value**: `{base.palette.slate.A100}`
         * 
         * **CSS Var**: `--cnvs-sys-color-surface-overlay-pressed-default`
         * 
         * Pressed state overlay for interactive containers
         */
        "default": "--cnvs-sys-color-surface-overlay-pressed-default",
        /**
         * **value**: `{base.palette.white.A300}`
         * 
         * **CSS Var**: `--cnvs-sys-color-surface-overlay-pressed-inverse`
         * 
         * Pressed overlay for containers on dark backgrounds
         */
        "inverse": "--cnvs-sys-color-surface-overlay-pressed-inverse",
      },
      /**
       * **value**: `{base.palette.neutral.A400}`
       * 
       * **CSS Var**: `--cnvs-sys-color-surface-overlay-scrim`
       */
      "scrim": "--cnvs-sys-color-surface-overlay-scrim",
    },
  },
  "accent": {
    /**
     * **value**: `{base.palette.blue.950}`
     * 
     * **CSS Var**: `--cnvs-sys-color-accent-ai`
     * 
     * Dark accent indicating AI-generated content
     */
    "ai": "--cnvs-sys-color-accent-ai",
    /**
     * **value**: `{base.palette.blue.600}`
     * 
     * **CSS Var**: `--cnvs-sys-color-accent-info`
     * 
     * Solid info accent for indicators (not tenant themeable)
     */
    "info": "--cnvs-sys-color-accent-info",
    /**
     * **value**: `{base.palette.red.600}`
     * 
     * **CSS Var**: `--cnvs-sys-color-accent-danger`
     * 
     * Solid danger accent for error indicators (not tenant themeable)
     */
    "danger": "--cnvs-sys-color-accent-danger",
    /**
     * **value**: `{base.palette.amber.400}`
     * 
     * **CSS Var**: `--cnvs-sys-color-accent-warning`
     * 
     * Solid warning accent for caution indicators (not tenant themeable)
     */
    "warning": "--cnvs-sys-color-accent-warning",
    /**
     * **value**: `{base.palette.green.600}`
     * 
     * **CSS Var**: `--cnvs-sys-color-accent-success`
     * 
     * Solid success accent for positive indicators (not tenant themeable)
     */
    "success": "--cnvs-sys-color-accent-success",
    /**
     * **value**: `{base.palette.neutral.A900}`
     * 
     * **CSS Var**: `--cnvs-sys-color-accent-contrast`
     * 
     * High contrast accent for maximum visibility
     */
    "contrast": "--cnvs-sys-color-accent-contrast",
    "muted": {
      /**
       * **value**: `{base.palette.slate.600}`
       * 
       * **CSS Var**: `--cnvs-sys-color-accent-muted-default`
       * 
       * Muted accent for secondary visual elements
       */
      "default": "--cnvs-sys-color-accent-muted-default",
      /**
       * **value**: `{base.palette.slate.400}`
       * 
       * **CSS Var**: `--cnvs-sys-color-accent-muted-soft`
       * 
       * Softer muted accent for tertiary elements
       */
      "soft": "--cnvs-sys-color-accent-muted-soft",
    },
    "overlay": {
      /**
       * **value**: `{base.palette.neutral.A200}`
       * 
       * **CSS Var**: `--cnvs-sys-color-accent-overlay-hover`
       * 
       * Hover overlay for accent-colored elements
       */
      "hover": "--cnvs-sys-color-accent-overlay-hover",
      /**
       * **value**: `{base.palette.neutral.A400}`
       * 
       * **CSS Var**: `--cnvs-sys-color-accent-overlay-pressed`
       * 
       * Pressed overlay for accent-colored elements
       */
      "pressed": "--cnvs-sys-color-accent-overlay-pressed",
      /**
       * **value**: `{base.palette.neutral.1000}`
       * 
       * **CSS Var**: `--cnvs-sys-color-accent-overlay-mixin`
       * 
       * Pressed overlay mixin color for accent-colored elements
       */
      "mixin": "--cnvs-sys-color-accent-overlay-mixin",
    },
  },
  "brand": {
    "focus": {
      /**
       * **value**: `{brand.primary.500}`
       * 
       * **CSS Var**: `--cnvs-sys-color-brand-focus-primary`
       * 
       * Tenant-themeable focus ring for interactive elements
       */
      "primary": "--cnvs-sys-color-brand-focus-primary",
      /**
       * **value**: `{brand.critical.500}`
       * 
       * **CSS Var**: `--cnvs-sys-color-brand-focus-critical`
       * 
       * Tenant-themeable focus ring for error-state elements
       */
      "critical": "--cnvs-sys-color-brand-focus-critical",
      "caution": {
        /**
         * **value**: `{brand.caution.500}`
         * 
         * **CSS Var**: `--cnvs-sys-color-brand-focus-caution-outer`
         * 
         * Tenant-themeable outer focus ring for caution-state elements
         */
        "outer": "--cnvs-sys-color-brand-focus-caution-outer",
        /**
         * **value**: `{brand.caution.400}`
         * 
         * **CSS Var**: `--cnvs-sys-color-brand-focus-caution-inner`
         * 
         * Tenant-themeable inner focus ring for caution-state elements
         */
        "inner": "--cnvs-sys-color-brand-focus-caution-inner",
      },
    },
    "surface": {
      "primary": {
        /**
         * **value**: `{brand.primary.A25}`
         * 
         * **CSS Var**: `--cnvs-sys-color-brand-surface-primary-default`
         * 
         * Tenant-themeable primary container background
         */
        "default": "--cnvs-sys-color-brand-surface-primary-default",
        /**
         * **value**: `{brand.primary.A50}`
         * 
         * **CSS Var**: `--cnvs-sys-color-brand-surface-primary-strong`
         * 
         * Stronger tenant-themeable primary container background
         */
        "strong": "--cnvs-sys-color-brand-surface-primary-strong",
      },
      "critical": {
        /**
         * **value**: `{brand.critical.A25}`
         * 
         * **CSS Var**: `--cnvs-sys-color-brand-surface-critical-default`
         * 
         * Tenant-themeable critical/error container background
         */
        "default": "--cnvs-sys-color-brand-surface-critical-default",
        /**
         * **value**: `{brand.critical.A50}`
         * 
         * **CSS Var**: `--cnvs-sys-color-brand-surface-critical-strong`
         * 
         * Stronger tenant-themeable critical container background
         */
        "strong": "--cnvs-sys-color-brand-surface-critical-strong",
      },
      "caution": {
        /**
         * **value**: `{brand.caution.A25}`
         * 
         * **CSS Var**: `--cnvs-sys-color-brand-surface-caution-default`
         * 
         * Tenant-themeable caution/warning container background
         */
        "default": "--cnvs-sys-color-brand-surface-caution-default",
        /**
         * **value**: `{brand.caution.A50}`
         * 
         * **CSS Var**: `--cnvs-sys-color-brand-surface-caution-strong`
         * 
         * Stronger tenant-themeable caution container background
         */
        "strong": "--cnvs-sys-color-brand-surface-caution-strong",
      },
      "positive": {
        /**
         * **value**: `{brand.positive.A25}`
         * 
         * **CSS Var**: `--cnvs-sys-color-brand-surface-positive-default`
         * 
         * Tenant-themeable positive/success container background
         */
        "default": "--cnvs-sys-color-brand-surface-positive-default",
        /**
         * **value**: `{brand.positive.A50}`
         * 
         * **CSS Var**: `--cnvs-sys-color-brand-surface-positive-strong`
         * 
         * Stronger tenant-themeable positive container background
         */
        "strong": "--cnvs-sys-color-brand-surface-positive-strong",
      },
      /**
       * **value**: `{brand.primary.A50}`
       * 
       * **CSS Var**: `--cnvs-sys-color-brand-surface-selected`
       * 
       * Tenant-themeable background for selected items
       */
      "selected": "--cnvs-sys-color-brand-surface-selected",
    },
    "accent": {
      /**
       * **value**: `{brand.primary.600}`
       * 
       * **CSS Var**: `--cnvs-sys-color-brand-accent-primary`
       * 
       * Tenant-themeable solid primary accent for buttons and key actions
       */
      "primary": "--cnvs-sys-color-brand-accent-primary",
      /**
       * **value**: `{brand.critical.600}`
       * 
       * **CSS Var**: `--cnvs-sys-color-brand-accent-critical`
       * 
       * Tenant-themeable solid critical accent for destructive actions
       */
      "critical": "--cnvs-sys-color-brand-accent-critical",
      /**
       * **value**: `{brand.caution.400}`
       * 
       * **CSS Var**: `--cnvs-sys-color-brand-accent-caution`
       * 
       * Tenant-themeable solid caution accent
       */
      "caution": "--cnvs-sys-color-brand-accent-caution",
      /**
       * **value**: `{brand.positive.600}`
       * 
       * **CSS Var**: `--cnvs-sys-color-brand-accent-positive`
       * 
       * Tenant-themeable solid positive accent
       */
      "positive": "--cnvs-sys-color-brand-accent-positive",
      /**
       * **value**: `{brand.primary.600}`
       * 
       * **CSS Var**: `--cnvs-sys-color-brand-accent-action`
       */
      "action": "--cnvs-sys-color-brand-accent-action",
    },
    "fg": {
      "primary": {
        /**
         * **value**: `{brand.primary.600}`
         * 
         * **CSS Var**: `--cnvs-sys-color-brand-fg-primary-default`
         * 
         * Tenant-themeable primary text and icon color
         */
        "default": "--cnvs-sys-color-brand-fg-primary-default",
        /**
         * **value**: `{brand.primary.700}`
         * 
         * **CSS Var**: `--cnvs-sys-color-brand-fg-primary-strong`
         * 
         * Stronger tenant-themeable primary text and icon color
         */
        "strong": "--cnvs-sys-color-brand-fg-primary-strong",
      },
      "critical": {
        /**
         * **value**: `{brand.critical.600}`
         * 
         * **CSS Var**: `--cnvs-sys-color-brand-fg-critical-default`
         * 
         * Tenant-themeable critical text and icon color
         */
        "default": "--cnvs-sys-color-brand-fg-critical-default",
        /**
         * **value**: `{brand.critical.700}`
         * 
         * **CSS Var**: `--cnvs-sys-color-brand-fg-critical-strong`
         * 
         * Stronger tenant-themeable critical text and icon color
         */
        "strong": "--cnvs-sys-color-brand-fg-critical-strong",
      },
      "caution": {
        /**
         * **value**: `{brand.caution.600}`
         * 
         * **CSS Var**: `--cnvs-sys-color-brand-fg-caution-default`
         * 
         * Tenant-themeable caution text and icon color
         */
        "default": "--cnvs-sys-color-brand-fg-caution-default",
        /**
         * **value**: `{brand.caution.700}`
         * 
         * **CSS Var**: `--cnvs-sys-color-brand-fg-caution-strong`
         * 
         * Stronger tenant-themeable caution text and icon color
         */
        "strong": "--cnvs-sys-color-brand-fg-caution-strong",
      },
      "positive": {
        /**
         * **value**: `{brand.positive.600}`
         * 
         * **CSS Var**: `--cnvs-sys-color-brand-fg-positive-default`
         * 
         * Tenant-themeable positive text and icon color
         */
        "default": "--cnvs-sys-color-brand-fg-positive-default",
        /**
         * **value**: `{brand.positive.700}`
         * 
         * **CSS Var**: `--cnvs-sys-color-brand-fg-positive-strong`
         * 
         * Stronger tenant-themeable positive text and icon color
         */
        "strong": "--cnvs-sys-color-brand-fg-positive-strong",
      },
      /**
       * **value**: `{brand.primary.700}`
       * 
       * **CSS Var**: `--cnvs-sys-color-brand-fg-selected`
       * 
       * Tenant-themeable text color for selected items
       */
      "selected": "--cnvs-sys-color-brand-fg-selected",
    },
    "border": {
      /**
       * **value**: `{brand.primary.500}`
       * 
       * **CSS Var**: `--cnvs-sys-color-brand-border-primary`
       * 
       * Tenant-themeable primary border for focused inputs
       */
      "primary": "--cnvs-sys-color-brand-border-primary",
      /**
       * **value**: `{brand.critical.500}`
       * 
       * **CSS Var**: `--cnvs-sys-color-brand-border-critical`
       * 
       * Tenant-themeable critical border for error states
       */
      "critical": "--cnvs-sys-color-brand-border-critical",
      /**
       * **value**: `{brand.caution.500}`
       * 
       * **CSS Var**: `--cnvs-sys-color-brand-border-caution`
       * 
       * Tenant-themeable caution border for warning states
       */
      "caution": "--cnvs-sys-color-brand-border-caution",
    },
  },
  "focus": {
    /**
     * **value**: `{base.palette.neutral.0}`
     * 
     * **CSS Var**: `--cnvs-sys-color-focus-inverse`
     * 
     * Focus ring for use on dark backgrounds
     */
    "inverse": "--cnvs-sys-color-focus-inverse",
    /**
     * **value**: `{base.palette.neutral.A900}`
     * 
     * **CSS Var**: `--cnvs-sys-color-focus-contrast`
     * 
     * High contrast focus ring for accessibility
     */
    "contrast": "--cnvs-sys-color-focus-contrast",
  },
};

export declare const depth: {
  /**0 0.0625rem 0.25rem 0 oklch(0.3057 0.079 256.22 / 0.13), 0 0.125rem 0.5rem 0 oklch(0.3337 0.0688 250.79 / 0.09)
   * 
   * **CSS Var**: `--cnvs-sys-depth-1`
   * 
   * Standard card depth
   */
  "1": "--cnvs-sys-depth-1",
  /**0 0.125rem 0.5rem 0 oklch(0.3057 0.079 256.22 / 0.13), 0 0.25rem 1rem 0 oklch(0.3337 0.0688 250.79 / 0.09)
   * 
   * **CSS Var**: `--cnvs-sys-depth-2`
   * 
   * Top navigation, Bottom Navigation
   */
  "2": "--cnvs-sys-depth-2",
  /**0 0.1875rem 0.75rem 0 oklch(0.3057 0.079 256.22 / 0.13), 0 0.375rem 1.5rem 0 oklch(0.3337 0.0688 250.79 / 0.09)
   * 
   * **CSS Var**: `--cnvs-sys-depth-3`
   * 
   * Floating Action Buttons (FAB), Menus
   */
  "3": "--cnvs-sys-depth-3",
  /**0 0.25rem 1rem 0 oklch(0.3057 0.079 256.22 / 0.13), 0 0.5rem 2rem 0 oklch(0.3337 0.0688 250.79 / 0.09)
   * 
   * **CSS Var**: `--cnvs-sys-depth-4`
   * 
   * Bottom Sheets
   */
  "4": "--cnvs-sys-depth-4",
  /**0 0.3125rem 1.25rem 0 oklch(0.3057 0.079 256.22 / 0.13), 0 0.625rem 2.5rem 0 oklch(0.3337 0.0688 250.79 / 0.09)
   * 
   * **CSS Var**: `--cnvs-sys-depth-5`
   * 
   * Banners, Snackbars, Toast Messages, Non modal Dialogs, 
   * Side Panels (when opacity overlay behaviour is not applied)
   */
  "5": "--cnvs-sys-depth-5",
  /**0 0.375rem 1.5rem 0 oklch(0.3057 0.079 256.22 / 0.13), 0 0.75rem 3rem 0 oklch(0.3337 0.0688 250.79 / 0.09)
   * 
   * **CSS Var**: `--cnvs-sys-depth-6`
   * 
   * Modal Dialogs, Side Panels (when opacity overlay behaviour
   * is applied)
   */
  "6": "--cnvs-sys-depth-6",
};

export declare const motion: {
  "easing": {
    "quick": {
      /**
       * **value**: `{base.easing.a-100}`
       * 
       * **CSS Var**: `--cnvs-sys-motion-easing-quick-standard`
       */
      "standard": "--cnvs-sys-motion-easing-quick-standard",
      /**
       * **value**: `{base.easing.a-200}`
       * 
       * **CSS Var**: `--cnvs-sys-motion-easing-quick-acceleration`
       */
      "acceleration": "--cnvs-sys-motion-easing-quick-acceleration",
      /**
       * **value**: `{base.easing.a-300}`
       * 
       * **CSS Var**: `--cnvs-sys-motion-easing-quick-deceleration`
       */
      "deceleration": "--cnvs-sys-motion-easing-quick-deceleration",
    },
    "purposeful": {
      /**
       * **value**: `{base.easing.b-100}`
       * 
       * **CSS Var**: `--cnvs-sys-motion-easing-purposeful-standard`
       */
      "standard": "--cnvs-sys-motion-easing-purposeful-standard",
      /**
       * **value**: `{base.easing.b-200}`
       * 
       * **CSS Var**: `--cnvs-sys-motion-easing-purposeful-acceleration`
       */
      "acceleration": "--cnvs-sys-motion-easing-purposeful-acceleration",
      /**
       * **value**: `{base.easing.b-300}`
       * 
       * **CSS Var**: `--cnvs-sys-motion-easing-purposeful-deceleration`
       */
      "deceleration": "--cnvs-sys-motion-easing-purposeful-deceleration",
    },
  },
};

export declare const opacity: {
  /**
   * **value**: `{base.opacity.0}`
   * 
   * **CSS Var**: `--cnvs-sys-opacity-zero`
   * 
   * Dev only
   */
  "zero": "--cnvs-sys-opacity-zero",
  /**
   * **value**: `{base.opacity.400}` (0.4rem | 6.4px)
   * 
   * **CSS Var**: `--cnvs-sys-opacity-disabled`
   * 
   * Disabled states
   */
  "disabled": "--cnvs-sys-opacity-disabled",
  /**
   * **value**: `{base.opacity.640}` (0.64rem | 10.24px)
   * 
   * **CSS Var**: `--cnvs-sys-opacity-overlay`
   * 
   * Overlay
   */
  "overlay": "--cnvs-sys-opacity-overlay",
  /**
   * **value**: `{base.opacity.840}` (0.84rem | 13.44px)
   * 
   * **CSS Var**: `--cnvs-sys-opacity-contrast`
   * 
   * Tooltips, Status Indicator
   */
  "contrast": "--cnvs-sys-opacity-contrast",
  /**
   * **value**: `1` (1rem | 16px)
   * 
   * **CSS Var**: `--cnvs-sys-opacity-full`
   * 
   * Dev only
   */
  "full": "--cnvs-sys-opacity-full",
  "shadow": {
    /**
     * **value**: `{base.opacity.120}` (0.12rem | 1.92px)
     * 
     * **CSS Var**: `--cnvs-sys-opacity-shadow-first`
     * 
     * Alpha on first shadow
     */
    "first": "--cnvs-sys-opacity-shadow-first",
    /**
     * **value**: `{base.opacity.80}` (0.08rem | 1.28px)
     * 
     * **CSS Var**: `--cnvs-sys-opacity-shadow-second`
     * 
     * Alpha on second shadow
     */
    "second": "--cnvs-sys-opacity-shadow-second",
  },
  "surface": {
    /**
     * **value**: `{base.opacity.100}` (0.08rem | 1.28px)
     * 
     * **CSS Var**: `--cnvs-sys-opacity-surface-hover`
     * 
     * State layer applied to surface colors on hover
     */
    "hover": "--cnvs-sys-opacity-surface-hover",
    /**
     * **value**: `{base.opacity.180}` (0.18rem | 2.88px)
     * 
     * **CSS Var**: `--cnvs-sys-opacity-surface-pressed`
     * 
     * State layer applied to surface colors while pressing
     */
    "pressed": "--cnvs-sys-opacity-surface-pressed",
  },
  "accent": {
    /**
     * **value**: `{base.opacity.180}` (0.18rem | 2.88px)
     * 
     * **CSS Var**: `--cnvs-sys-opacity-accent-hover`
     * 
     * State layer applied to accent colors on hover
     */
    "hover": "--cnvs-sys-opacity-accent-hover",
    /**
     * **value**: `{base.opacity.360}` (0.36rem | 5.76px)
     * 
     * **CSS Var**: `--cnvs-sys-opacity-accent-pressed`
     * 
     * State layer applied to accent colors while pressing
     */
    "pressed": "--cnvs-sys-opacity-accent-pressed",
  },
};

export declare const size: {
  /**
   * **value**: `{base.size.200}` (1rem | 16px)
   * 
   * **CSS Var**: `--cnvs-sys-size-xxxs`
   * 
   * Used for switch toggle.
   */
  "xxxs": "--cnvs-sys-size-xxxs",
  /**
   * **value**: `{base.size.250}` (1.25rem | 20px)
   * 
   * **CSS Var**: `--cnvs-sys-size-xxs`
   * 
   * Compact indicators. Used for status indicators and count badges.
   */
  "xxs": "--cnvs-sys-size-xxs",
  /**
   * **value**: `{base.size.300}` (1.5rem | 24px)
   * 
   * **CSS Var**: `--cnvs-sys-size-xs`
   * 
   * Compact interactive elements. Used for small buttons, pills, checkboxes, and radio buttons.
   */
  "xs": "--cnvs-sys-size-xs",
  /**
   * **value**: `{base.size.400}` (2rem | 32px)
   * 
   * **CSS Var**: `--cnvs-sys-size-sm`
   * 
   * Standard interactive components. Used for buttons, segmented controls, tooltips, and avatars.
   */
  "sm": "--cnvs-sys-size-sm",
  /**
   * **value**: `{base.size.500}` (2.5rem | 40px)
   * 
   * **CSS Var**: `--cnvs-sys-size-md`
   * 
   * Default size for most components. Used for buttons, segmented controls, banners, input fields, and menu items.
   */
  "md": "--cnvs-sys-size-md",
  /**
   * **value**: `{base.size.600}` (3rem | 48px)
   * 
   * **CSS Var**: `--cnvs-sys-size-lg`
   * 
   * Prominent components. Used for large buttons, segmented controls, expandable triggers, tabs, and avatars.
   */
  "lg": "--cnvs-sys-size-lg",
  /**
   * **value**: `{base.size.700}` (3.5rem | 56px)
   * 
   * **CSS Var**: `--cnvs-sys-size-xl`
   * 
   * Content containers. Used for table cells and toasts.
   */
  "xl": "--cnvs-sys-size-xl",
  /**
   * **value**: `{base.size.800}` (4rem | 64px)
   * 
   * **CSS Var**: `--cnvs-sys-size-xxl`
   * 
   * Expandable containers. Used for expandable containers in their collapsed state.
   */
  "xxl": "--cnvs-sys-size-xxl",
};

export declare const padding: {
  /**
   * **value**: `{base.size.0}`
   * 
   * **CSS Var**: `--cnvs-sys-padding-none`
   * 
   * Use when there should be no space between content and element's edges.
   */
  "none": "--cnvs-sys-padding-none",
  /**
   * **value**: `{base.size.50}` (0.25rem | 4px)
   * 
   * **CSS Var**: `--cnvs-sys-padding-xxs`
   */
  "xxs": "--cnvs-sys-padding-xxs",
  /**
   * **value**: `{base.size.100}` (0.5rem | 8px)
   * 
   * **CSS Var**: `--cnvs-sys-padding-xs`
   * 
   * Horizontal padding on Input Fields
   */
  "xs": "--cnvs-sys-padding-xs",
  /**
   * **value**: `{base.size.150}` (0.75rem | 12px)
   * 
   * **CSS Var**: `--cnvs-sys-padding-sm`
   * 
   * Compact padding, used in Rich Text Editor, or X-Small Buttons
   */
  "sm": "--cnvs-sys-padding-sm",
  /**
   * **value**: `{base.size.200}` (1rem | 16px)
   * 
   * **CSS Var**: `--cnvs-sys-padding-md`
   * 
   * Default padding used for components used around Small Button content.
   */
  "md": "--cnvs-sys-padding-md",
  /**
   * **value**: `{base.size.250}` (1.25rem | 20px)
   * 
   * **CSS Var**: `--cnvs-sys-padding-lg`
   * 
   * Large padding, used in Medium Buttons with Icons
   */
  "lg": "--cnvs-sys-padding-lg",
  /**
   * **value**: `{base.size.300}` (1.5rem | 24px)
   * 
   * **CSS Var**: `--cnvs-sys-padding-xl`
   * 
   * Padding used around Card and Medium Button content
   */
  "xl": "--cnvs-sys-padding-xl",
  /**
   * **value**: `{base.size.400}` (2rem | 32px)
   * 
   * **CSS Var**: `--cnvs-sys-padding-xxl`
   * 
   * Padding used around Modal and Large Button content
   */
  "xxl": "--cnvs-sys-padding-xxl",
};

export declare const gap: {
  /**
   * **value**: `{base.size.0}`
   * 
   * **CSS Var**: `--cnvs-sys-gap-none`
   * 
   * Use when there is no space between elements
   */
  "none": "--cnvs-sys-gap-none",
  /**
   * **value**: `{base.size.50}` (0.25rem | 4px)
   * 
   * **CSS Var**: `--cnvs-sys-gap-xs`
   * 
   * Compact spacing from icon to text, labels to inputs, between tab items.
   */
  "xs": "--cnvs-sys-gap-xs",
  /**
   * **value**: `{base.size.100}` (0.5rem | 8px)
   * 
   * **CSS Var**: `--cnvs-sys-gap-sm`
   * 
   * Horizontal space between pills, tighter space between buttons, inline icon to text, segmented controls.
   */
  "sm": "--cnvs-sys-gap-sm",
  /**
   * **value**: `{base.size.200}` (1rem | 16px)
   * 
   * **CSS Var**: `--cnvs-sys-gap-md`
   * 
   * Use the default inline spacing when other gap tokens may not fit.
   */
  "md": "--cnvs-sys-gap-md",
  /**
   * **value**: `{base.size.300}` (1.5rem | 24px)
   * 
   * **CSS Var**: `--cnvs-sys-gap-lg`
   * 
   * Use this for tighter spacing between cards. Cards are self contained blocks of content.
   */
  "lg": "--cnvs-sys-gap-lg",
  /**
   * **value**: `{base.size.400}` (2rem | 32px)
   * 
   * **CSS Var**: `--cnvs-sys-gap-xl`
   * 
   * Use this for the default spacing between cards, as well as the gutter width used in the large 12-column grid.
   */
  "xl": "--cnvs-sys-gap-xl",
  /**
   * **value**: `{base.size.800}` (4rem | 64px)
   * 
   * **CSS Var**: `--cnvs-sys-gap-xxl`
   * 
   * Use this for the space between content sections
   */
  "xxl": "--cnvs-sys-gap-xxl",
};

export declare const fontFamily: {
  /**
   * **value**: `{base.font-family.50}`
   * 
   * **CSS Var**: `--cnvs-sys-font-family-default`
   */
  "default": "--cnvs-sys-font-family-default",
  /**
   * **value**: `{base.font-family.100}`
   * 
   * **CSS Var**: `--cnvs-sys-font-family-mono`
   */
  "mono": "--cnvs-sys-font-family-mono",
  /**
   * **value**: `{base.font-family.200}`
   * 
   * **CSS Var**: `--cnvs-sys-font-family-global`
   */
  "global": "--cnvs-sys-font-family-global",
};

export declare const letterSpacing: {
  "subtext": {
    /**
     * **value**: `{base.letter-spacing.50}`
     * 
     * **CSS Var**: `--cnvs-sys-letter-spacing-subtext-sm`
     */
    "sm": "--cnvs-sys-letter-spacing-subtext-sm",
    /**
     * **value**: `{base.letter-spacing.100}`
     * 
     * **CSS Var**: `--cnvs-sys-letter-spacing-subtext-md`
     */
    "md": "--cnvs-sys-letter-spacing-subtext-md",
    /**
     * **value**: `{base.letter-spacing.150}`
     * 
     * **CSS Var**: `--cnvs-sys-letter-spacing-subtext-lg`
     */
    "lg": "--cnvs-sys-letter-spacing-subtext-lg",
  },
  "body": {
    /**
     * **value**: `{base.letter-spacing.200}`
     * 
     * **CSS Var**: `--cnvs-sys-letter-spacing-body-sm`
     */
    "sm": "--cnvs-sys-letter-spacing-body-sm",
  },
};

export declare const fontWeight: {
  /**
   * **value**: `{base.font-weight.300}`
   * 
   * **CSS Var**: `--cnvs-sys-font-weight-light`
   */
  "light": "--cnvs-sys-font-weight-light",
  /**
   * **value**: `{base.font-weight.400}`
   * 
   * **CSS Var**: `--cnvs-sys-font-weight-normal`
   */
  "normal": "--cnvs-sys-font-weight-normal",
  /**
   * **value**: `{base.font-weight.500}`
   * 
   * **CSS Var**: `--cnvs-sys-font-weight-medium`
   */
  "medium": "--cnvs-sys-font-weight-medium",
  /**
   * **value**: `{base.font-weight.700}`
   * 
   * **CSS Var**: `--cnvs-sys-font-weight-bold`
   */
  "bold": "--cnvs-sys-font-weight-bold",
};

/**
 * Temporary legacy object including fallback values to older versions of the tokens
 * for internal use only, will be removed in the future
 *
 * @deprecated The legacy tokens utility object will be removed in a future major version.
 */
export declare const legacy: {
  "breakpoints": {
    "sm": "var(--cnvs-sys-breakpoints-sm, var(--cnvs-sys-breakpoints-s, 320px))",
    "md": "var(--cnvs-sys-breakpoints-md, var(--cnvs-sys-breakpoints-m, 768px))",
    "lg": "var(--cnvs-sys-breakpoints-lg, var(--cnvs-sys-breakpoints-l, 1024px))"
  },
  "shape": {
    "none": "var(--cnvs-sys-shape-none, var(--cnvs-sys-shape-zero, 0))",
    "sm": "var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem))",
    "md": "var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem))",
    "lg": "var(--cnvs-sys-shape-lg, 0.75rem)",
    "xl": "var(--cnvs-sys-shape-xl, var(--cnvs-sys-shape-x4, 1rem))",
    "xxl": "var(--cnvs-sys-shape-xxl, var(--cnvs-sys-shape-x6, 1.5rem))",
    "xxxl": "var(--cnvs-sys-shape-xxxl, 2rem)",
    "full": "var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem))"
  },
  "fontSize": {
    "subtext": {
      "sm": "var(--cnvs-sys-font-size-subtext-sm, var(--cnvs-sys-font-size-subtext-small, 0.625rem))",
      "md": "var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium, 0.75rem))",
      "lg": "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem))"
    },
    "body": {
      "sm": "var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small, 1rem))",
      "md": "var(--cnvs-sys-font-size-body-md, var(--cnvs-sys-font-size-body-medium, 1.125rem))",
      "lg": "var(--cnvs-sys-font-size-body-lg, var(--cnvs-sys-font-size-body-large, 1.25rem))"
    },
    "heading": {
      "sm": "var(--cnvs-sys-font-size-heading-sm, var(--cnvs-sys-font-size-heading-small, 1.5rem))",
      "md": "var(--cnvs-sys-font-size-heading-md, var(--cnvs-sys-font-size-heading-medium, 1.75rem))",
      "lg": "var(--cnvs-sys-font-size-heading-lg, var(--cnvs-sys-font-size-heading-large, 2rem))"
    },
    "title": {
      "sm": "var(--cnvs-sys-font-size-title-sm, var(--cnvs-sys-font-size-title-small, 2.5rem))",
      "md": "var(--cnvs-sys-font-size-title-md, var(--cnvs-sys-font-size-title-medium, 3rem))",
      "lg": "var(--cnvs-sys-font-size-title-lg, var(--cnvs-sys-font-size-title-large, 3.5rem))"
    }
  },
  "lineHeight": {
    "subtext": {
      "sm": "var(--cnvs-sys-line-height-subtext-sm, var(--cnvs-sys-line-height-subtext-small, 1rem))",
      "md": "var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium, 1rem))",
      "lg": "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem))"
    },
    "body": {
      "sm": "var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small, 1.5rem))",
      "md": "var(--cnvs-sys-line-height-body-md, var(--cnvs-sys-line-height-body-medium, 1.75rem))",
      "lg": "var(--cnvs-sys-line-height-body-lg, var(--cnvs-sys-line-height-body-large, 1.75rem))"
    },
    "heading": {
      "sm": "var(--cnvs-sys-line-height-heading-sm, var(--cnvs-sys-line-height-heading-small, 2rem))",
      "md": "var(--cnvs-sys-line-height-heading-md, var(--cnvs-sys-line-height-heading-medium, 2.25rem))",
      "lg": "var(--cnvs-sys-line-height-heading-lg, var(--cnvs-sys-line-height-heading-large, 2.5rem))"
    },
    "title": {
      "sm": "var(--cnvs-sys-line-height-title-sm, var(--cnvs-sys-line-height-title-small, 3rem))",
      "md": "var(--cnvs-sys-line-height-title-md, var(--cnvs-sys-line-height-title-medium, 3.5rem))",
      "lg": "var(--cnvs-sys-line-height-title-lg, var(--cnvs-sys-line-height-title-large, 4rem))"
    }
  },
  "type": {
    "subtext": {
      "sm": {
        "fontFamily": "var(--cnvs-sys-font-family-default, \"Roboto\")",
        "fontWeight": "var(--cnvs-sys-font-weight-normal, 400)",
        "lineHeight": "var(--cnvs-sys-line-height-subtext-sm, 1rem)",
        "fontSize": "var(--cnvs-sys-font-size-subtext-sm, 0.625rem)",
        "letterSpacing": "var(--cnvs-sys-letter-spacing-subtext-sm, 0.025rem)"
      },
      "md": {
        "fontFamily": "var(--cnvs-sys-font-family-default, \"Roboto\")",
        "fontWeight": "var(--cnvs-sys-font-weight-normal, 400)",
        "lineHeight": "var(--cnvs-sys-line-height-subtext-md, 1rem)",
        "fontSize": "var(--cnvs-sys-font-size-subtext-md, 0.75rem)",
        "letterSpacing": "var(--cnvs-sys-letter-spacing-subtext-md, 0.02rem)"
      },
      "lg": {
        "fontFamily": "var(--cnvs-sys-font-family-default, \"Roboto\")",
        "fontWeight": "var(--cnvs-sys-font-weight-normal, 400)",
        "lineHeight": "var(--cnvs-sys-line-height-subtext-lg, 1.25rem)",
        "fontSize": "var(--cnvs-sys-font-size-subtext-lg, 0.875rem)",
        "letterSpacing": "var(--cnvs-sys-letter-spacing-subtext-lg, 0.015rem)"
      }
    },
    "body": {
      "sm": {
        "fontFamily": "var(--cnvs-sys-font-family-default, \"Roboto\")",
        "fontWeight": "var(--cnvs-sys-font-weight-normal, 400)",
        "lineHeight": "var(--cnvs-sys-line-height-body-sm, 1.5rem)",
        "fontSize": "var(--cnvs-sys-font-size-body-sm, 1rem)",
        "letterSpacing": "var(--cnvs-sys-letter-spacing-body-sm, 0.01rem)"
      },
      "md": {
        "fontFamily": "var(--cnvs-sys-font-family-default, \"Roboto\")",
        "fontWeight": "var(--cnvs-sys-font-weight-normal, 400)",
        "lineHeight": "var(--cnvs-sys-line-height-body-md, 1.75rem)",
        "fontSize": "var(--cnvs-sys-font-size-body-md, 1.125rem)"
      },
      "lg": {
        "fontFamily": "var(--cnvs-sys-font-family-default, \"Roboto\")",
        "fontWeight": "var(--cnvs-sys-font-weight-normal, 400)",
        "lineHeight": "var(--cnvs-sys-line-height-body-lg, 1.75rem)",
        "fontSize": "var(--cnvs-sys-font-size-body-lg, 1.25rem)"
      }
    },
    "heading": {
      "sm": {
        "fontFamily": "var(--cnvs-sys-font-family-default, \"Roboto\")",
        "fontWeight": "var(--cnvs-sys-font-weight-bold, 700)",
        "lineHeight": "var(--cnvs-sys-line-height-heading-sm, 2rem)",
        "fontSize": "var(--cnvs-sys-font-size-heading-sm, 1.5rem)"
      },
      "md": {
        "fontFamily": "var(--cnvs-sys-font-family-default, \"Roboto\")",
        "fontWeight": "var(--cnvs-sys-font-weight-bold, 700)",
        "lineHeight": "var(--cnvs-sys-line-height-heading-md, 2.25rem)",
        "fontSize": "var(--cnvs-sys-font-size-heading-md, 1.75rem)"
      },
      "lg": {
        "fontFamily": "var(--cnvs-sys-font-family-default, \"Roboto\")",
        "fontWeight": "var(--cnvs-sys-font-weight-bold, 700)",
        "lineHeight": "var(--cnvs-sys-line-height-heading-lg, 2.5rem)",
        "fontSize": "var(--cnvs-sys-font-size-heading-lg, 2rem)"
      }
    },
    "title": {
      "sm": {
        "fontFamily": "var(--cnvs-sys-font-family-default, \"Roboto\")",
        "fontWeight": "var(--cnvs-sys-font-weight-bold, 700)",
        "lineHeight": "var(--cnvs-sys-line-height-title-sm, 3rem)",
        "fontSize": "var(--cnvs-sys-font-size-title-sm, 2.5rem)"
      },
      "md": {
        "fontFamily": "var(--cnvs-sys-font-family-default, \"Roboto\")",
        "fontWeight": "var(--cnvs-sys-font-weight-bold, 700)",
        "lineHeight": "var(--cnvs-sys-line-height-title-md, 3.5rem)",
        "fontSize": "var(--cnvs-sys-font-size-title-md, 3rem)"
      },
      "lg": {
        "fontFamily": "var(--cnvs-sys-font-family-default, \"Roboto\")",
        "fontWeight": "var(--cnvs-sys-font-weight-bold, 700)",
        "lineHeight": "var(--cnvs-sys-line-height-title-lg, 4rem)",
        "fontSize": "var(--cnvs-sys-font-size-title-lg, 3.5rem)"
      }
    }
  },
  "color": {
    "fg": {
      "info": {
        "default": "var(--cnvs-sys-color-fg-info-default, var(--cnvs-sys-color-fg-primary-default, oklch(0.5198 0.1782 256.11 / 1)))",
        "strong": "var(--cnvs-sys-color-fg-info-strong, var(--cnvs-sys-color-fg-primary-strong, oklch(0.4658 0.1562 255.5 / 1)))"
      },
      "danger": {
        "default": "var(--cnvs-sys-color-fg-danger-default, var(--cnvs-sys-color-fg-critical-default, oklch(0.5342 0.2172 29.53 / 1)))",
        "strong": "var(--cnvs-sys-color-fg-danger-strong, var(--cnvs-sys-color-fg-critical-strong, oklch(0.4517 0.1847 28.2 / 1)))"
      },
      "warning": {
        "default": "var(--cnvs-sys-color-fg-warning-default, oklch(0.5505 0.1439 50.78 / 1))",
        "strong": "var(--cnvs-sys-color-fg-warning-strong, oklch(0.4824 0.1353 46.11 / 1))"
      },
      "success": {
        "default": "var(--cnvs-sys-color-fg-success-default, oklch(0.5069 0.1569 145.56 / 1))",
        "strong": "var(--cnvs-sys-color-fg-success-strong, oklch(0.4463 0.1422 144.58 / 1))"
      }
    },
    "border": {
      "input": {
        "hover": "var(--cnvs-sys-color-border-input-hover, var(--cnvs-sys-color-border-input-strong, oklch(0.1595 0.0431 250.87 / 0.7)))"
      },
      "default": "var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)))",
      "strong": "var(--cnvs-sys-color-border-strong, var(--cnvs-sys-color-border-container, oklch(0.2442 0.0693 257.66 / 0.21)))",
      "info": {
        "default": "var(--cnvs-sys-color-border-info-default, var(--cnvs-sys-color-border-primary-default, oklch(0.6023 0.2032 255.68 / 1)))"
      },
      "danger": "var(--cnvs-sys-color-border-danger, var(--cnvs-sys-color-border-critical-default, oklch(0.6495 0.2369 30.04 / 1)))",
      "warning": "var(--cnvs-sys-color-border-warning, var(--cnvs-sys-color-border-caution-default, oklch(0.7909 0.1711 70.15 / 1)))",
      "inverse": {
        "default": "var(--cnvs-sys-color-border-inverse-default, var(--cnvs-sys-color-border-inverse, oklch(1 0 0 / 1)))",
        "strong": "var(--cnvs-sys-color-border-inverse-strong, oklch(1 0 0 / 0.67))"
      }
    },
    "shadow": {
      "base": "var(--cnvs-sys-color-shadow-base, oklch(0.3057 0.079 256.22 / 0.13))",
      "ambient": "var(--cnvs-sys-color-shadow-ambient, oklch(0.3337 0.0688 250.79 / 0.09))"
    },
    "surface": {
      "default": "var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)))",
      "navigation": "var(--cnvs-sys-color-surface-navigation, oklch(0.9692 0.0035 248.23 / 1))",
      "popover": "var(--cnvs-sys-color-surface-popover, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)))",
      "modal": "var(--cnvs-sys-color-surface-modal, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)))",
      "raised": "var(--cnvs-sys-color-surface-raised, var(--cnvs-sys-color-bg-alt-softer, oklch(0.4688 0.0781 250.43 / 0.03)))",
      "alt": {
        "default": "var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)))",
        "strong": "var(--cnvs-sys-color-surface-alt-strong, var(--cnvs-sys-color-bg-alt-default, oklch(0.3337 0.0688 250.79 / 0.09)))"
      },
      "loading": "var(--cnvs-sys-color-surface-loading, oklch(0.3057 0.079 256.22 / 0.13))",
      "info": {
        "default": "var(--cnvs-sys-color-surface-info-default, var(--cnvs-sys-color-bg-info-softest, oklch(0.6499 0.1912 253.52 / 0.08)))",
        "strong": "var(--cnvs-sys-color-surface-info-strong, var(--cnvs-sys-color-bg-info-softer, oklch(0.6152 0.2108 256.1 / 0.11)))"
      },
      "danger": {
        "default": "var(--cnvs-sys-color-surface-danger-default, oklch(0.6289 0.2567 29.11 / 0.04))",
        "strong": "var(--cnvs-sys-color-surface-danger-strong, oklch(0.6434 0.2428 30.17 / 0.1))"
      },
      "warning": {
        "default": "var(--cnvs-sys-color-surface-warning-default, var(--cnvs-sys-color-static-amber-softest, oklch(0.7982 0.159 92.57 / 0.1)))",
        "strong": "var(--cnvs-sys-color-surface-warning-strong, var(--cnvs-sys-color-static-amber-stronger, oklch(0.8864 0.1845 100.28 / 0.22)))"
      },
      "success": {
        "default": "var(--cnvs-sys-color-surface-success-default, oklch(0.8695 0.2801 143.52 / 0.08))",
        "strong": "var(--cnvs-sys-color-surface-success-strong, oklch(0.8685 0.2814 143.77 / 0.15))"
      },
      "ai": {
        "default": "var(--cnvs-sys-color-surface-ai-default, var(--cnvs-sys-color-bg-ai-default, oklch(0.6225 0.2064 255.9 / 0.17)))",
        "hover": "var(--cnvs-sys-color-surface-ai-hover, var(--cnvs-sys-color-bg-ai-strong, oklch(0.6048 0.2166 257.21 / 0.31)))",
        "pressed": "var(--cnvs-sys-color-surface-ai-pressed, var(--cnvs-sys-color-bg-ai-stronger, oklch(0.708 0.1549 255.41 / 1)))"
      },
      "transparent": "var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)))",
      "inverse": "var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)))",
      "contrast": {
        "default": "var(--cnvs-sys-color-surface-contrast-default, var(--cnvs-sys-color-bg-contrast-default, oklch(0.0969 0 0 / 0.84)))",
        "strong": "var(--cnvs-sys-color-surface-contrast-strong, var(--cnvs-sys-color-bg-contrast-strong, oklch(0.0672 0 0 / 0.89)))"
      },
      "overlay": {
        "hover": {
          "default": "var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05))",
          "inverse": "var(--cnvs-sys-color-surface-overlay-hover-inverse, oklch(1 0 0 / 0.16))"
        },
        "mixin": "var(--cnvs-sys-color-surface-overlay-mixin, oklch(0.629 0.0281 255.62 / 1))",
        "pressed": {
          "default": "var(--cnvs-sys-color-surface-overlay-pressed-default, oklch(0.3337 0.0688 250.79 / 0.09))",
          "inverse": "var(--cnvs-sys-color-surface-overlay-pressed-inverse, oklch(1 0 0 / 0.26))"
        },
        "scrim": "var(--cnvs-sys-color-surface-overlay-scrim, oklch(0.0847 0 0 / 0.36))"
      }
    },
    "accent": {
      "ai": "var(--cnvs-sys-color-accent-ai, var(--cnvs-sys-color-bg-ai-stronger, oklch(0.2452 0.0752 254.55 / 1)))",
      "info": "var(--cnvs-sys-color-accent-info, var(--cnvs-sys-color-bg-info-default, oklch(0.5198 0.1782 256.11 / 1)))",
      "danger": "var(--cnvs-sys-color-accent-danger, var(--cnvs-sys-color-bg-critical-default, oklch(0.5342 0.2172 29.53 / 1)))",
      "warning": "var(--cnvs-sys-color-accent-warning, oklch(0.7909 0.1711 70.15 / 1))",
      "success": "var(--cnvs-sys-color-accent-success, var(--cnvs-sys-color-bg-positive-default, oklch(0.5069 0.1569 145.56 / 1)))",
      "contrast": "var(--cnvs-sys-color-accent-contrast, oklch(0.0969 0 0 / 0.84))",
      "muted": {
        "default": "var(--cnvs-sys-color-accent-muted-default, var(--cnvs-sys-color-bg-muted-default, oklch(0.5103 0.0255 256.8 / 1)))",
        "soft": "var(--cnvs-sys-color-accent-muted-soft, var(--cnvs-sys-color-bg-muted-softer, oklch(0.754 0.0181 256.33 / 1)))"
      },
      "overlay": {
        "hover": "var(--cnvs-sys-color-accent-overlay-hover, oklch(0.0847 0 0 / 0.17))",
        "pressed": "var(--cnvs-sys-color-accent-overlay-pressed, oklch(0.0847 0 0 / 0.36))",
        "mixin": "var(--cnvs-sys-color-accent-overlay-mixin, oklch(0 0 0 / 1))"
      }
    },
    "brand": {
      "focus": {
        "primary": "var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)))",
        "critical": "var(--cnvs-sys-color-brand-focus-critical, var(--cnvs-brand-common-error-inner, oklch(0.6495 0.2369 30.04 / 1)))",
        "caution": {
          "outer": "var(--cnvs-sys-color-brand-focus-caution-outer, var(--cnvs-brand-common-alert-outer, oklch(0.6601 0.1537 60.7 / 1)))",
          "inner": "var(--cnvs-sys-color-brand-focus-caution-inner, var(--cnvs-brand-common-alert-inner, oklch(0.7909 0.1711 70.15 / 1)))"
        }
      },
      "surface": {
        "primary": {
          "default": "var(--cnvs-sys-color-brand-surface-primary-default, oklch(0.6499 0.1912 253.52 / 0.08))",
          "strong": "var(--cnvs-sys-color-brand-surface-primary-strong, oklch(0.6152 0.2108 256.1 / 0.11))"
        },
        "critical": {
          "default": "var(--cnvs-sys-color-brand-surface-critical-default, oklch(0.6289 0.2567 29.11 / 0.04))",
          "strong": "var(--cnvs-sys-color-brand-surface-critical-strong, oklch(0.6434 0.2428 30.17 / 0.1))"
        },
        "caution": {
          "default": "var(--cnvs-sys-color-brand-surface-caution-default, oklch(0.7982 0.159 92.57 / 0.1))",
          "strong": "var(--cnvs-sys-color-brand-surface-caution-strong, oklch(0.8864 0.1845 100.28 / 0.22))"
        },
        "positive": {
          "default": "var(--cnvs-sys-color-brand-surface-positive-default, oklch(0.8695 0.2801 143.52 / 0.08))",
          "strong": "var(--cnvs-sys-color-brand-surface-positive-strong, oklch(0.8685 0.2814 143.77 / 0.15))"
        },
        "selected": "var(--cnvs-sys-color-brand-surface-selected, oklch(0.6152 0.2108 256.1 / 0.11))"
      },
      "accent": {
        "primary": "var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)))",
        "critical": "var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)))",
        "caution": "var(--cnvs-sys-color-brand-accent-caution, oklch(0.7909 0.1711 70.15 / 1))",
        "positive": "var(--cnvs-sys-color-brand-accent-positive, var(--cnvs-brand-success-base, oklch(0.5069 0.1569 145.56 / 1)))",
        "action": "var(--cnvs-sys-color-brand-accent-action, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)))"
      },
      "fg": {
        "primary": {
          "default": "var(--cnvs-sys-color-brand-fg-primary-default, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)))",
          "strong": "var(--cnvs-sys-color-brand-fg-primary-strong, var(--cnvs-brand-primary-dark, oklch(0.4658 0.1562 255.5 / 1)))"
        },
        "critical": {
          "default": "var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)))",
          "strong": "var(--cnvs-sys-color-brand-fg-critical-strong, var(--cnvs-brand-error-dark, oklch(0.4517 0.1847 28.2 / 1)))"
        },
        "caution": {
          "default": "var(--cnvs-sys-color-brand-fg-caution-default, var(--cnvs-brand-alert-darkest, oklch(0.5505 0.1439 50.78 / 1)))",
          "strong": "var(--cnvs-sys-color-brand-fg-caution-strong, oklch(0.4824 0.1353 46.11 / 1))"
        },
        "positive": {
          "default": "var(--cnvs-sys-color-brand-fg-positive-default, var(--cnvs-brand-success-base, oklch(0.5069 0.1569 145.56 / 1)))",
          "strong": "var(--cnvs-sys-color-brand-fg-positive-strong, var(--cnvs-brand-success-dark, oklch(0.4463 0.1422 144.58 / 1)))"
        },
        "selected": "var(--cnvs-sys-color-brand-fg-selected, var(--cnvs-brand-primary-dark, oklch(0.4658 0.1562 255.5 / 1)))"
      },
      "border": {
        "primary": "var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1))",
        "critical": "var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1))",
        "caution": "var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)))"
      }
    },
    "focus": {
      "inverse": "var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)))",
      "contrast": "var(--cnvs-sys-color-focus-contrast, oklch(0.0969 0 0 / 0.84))"
    }
  },
  "opacity": {
    "surface": {
      "hover": "var(--cnvs-sys-opacity-surface-hover, 0.08)",
      "pressed": "var(--cnvs-sys-opacity-surface-pressed, 0.18)"
    },
    "accent": {
      "hover": "var(--cnvs-sys-opacity-accent-hover, 0.18)",
      "pressed": "var(--cnvs-sys-opacity-accent-pressed, 0.36)"
    }
  },
  "size": {
    "xxxs": "var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem))",
    "xxs": "var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem))",
    "xs": "var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem))",
    "sm": "var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem))",
    "md": "var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem))",
    "lg": "var(--cnvs-sys-size-lg, 3rem)",
    "xl": "var(--cnvs-sys-size-xl, var(--cnvs-sys-space-x14, 3.5rem))",
    "xxl": "var(--cnvs-sys-size-xxl, var(--cnvs-sys-space-x16, 4rem))"
  },
  "padding": {
    "none": "var(--cnvs-sys-padding-none, var(--cnvs-sys-space-zero, 0))",
    "xxs": "var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem))",
    "xs": "var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem))",
    "sm": "var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem))",
    "md": "var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem))",
    "lg": "var(--cnvs-sys-padding-lg, var(--cnvs-sys-space-x5, 1.25rem))",
    "xl": "var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6, 1.5rem))",
    "xxl": "var(--cnvs-sys-padding-xxl, var(--cnvs-sys-space-x8, 2rem))"
  },
  "gap": {
    "none": "var(--cnvs-sys-gap-none, var(--cnvs-sys-space-zero, 0))",
    "xs": "var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem))",
    "sm": "var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem))",
    "md": "var(--cnvs-sys-gap-md, var(--cnvs-sys-space-x4, 1rem))",
    "lg": "var(--cnvs-sys-gap-lg, var(--cnvs-sys-space-x6, 1.5rem))",
    "xl": "var(--cnvs-sys-gap-xl, var(--cnvs-sys-space-x8, 2rem))",
    "xxl": "var(--cnvs-sys-gap-xxl, var(--cnvs-sys-space-x16, 4rem))"
  },
  "letterSpacing": {
    "subtext": {
      "sm": "var(--cnvs-sys-letter-spacing-subtext-sm, var(--cnvs-sys-type-letter-spacing-subtext-small))",
      "md": "var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-sys-type-letter-spacing-subtext-medium))",
      "lg": "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large))"
    },
    "body": {
      "sm": "var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-sys-type-letter-spacing-body-small))"
    }
  }
};

export {sana} from "./sana";