Edit Figma tokens

{
  "color": {
    "brand": {
      "red": {
        "$value": "#F24E1E",
        "$type": "color",
        "$description": "Figma brand red, used in logo and accent elements"
      },
      "purple": {
        "$value": "#A259FF",
        "$type": "color",
        "$description": "Figma brand purple, used in logo and accent elements"
      },
      "blue": {
        "$value": "#1ABCFE",
        "$type": "color",
        "$description": "Figma brand blue, used in logo and accent elements"
      },
      "green": {
        "$value": "#0ACF83",
        "$type": "color",
        "$description": "Figma brand green, used in logo, badges, and accent elements"
      },
      "yellow": {
        "$value": "#FBF158",
        "$type": "color",
        "$description": "Figma brand yellow, used in logo and accent elements"
      }
    },
    "primary": {
      "$value": "#5551FF",
      "$type": "color",
      "$description": "Primary CTA color for buttons and interactive elements"
    },
    "black": {
      "$value": "#000000",
      "$type": "color",
      "$description": "Primary text color and button fills"
    },
    "white": {
      "$value": "#FFFFFF",
      "$type": "color",
      "$description": "Background color and button text"
    },
    "gray": {
      "900": {
        "$value": "#2C2C2C",
        "$type": "color",
        "$description": "Body text color"
      },
      "600": {
        "$value": "#666666",
        "$type": "color",
        "$description": "Secondary text color"
      },
      "300": {
        "$value": "#E5E5E5",
        "$type": "color",
        "$description": "Border and divider color"
      },
      "100": {
        "$value": "#F7F7F7",
        "$type": "color",
        "$description": "Subtle background tint"
      }
    },
    "accent": {
      "green": {
        "$value": "#C1F96A",
        "$type": "color",
        "$description": "Section background accent (Figma Design page)"
      },
      "purple": {
        "$value": "#B4A0FF",
        "$type": "color",
        "$description": "Illustration accent color"
      },
      "pink": {
        "$value": "#FF7AB8",
        "$type": "color",
        "$description": "Illustration accent color"
      }
    }
  },
  "font": {
    "family": {
      "sans": {
        "$value": "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif",
        "$type": "fontFamily",
        "$description": "Primary sans-serif font stack"
      }
    },
    "size": {
      "display-xl": {
        "$value": "96px",
        "$type": "dimension",
        "$description": "Extra large display heading size"
      },
      "display-lg": {
        "$value": "72px",
        "$type": "dimension",
        "$description": "Large display heading size"
      },
      "heading-xl": {
        "$value": "64px",
        "$type": "dimension",
        "$description": "Extra large heading size"
      },
      "heading-lg": {
        "$value": "48px",
        "$type": "dimension",
        "$description": "Large heading size"
      },
      "heading-md": {
        "$value": "36px",
        "$type": "dimension",
        "$description": "Medium heading size"
      },
      "body-lg": {
        "$value": "20px",
        "$type": "dimension",
        "$description": "Large body text size"
      },
      "body": {
        "$value": "16px",
        "$type": "dimension",
        "$description": "Default body text size"
      },
      "body-sm": {
        "$value": "14px",
        "$type": "dimension",
        "$description": "Small body text size"
      }
    },
    "weight": {
      "regular": {
        "$value": 400,
        "$type": "fontWeight",
        "$description": "Regular font weight"
      },
      "medium": {
        "$value": 500,
        "$type": "fontWeight",
        "$description": "Medium font weight"
      },
      "semibold": {
        "$value": 600,
        "$type": "fontWeight",
        "$description": "Semibold font weight"
      },
      "bold": {
        "$value": 700,
        "$type": "fontWeight",
        "$description": "Bold font weight"
      }
    }
  },
  "spacing": {
    "1": {
      "$value": "8px",
      "$type": "dimension",
      "$description": "Base spacing unit (8px grid)"
    },
    "2": {
      "$value": "16px",
      "$type": "dimension",
      "$description": "2x base spacing"
    },
    "3": {
      "$value": "24px",
      "$type": "dimension",
      "$description": "3x base spacing"
    },
    "4": {
      "$value": "32px",
      "$type": "dimension",
      "$description": "4x base spacing"
    },
    "6": {
      "$value": "48px",
      "$type": "dimension",
      "$description": "6x base spacing"
    },
    "8": {
      "$value": "64px",
      "$type": "dimension",
      "$description": "8x base spacing"
    },
    "10": {
      "$value": "80px",
      "$type": "dimension",
      "$description": "10x base spacing"
    },
    "15": {
      "$value": "120px",
      "$type": "dimension",
      "$description": "15x base spacing for large sections"
    }
  },
  "radius": {
    "sm": {
      "$value": "4px",
      "$type": "dimension",
      "$description": "Small border radius"
    },
    "md": {
      "$value": "8px",
      "$type": "dimension",
      "$description": "Medium border radius for buttons"
    },
    "lg": {
      "$value": "12px",
      "$type": "dimension",
      "$description": "Large border radius for cards"
    },
    "xl": {
      "$value": "16px",
      "$type": "dimension",
      "$description": "Extra large border radius"
    }
  },
  "shadow": {
    "sm": {
      "$value": "0 1px 2px rgba(0, 0, 0, 0.05)",
      "$type": "shadow",
      "$description": "Small shadow for subtle elevation"
    },
    "md": {
      "$value": "0 4px 12px rgba(0, 0, 0, 0.08)",
      "$type": "shadow",
      "$description": "Medium shadow for cards and dropdowns"
    },
    "lg": {
      "$value": "0 8px 24px rgba(0, 0, 0, 0.12)",
      "$type": "shadow",
      "$description": "Large shadow for modals and popovers"
    }
  },
  "border": {
    "width": {
      "default": {
        "$value": "1px",
        "$type": "dimension",
        "$description": "Default border width"
      },
      "thick": {
        "$value": "2px",
        "$type": "dimension",
        "$description": "Thick border for emphasis"
      }
    }
  }
}