[{"data":1,"prerenderedAt":12},["ShallowReactive",2],{"code-json-{\n    \"cssDirectoryPath\": \"\u002Fassets\u002Fcss\u002Fc":3,"code-json-\"colors\": {\n    \"primary\": \"6366F1\",\n   ":4,"code-json-\"spacing\": [4, 8, 12, 16, 20, 24, 32, 40":5,"code-json-\"fontSize\": [12, 14, 16, 18, 20, 24, 32,":6,"code-json-\"borderRadius\": [4, 8, 12, 16, 50]":7,"code-json-\"fontWeight\": [400, 500, 600, 700]":8,"code-html-\u003C!-- CSS variable approach -->\n\u003Cdiv clas":9,"code-css-\u002F* Your project CSS\u002FSCSS file *\u002F\n:root {":10,"nav":11},"\u003Cpre class=\"shiki one-dark-pro\" style=\"background-color:#282c34;color:#abb2bf\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\">{\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E06C75\">    \"cssDirectoryPath\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">: \u003C\u002Fspan>\u003Cspan style=\"color:#98C379\">\"\u002Fassets\u002Fcss\u002Fcommon\u002F\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E06C75\">    \"tokens\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">: {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E06C75\">        \"colors\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">: {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E06C75\">            \"primary\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">: \u003C\u002Fspan>\u003Cspan style=\"color:#98C379\">\"6366F1\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E06C75\">            \"secondary\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">: \u003C\u002Fspan>\u003Cspan style=\"color:#98C379\">\"A855F7\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E06C75\">            \"danger\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">: \u003C\u002Fspan>\u003Cspan style=\"color:#98C379\">\"EF4444\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E06C75\">            \"success\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">: \u003C\u002Fspan>\u003Cspan style=\"color:#98C379\">\"22C55E\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E06C75\">            \"warning\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">: \u003C\u002Fspan>\u003Cspan style=\"color:#98C379\">\"F59E0B\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E06C75\">            \"text\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">: \u003C\u002Fspan>\u003Cspan style=\"color:#98C379\">\"333333\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E06C75\">            \"text-light\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">: \u003C\u002Fspan>\u003Cspan style=\"color:#98C379\">\"999999\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E06C75\">            \"bg\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">: \u003C\u002Fspan>\u003Cspan style=\"color:#98C379\">\"FFFFFF\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E06C75\">            \"bg-dark\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">: \u003C\u002Fspan>\u003Cspan style=\"color:#98C379\">\"18181B\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E06C75\">            \"border\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">: \u003C\u002Fspan>\u003Cspan style=\"color:#98C379\">\"DDDDDD\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\">        },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E06C75\">        \"spacing\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">: [\u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\">4\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">, \u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\">8\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">, \u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\">12\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">, \u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\">16\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">, \u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\">20\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">, \u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\">24\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">, \u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\">32\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">, \u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\">40\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">, \u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\">48\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">, \u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\">64\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">],\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E06C75\">        \"fontSize\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">: [\u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\">12\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">, \u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\">14\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">, \u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\">16\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">, \u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\">18\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">, \u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\">20\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">, \u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\">24\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">, \u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\">32\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">, \u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\">40\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">],\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E06C75\">        \"borderRadius\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">: [\u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\">4\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">, \u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\">8\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">, \u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\">12\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">, \u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\">16\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">, \u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\">50\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">],\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E06C75\">        \"fontWeight\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">: [\u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\">400\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">, \u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\">500\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">, \u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\">600\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">, \u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\">700\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">]\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\">    },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E06C75\">    \"strict\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">: \u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\">false\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\">}\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>","\u003Cpre class=\"shiki one-dark-pro\" style=\"background-color:#282c34;color:#abb2bf\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#98C379\">\"colors\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">: {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E06C75\">    \"primary\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">: \u003C\u002Fspan>\u003Cspan style=\"color:#98C379\">\"6366F1\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E06C75\">    \"secondary\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">: \u003C\u002Fspan>\u003Cspan style=\"color:#98C379\">\"A855F7\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E06C75\">    \"danger\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">: \u003C\u002Fspan>\u003Cspan style=\"color:#98C379\">\"EF4444\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E06C75\">    \"success\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">: \u003C\u002Fspan>\u003Cspan style=\"color:#98C379\">\"22C55E\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E06C75\">    \"warning\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">: \u003C\u002Fspan>\u003Cspan style=\"color:#98C379\">\"F59E0B\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E06C75\">    \"text\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">: \u003C\u002Fspan>\u003Cspan style=\"color:#98C379\">\"333333\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E06C75\">    \"text-light\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">: \u003C\u002Fspan>\u003Cspan style=\"color:#98C379\">\"999999\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E06C75\">    \"bg\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">: \u003C\u002Fspan>\u003Cspan style=\"color:#98C379\">\"FFFFFF\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E06C75\">    \"bg-dark\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">: \u003C\u002Fspan>\u003Cspan style=\"color:#98C379\">\"18181B\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E06C75\">    \"border\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">: \u003C\u002Fspan>\u003Cspan style=\"color:#98C379\">\"DDDDDD\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\">}\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>","\u003Cpre class=\"shiki one-dark-pro\" style=\"background-color:#282c34;color:#abb2bf\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#98C379\">\"spacing\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">: [\u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\">4\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">, \u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\">8\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">, \u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\">12\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">, \u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\">16\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">, \u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\">20\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">, \u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\">24\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">, \u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\">32\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">, \u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\">40\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">, \u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\">48\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">, \u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\">64\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">]\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>","\u003Cpre class=\"shiki one-dark-pro\" style=\"background-color:#282c34;color:#abb2bf\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#98C379\">\"fontSize\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">: [\u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\">12\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">, \u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\">14\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">, \u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\">16\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">, \u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\">18\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">, \u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\">20\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">, \u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\">24\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">, \u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\">32\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">, \u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\">40\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">]\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>","\u003Cpre class=\"shiki one-dark-pro\" style=\"background-color:#282c34;color:#abb2bf\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#98C379\">\"borderRadius\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">: [\u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\">4\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">, \u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\">8\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">, \u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\">12\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">, \u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\">16\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">, \u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\">50\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">]\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>","\u003Cpre class=\"shiki one-dark-pro\" style=\"background-color:#282c34;color:#abb2bf\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#98C379\">\"fontWeight\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">: [\u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\">400\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">, \u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\">500\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">, \u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\">600\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">, \u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\">700\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">]\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>","\u003Cpre class=\"shiki one-dark-pro\" style=\"background-color:#282c34;color:#abb2bf\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#7F848E;font-style:italic\"><!-- CSS variable approach -->\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\"><\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">div\u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">=\u003C\u002Fspan>\u003Cspan style=\"color:#98C379\">\"bg--primary c--text\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\">  Uses var(--primary) and var(--text)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">div\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#7F848E;font-style:italic\"><!-- Direct token value approach -->\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\"><\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">div\u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">=\u003C\u002Fspan>\u003Cspan style=\"color:#98C379\">\"bg6366F1 c333333\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\">  Uses #6366F1 and #333333 directly\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">div\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#7F848E;font-style:italic\"><!-- Both reference the same design token \"primary: 6366F1\" -->\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#7F848E;font-style:italic\"><!-- bg--primary = background-color: var(--primary) -->\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#7F848E;font-style:italic\"><!-- bg6366F1   = background-color: #6366F1          -->\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>","\u003Cpre class=\"shiki one-dark-pro\" style=\"background-color:#282c34;color:#abb2bf\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#7F848E;font-style:italic\">\u002F* Your project CSS\u002FSCSS file *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#56B6C2\">:root\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E06C75\">  --primary\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">: \u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\">#6366f1\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E06C75\">  --secondary\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">: \u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\">#a855f7\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E06C75\">  --spacing-sm\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">: \u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\">8\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">px\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E06C75\">  --spacing-md\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">: \u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\">16\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">px\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E06C75\">  --spacing-lg\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">: \u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\">32\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">px\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E06C75\">  --radius\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">: \u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\">8\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">px\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#7F848E;font-style:italic\">\u002F* Type \"bg--\" in HTML class → autocomplete shows: *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#7F848E;font-style:italic\">\u002F* bg--primary       → background-color: var(--primary)     #6366f1  (from style.css) *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#7F848E;font-style:italic\">\u002F* bg--secondary     → background-color: var(--secondary)   #a855f7  (from style.css) *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[],1775225737774]