{"version":3,"sourceRoot":"","sources":["../../src/tokens/colours.scss","../../src/tokens/typography.scss","../../src/tokens/spacing.scss","../../src/tokens/misc.scss"],"names":[],"mappings":"AAAA,cACE,MAOE,kDAMA,kDAMA,kDAMA,kDAMA,kDAMA,kDAMA,kDAMA,qDAMA,oDAMA,oDAMA,oDAMA,oDAMA,oDAMA,oDAMA,oDAMA,oDAMA,oDAMA,qDAMA,qDAMA,qDAMA,sDAMA,sDAMA,uDAMA,uDAMA,uDAMA,uDAMA,uDAMA,wDAMA,wDAMA,wDAMA,wDAMA,mDAMA,oDAMA,oDAMA,oDAMA,oDAMA,oDAMA,sDAMA,qDAMA,qDAMA,qDAMA,qDAMA,qDAMA,qDAMA,qDAMA,qDAMA,qDAMA,qDAMA,kDAMA,kDAMA,kDAMA,kDAMA,mDAMA,oDAMA,oDAMA,oDAMA,oDAMA,oDAMA,qDAMA,qDAMA,qDAMA,qDAMA,iDAMA,kDAMA,mDAMA,mDAMA,mDAMA,mDAMA,mDAMA,kDAMA,oDAMA,oDAMA,oDAMA,oDAMA,oDAMA,uCAMA,qDAMA,qDAMA,sDAMA,sDAMA,sDAMA,8CAMA,8CAMA,8CAMA,+CAMA,+CAMA,+CAMA,+CAMA,+CAMA,+CAMA,gDAMA,iDAMA,iDAMA,iDAMA,iDAMA,iDAMA,kDAMA,0CAMA,4CAMA,qCC1lBJ,cACE,MAQE,8EAQA,gFAQA,qDASA,8BAOA,8BAOA,0BACA,iDAOA,8BACA,kDAOA,8BACA,6CAOA,+BAOA,6BAOA,8BASA,8BAOA,+BAOA,6BASA,sCAOA,sCAOA,qCAOA,qCAOA,uCASA,+BAOA,8BAOA,+BAOA,8BAOA,6BAIF,uBACE,MAQE,8BAOA,4BAOA,+BAOA,gCAKJ,iBACE,oFAKF,iBACE,qFCrOJ,cACE,MAQE,6BAOA,4BAOA,0CAOA,2BAOA,0CAOA,2BAOA,0BAOA,kDAOA,4BAOA,mDAIF,wBACE,MACE,oCACA,iDACA,0CACA,2CAKJ,uBACE,MACE,kDACA,kDACA,yCACA,0CACA,4CC5FN,cACE,MAME,sCASA,qCASA,mCASA,mCASA,iCAOA,kCAOA,gCAOA,8BAOA,gCAOA,8BAOA,iCAOA,6DAOA,+BAOA,6BAOA,0GAQA,8BAOA,6BAOA,kCAOA,mCAOA,6BAOA,kCAOA,oCAOA,mCAOA,+BAOA,iCAOA,kBAOA,yBAOA,2BAOA,wBAOA,6BAOA,0BAOA,0BAOA","file":"index.css","sourcesContent":["@layer tokens {\n  :root {\n    // doc example\n\n    /*\n    * @name Grey Monochrome - Darkest\n    * @description The darkest shade of grey in the monochrome palette.\n    */\n    --nano-color-grey-mono-1600: rgb(24 24 24 / 100%);\n\n    /*\n    * @name Grey Monochrome - 1550\n    * @description A very dark shade of grey in the monochrome palette.\n    */\n    --nano-color-grey-mono-1550: rgb(30 30 30 / 100%);\n\n    /*\n    * @name Grey Monochrome - 1500\n    * @description A very dark shade of grey in the monochrome palette.\n    */\n    --nano-color-grey-mono-1500: rgb(38 38 38 / 100%);\n\n    /*\n    * @name Grey Monochrome - 1400\n    * @description A dark shade of grey in the monochrome palette.\n    */\n    --nano-color-grey-mono-1400: rgb(51 51 51 / 100%);\n\n    /*\n    * @name Grey Monochrome - 1300\n    * @description A slightly lighter dark shade of grey in the monochrome palette.\n    */\n    --nano-color-grey-mono-1300: rgb(66 66 66 / 100%);\n\n    /*\n    * @name Grey Monochrome - 1200\n    * @description A medium-dark shade of grey in the monochrome palette.\n    */\n    --nano-color-grey-mono-1200: rgb(84 84 83 / 100%);\n\n    /*\n    * @name Grey Monochrome - 1100\n    * @description A medium shade of grey in the monochrome palette.\n    */\n    --nano-color-grey-mono-1100: rgb(99 99 99 / 100%);\n\n    /*\n    * @name Grey Monochrome - 1000\n    * @description A medium-light shade of grey in the monochrome palette.\n    */\n    --nano-color-grey-mono-1000: rgb(118 118 117 / 100%);\n\n    /*\n    * @name Grey Monochrome - 900\n    * @description A light shade of grey in the monochrome palette.\n    */\n    --nano-color-grey-mono-900: rgb(135 135 135 / 100%);\n\n    /*\n    * @name Grey Monochrome - 800\n    * @description A lighter shade of grey in the monochrome palette.\n    */\n    --nano-color-grey-mono-800: rgb(150 150 149 / 100%);\n\n    /*\n    * @name Grey Monochrome - 700\n    * @description A very light shade of grey in the monochrome palette.\n    */\n    --nano-color-grey-mono-700: rgb(166 166 166 / 100%);\n\n    /*\n    * @name Grey Monochrome - 400\n    * @description A pale shade of grey in the monochrome palette.\n    */\n    --nano-color-grey-mono-400: rgb(215 214 213 / 100%);\n\n    /*\n    * @name Grey Monochrome - 300\n    * @description A very pale shade of grey in the monochrome palette.\n    */\n    --nano-color-grey-mono-300: rgb(231 230 228 / 100%);\n\n    /*\n    * @name Grey Monochrome - 200\n    * @description An extremely pale shade of grey in the monochrome palette.\n    */\n    --nano-color-grey-mono-200: rgb(241 240 238 / 100%);\n\n    /*\n    * @name Grey Monochrome - 100\n    * @description The lightest shade of grey in the monochrome palette.\n    */\n    --nano-color-grey-mono-100: rgb(246 245 244 / 100%);\n\n    /*\n    * @name Grey Monochrome - 075\n    * @description A near-white shade of grey in the monochrome palette.\n    */\n    --nano-color-grey-mono-075: rgb(249 248 248 / 100%);\n\n    /*\n    * @name Grey Monochrome - 050\n    * @description The whitest shade of grey in the monochrome palette.\n    */\n    --nano-color-grey-mono-050: rgb(252 252 251 / 100%);\n\n    /*\n    * @name Blue Cerulean - 1600\n    * @description The darkest shade of blue in the cerulean palette.\n    */\n    --nano-color-blue-cerulean-1600: rgb(0 26 40 / 100%);\n\n    /*\n    * @name Blue Cerulean - 1500\n    * @description A very dark shade of blue in the cerulean palette.\n    */\n    --nano-color-blue-cerulean-1500: rgb(1 41 63 / 100%);\n\n    /*\n    * @name Blue Cerulean - 1400\n    * @description A dark shade of blue in the cerulean palette.\n    */\n    --nano-color-blue-cerulean-1400: rgb(1 54 83 / 100%);\n\n    /*\n    * @name Blue Cerulean - 1300\n    * @description A slightly lighter dark shade of blue in the cerulean palette.\n    */\n    --nano-color-blue-cerulean-1300: rgb(1 71 106 / 100%);\n\n    /*\n    * @name Blue Cerulean - 1200\n    * @description A medium-dark shade of blue in the cerulean palette.\n    */\n    --nano-color-blue-cerulean-1200: rgb(1 89 127 / 100%);\n\n    /*\n    * @name Blue Cerulean - 1100\n    * @description A medium shade of blue in the cerulean palette.\n    */\n    --nano-color-blue-cerulean-1100: rgb(1 106 146 / 100%);\n\n    /*\n    * @name Blue Cerulean - 1000\n    * @description A medium-light shade of blue in the cerulean palette.\n    */\n    --nano-color-blue-cerulean-1000: rgb(0 127 168 / 100%);\n\n    /*\n    * @name Blue Cerulean - 900\n    * @description A light shade of blue in the cerulean palette.\n    */\n    --nano-color-blue-cerulean-900: rgb(32 146 183 / 100%);\n\n    /*\n    * @name Blue Cerulean - 800\n    * @description A lighter shade of blue in the cerulean palette.\n    */\n    --nano-color-blue-cerulean-800: rgb(58 161 195 / 100%);\n\n    /*\n    * @name Blue Cerulean - 700\n    * @description A very light shade of blue in the cerulean palette.\n    */\n    --nano-color-blue-cerulean-700: rgb(85 178 207 / 100%);\n\n    /*\n    * @name Blue Cerulean - 300\n    * @description A pale shade of blue in the cerulean palette.\n    */\n    --nano-color-blue-cerulean-300: rgb(186 238 251 / 100%);\n\n    /*\n    * @name Blue Cerulean - 100\n    * @description A very pale shade of blue in the cerulean palette.\n    */\n    --nano-color-blue-cerulean-100: rgb(226 249 255 / 100%);\n\n    /*\n    * @name Blue Cerulean - 075\n    * @description An extremely pale shade of blue in the cerulean palette.\n    */\n    --nano-color-blue-cerulean-075: rgb(234 251 255 / 100%);\n\n    /*\n    * @name Blue Cerulean - 050\n    * @description The palest shade of blue in the cerulean palette.\n    */\n    --nano-color-blue-cerulean-050: rgb(247 253 255 / 100%);\n\n    /*\n    * @name Violet Ink - 1600\n    * @description The darkest shade of violet in the ink palette.\n    */\n    --nano-color-violet-ink-1600: rgb(12 14 75 / 100%);\n\n    /*\n    * @name Violet Ink - 1500\n    * @description A very dark shade of violet in the ink palette.\n    */\n    --nano-color-violet-ink-1500: rgb(19 22 117 / 100%);\n\n    /*\n    * @name Violet Ink - 1400\n    * @description A dark shade of violet in the ink palette.\n    */\n    --nano-color-violet-ink-1400: rgb(27 31 147 / 100%);\n\n    /*\n    * @name Violet Ink - 1300\n    * @description A slightly lighter dark shade of violet in the ink palette.\n    */\n    --nano-color-violet-ink-1300: rgb(47 48 168 / 100%);\n\n    /*\n    * @name Violet Ink - 1200\n    * @description A medium-dark shade of violet in the ink palette.\n    */\n    --nano-color-violet-ink-1200: rgb(67 67 189 / 100%);\n\n    /*\n    * @name Violet Ink - 1100\n    * @description A medium shade of violet in the ink palette.\n    */\n    --nano-color-violet-ink-1100: rgb(85 82 207 / 100%);\n\n    /*\n    * @name Violet Ink - 1000\n    * @description A medium-light shade of violet in the ink palette.\n    */\n    --nano-color-violet-ink-1000: rgb(106 103 221 / 100%);\n\n    /*\n    * @name Violet Ink - 900\n    * @description A light shade of violet in the ink palette.\n    */\n    --nano-color-violet-ink-900: rgb(124 123 228 / 100%);\n\n    /*\n    * @name Violet Ink - 800\n    * @description A lighter shade of violet in the ink palette.\n    */\n    --nano-color-violet-ink-800: rgb(139 141 234 / 100%);\n\n    /*\n    * @name Violet Ink - 700\n    * @description A very light shade of violet in the ink palette.\n    */\n    --nano-color-violet-ink-700: rgb(156 159 241 / 100%);\n\n    /*\n    * @name Violet Ink - 600\n    * @description A pale shade of violet in the ink palette.\n    */\n    --nano-color-violet-ink-600: rgb(173 178 247 / 100%);\n\n    /*\n    * @name Violet Ink - 500\n    * @description A very pale shade of violet in the ink palette.\n    */\n    --nano-color-violet-ink-500: rgb(189 195 253 / 100%);\n\n    /*\n    * @name Violet Ink - 400\n    * @description An extremely pale shade of violet in the ink palette.\n    */\n    --nano-color-violet-ink-400: rgb(206 212 255 / 100%);\n\n    /*\n    * @name Violet Ink - 300\n    * @description The palest shade of violet in the ink palette.\n    */\n    --nano-color-violet-ink-300: rgb(225 228 255 / 100%);\n\n    /*\n    * @name Violet Ink - 200\n    * @description An extremely pale shade of violet in the ink palette.\n    */\n    --nano-color-violet-ink-200: rgb(238 240 255 / 100%);\n\n    /*\n    * @name Violet Ink - 100\n    * @description A very pale shade of violet in the ink palette.\n    */\n    --nano-color-violet-ink-100: rgb(244 245 255 / 100%);\n\n    /*\n    * @name Violet Ink - 075\n    * @description A near-white shade of violet in the ink palette.\n    */\n    --nano-color-violet-ink-075: rgb(247 248 255 / 100%);\n\n    /*\n    * @name Green Leaf - 1600\n    * @description The darkest shade of green in the leaf palette.\n    */\n    --nano-color-green-leaf-1600: rgb(1 27 32 / 100%);\n\n    /*\n    * @name Green Leaf - 1500\n    * @description A very dark shade of green in the leaf palette.\n    */\n    --nano-color-green-leaf-1500: rgb(1 43 51 / 100%);\n\n    /*\n    * @name Green Leaf - 1400\n    * @description A dark shade of green in the leaf palette.\n    */\n    --nano-color-green-leaf-1400: rgb(1 57 67 / 100%);\n\n    /*\n    * @name Green Leaf - 1300\n    * @description A slightly lighter dark shade of green in the leaf palette.\n    */\n    --nano-color-green-leaf-1300: rgb(2 73 87 / 100%);\n\n    /*\n    * @name Green Leaf - 1200\n    * @description A medium-dark shade of green in the leaf palette.\n    */\n    --nano-color-green-leaf-1200: rgb(2 93 106 / 100%);\n\n    /*\n    * @name Green Leaf - 1100\n    * @description A medium shade of green in the leaf palette.\n    */\n    --nano-color-green-leaf-1100: rgb(1 111 110 / 100%);\n\n    /*\n    * @name Green Leaf - 1000\n    * @description A medium-light shade of green in the leaf palette.\n    */\n    --nano-color-green-leaf-1000: rgb(1 134 113 / 100%);\n\n    /*\n    * @name Green Leaf - 900\n    * @description A light shade of green in the leaf palette.\n    */\n    --nano-color-green-leaf-900: rgb(29 151 131 / 100%);\n\n    /*\n    * @name Green Leaf - 800\n    * @description A lighter shade of green in the leaf palette.\n    */\n    --nano-color-green-leaf-800: rgb(52 167 146 / 100%);\n\n    /*\n    * @name Green Leaf - 700\n    * @description A very light shade of green in the leaf palette.\n    */\n    --nano-color-green-leaf-700: rgb(78 183 162 / 100%);\n\n    /*\n    * @name Green Leaf - 600\n    * @description A pale shade of green in the leaf palette.\n    */\n    --nano-color-green-leaf-600: rgb(104 200 178 / 100%);\n\n    /*\n    * @name Green Leaf - 200\n    * @description An extremely pale shade of green in the leaf palette.\n    */\n    --nano-color-green-leaf-200: rgb(197 253 232 / 100%);\n\n    /*\n    * @name Green Leaf - 075\n    * @description A near-white shade of green in the leaf palette.\n    */\n    --nano-color-green-leaf-075: rgb(222 254 242 / 100%);\n\n    /*\n    * @name Green Leaf - 050\n    * @description The palest shade of green in the leaf palette.\n    */\n    --nano-color-green-leaf-050: rgb(238 255 249 / 100%);\n\n    /*\n    * @name Red Brick - 1600\n    * @description The darkest shade of red in the brick palette.\n    */\n    --nano-color-red-brick-1600: rgb(51 8 10 / 100%);\n\n    /*\n    * @name Red Brick - 1500\n    * @description A very dark shade of red in the brick palette.\n    */\n    --nano-color-red-brick-1500: rgb(79 13 16 / 100%);\n\n    /*\n    * @name Red Brick - 1400\n    * @description A dark shade of red in the brick palette.\n    */\n    --nano-color-red-brick-1400: rgb(103 17 21 / 100%);\n\n    /*\n    * @name Red Brick - 1300\n    * @description A slightly lighter dark shade of red in the brick palette.\n    */\n    --nano-color-red-brick-1300: rgb(132 21 27 / 100%);\n\n    /*\n    * @name Red Brick - 1200\n    * @description A medium-dark shade of red in the brick palette.\n    */\n    --nano-color-red-brick-1200: rgb(161 32 36 / 100%);\n\n    /*\n    * @name Red Brick - 1100\n    * @description A medium shade of red in the brick palette.\n    */\n    --nano-color-red-brick-1100: rgb(185 46 48 / 100%);\n\n    /*\n    * @name Red Brick - 1000\n    * @description A medium-light shade of red in the brick palette.\n    */\n    --nano-color-red-brick-1000: rgb(210 67 70 / 100%);\n\n    /*\n    * @name Red Brick - 900\n    * @description A light shade of red in the brick palette.\n    */\n    --nano-color-red-brick-900: rgb(222 93 96 / 100%);\n\n    /*\n    * @name Red Brick - 800\n    * @description A lighter shade of red in the brick palette.\n    */\n    --nano-color-red-brick-800: rgb(229 116 120 / 100%);\n\n    /*\n    * @name Red Brick - 700\n    * @description A very light shade of red in the brick palette.\n    */\n    --nano-color-red-brick-700: rgb(235 139 144 / 100%);\n\n    /*\n    * @name Red Brick - 400\n    * @description A pale shade of red in the brick palette.\n    */\n    --nano-color-red-brick-400: rgb(255 201 203 / 100%);\n\n    /*\n    * @name Red Brick - 300\n    * @description A very pale shade of red in the brick palette.\n    */\n    --nano-color-red-brick-300: rgb(255 221 222 / 100%);\n\n    /*\n    * @name Red Brick - 100\n    * @description An extremely pale shade of red in the brick palette.\n    */\n    --nano-color-red-brick-100: rgb(255 241 242 / 100%);\n\n    /*\n    * @name Yellow Lime - 1000\n    * @description A dark shade of yellow in the lime palette.\n    */\n    --nano-color-yellow-lime-1000: #6e7d17;\n\n    /*\n    * @name Yellow Lime - 500\n    * @description A medium shade of yellow in the lime palette.\n    */\n    --nano-color-yellow-lime-500: rgb(184 210 39 / 100%);\n\n    /*\n    * @name Yellow Lime - 200\n    * @description A pale shade of yellow in the lime palette.\n    */\n    --nano-color-yellow-lime-200: rgb(224 255 50 / 100%);\n\n    /*\n    * @name Yellow Lime - 100\n    * @description A very pale shade of yellow in the lime palette.\n    */\n    --nano-color-yellow-lime-100: rgb(236 255 131 / 100%);\n\n    /*\n    * @name Yellow Lime - 075\n    * @description An extremely pale shade of yellow in the lime palette.\n    */\n    --nano-color-yellow-lime-075: rgb(242 255 172 / 100%);\n\n    /*\n    * @name Yellow Lime - 050\n    * @description The palest shade of yellow in the lime palette.\n    */\n    --nano-color-yellow-lime-050: rgb(250 255 223 / 100%);\n\n    /*\n    * @name Orange - 1600\n    * @description The darkest shade of orange in the palette.\n    */\n    --nano-color-orange-1600: rgb(47 13 2 / 100%);\n\n    /*\n    * @name Orange - 1500\n    * @description A very dark shade of orange in the palette.\n    */\n    --nano-color-orange-1500: rgb(74 20 3 / 100%);\n\n    /*\n    * @name Orange - 1400\n    * @description A dark shade of orange in the palette.\n    */\n    --nano-color-orange-1400: rgb(97 27 4 / 100%);\n\n    /*\n    * @name Orange - 1300\n    * @description A slightly lighter dark shade of orange in the palette.\n    */\n    --nano-color-orange-1300: rgb(125 34 5 / 100%);\n\n    /*\n    * @name Orange - 1200\n    * @description A medium-dark shade of orange in the palette.\n    */\n    --nano-color-orange-1200: rgb(148 52 4 / 100%);\n\n    /*\n    * @name Orange - 1100\n    * @description A medium shade of orange in the palette.\n    */\n    --nano-color-orange-1100: rgb(168 68 4 / 100%);\n\n    /*\n    * @name Orange - 1000\n    * @description A medium-light shade of orange in the palette.\n    */\n    --nano-color-orange-1000: rgb(192 87 3 / 100%);\n\n    /*\n    * @name Orange - 900\n    * @description A light shade of orange in the palette.\n    */\n    --nano-color-orange-900: rgb(210 107 3 / 100%);\n\n    /*\n    * @name Orange - 800\n    * @description A lighter shade of orange in the palette.\n    */\n    --nano-color-orange-800: rgb(226 124 3 / 100%);\n\n    /*\n    * @name Orange - 600\n    * @description A pale shade of orange in the palette.\n    */\n    --nano-color-orange-600: rgb(255 162 14 / 100%);\n\n    /*\n    * @name Orange - 400\n    * @description A very pale shade of orange in the palette.\n    */\n    --nano-color-orange-400: rgb(254 206 136 / 100%);\n\n    /*\n    * @name Orange - 300\n    * @description An extremely pale shade of orange in the palette.\n    */\n    --nano-color-orange-300: rgb(254 226 189 / 100%);\n\n    /*\n    * @name Orange - 200\n    * @description The palest shade of orange in the palette.\n    */\n    --nano-color-orange-200: rgb(254 239 225 / 100%);\n\n    /*\n    * @name Orange - 100\n    * @description A near-white shade of orange in the palette.\n    */\n    --nano-color-orange-100: rgb(254 243 233 / 100%);\n\n    /*\n    * @name Orange - 075\n    * @description The lightest shade of orange in the palette.\n    */\n    --nano-color-orange-075: rgb(254 247 240 / 100%);\n\n    /*\n    * @name Basic White\n    * @description The pure white color.\n    */\n    --nano-color-basic-white: rgb(255 255 255 / 100%);\n\n    /*\n    * @name Basic White RGB list\n    * @description The pure white color in RGB format.\n    */\n    --nano-color-basic-white-rgb: 255 255 255;\n\n    /*\n    * @name Basic Black\n    * @description The pure black color.\n    */\n    --nano-color-basic-black: rgb(0 0 0 / 100%);\n\n    /*\n    * @name Basic Black RGB list\n    * @description The pure black color in RGB format.\n    */\n    --nano-color-basic-black-rgb: 0 0 0;\n  }\n}\n","@layer tokens {\n  :root {\n    /* Font faces */\n\n    /*\n    * @name Font Face - Sans Serif\n    * @description The default font face for the application.\n    * @type Font Face\n    */\n    --nano-font-sans:\n      \"Noto Sans\", \"Noto Sans Fallback: Arial\", arial, sans-serif;\n\n    /*\n    * @name Font Face - Mono\n    * @description The serif font face for the application.\n    * @type Font Face\n    */\n    --nano-font-mono:\n      SFMono-Regular, Consolas, \"Liberation Mono\", Menlo, monospace;\n\n    /*\n    * @name Font Face - Serif\n    * @description The serif font face for the application.\n    * @type Font Face\n    */\n    --nano-font-serif: Georgia, \"Times New Roman\", serif;\n\n    /* Font sizes */\n\n    /*\n    * @name Font Size 2XS\n    * @description The smallest font size.\n    * @type Font Size\n    */\n    --nano-font-size-2xs: 0.75rem; // 12px\n\n    /*\n    * @name Font Size XS\n    * @description The extra small font size.\n    * @type Font Size\n    */\n    --nano-font-size-xs: 0.875rem; // 14px\n\n    /*\n    * @name Font Size S\n    * @description The small font size.\n    * @type Font Size\n    */\n    --nano-font-size-sm: 1rem; // 16px\n    --nano-font-size-small: var(--nano-font-size-sm); // 16px\n\n    /*\n    * @name Font Size M\n    * @description The medium font size.\n    * @type Font Size\n    */\n    --nano-font-size-md: 1.125rem; // 18px\n    --nano-font-size-medium: var(--nano-font-size-md); // 18px\n\n    /*\n    * @name Font Size L\n    * @description The large font size.\n    * @type Font Size\n    */\n    --nano-font-size-lg: 1.375rem; // 22px\n    --nano-font-size-l: var(--nano-font-size-lg); // 22px\n\n    /*\n    * @name Font Size XL\n    * @description The extra large font size.\n    * @type Font Size\n    */\n    --nano-font-size-xl: 1.6875rem; // 27px\n\n    /*\n    * @name Font Size 2XL\n    * @description The double extra large font size.\n    * @type Font Size\n    */\n    --nano-font-size-2xl: 2.5rem; // 40px\n\n    /*\n    * @name Font Size 3XL\n    * @description The triple extra large font size.\n    * @type Font Size\n    */\n    --nano-font-size-3xl: 3.25rem; // 52px\n\n    /* Font weights */\n\n    /*\n    * @name Font Weight Thin\n    * @description The thinnest font weight.\n    * @type Font Weight\n    */\n    --nano-font-weight-light: 300;\n\n    /*\n    * @name Font Weight Normal\n    * @description The normal font weight.\n    * @type Font Weight\n    */\n    --nano-font-weight-normal: 400;\n\n    /*\n    * @name Font Weight Bold\n    * @description The bold font weight.\n    * @type Font Weight\n    */\n    --nano-font-weight-bold: 700;\n\n    /* Letter spacings */\n\n    /*\n    * @name Letter Spacing - Tighter\n    * @description The tightest letter spacing.\n    * @type Letter Spacing\n    */\n    --nano-letter-spacing-denser: -0.03em; // -0.48px (at 16px)\n\n    /*\n    * @name Letter Spacing - Dense\n    * @description The tighter dense spacing.\n    * @type Letter Spacing\n    */\n    --nano-letter-spacing-dense: -0.015em; // -0.24px (at 16px)\n\n    /*\n    * @name Letter Spacing - Normal\n    * @description The normal letter spacing.\n    * @type Letter Spacing\n    */\n    --nano-letter-spacing-normal: normal;\n\n    /*\n    * @name Letter Spacing - Loose\n    * @description The loose letter spacing.\n    * @type Letter Spacing\n    */\n    --nano-letter-spacing-loose: 0.025em; // 0.4px (at 16px)\n\n    /*\n    * @name Letter Spacing - Looser\n    * @description The looser letter spacing.\n    * @type Letter Spacing\n    */\n    --nano-letter-spacing-looser: 0.0375em; // 0.6px (at 16px)\n\n    /* Line heights */\n\n    /*\n    * @name Line Height - Tighter\n    * @description The tightest line height.\n    * @type Line Height\n    */\n    --nano-line-height-denser: 1.2;\n\n    /*\n    * @name Line Height - Dense\n    * @description The dense line height.\n    * @type Line Height\n    */\n    --nano-line-height-dense: 1.4;\n\n    /*\n    * @name Line Height - Normal\n    * @description The normal line height.\n    * @type Line Height\n    */\n    --nano-line-height-normal: 1.6;\n\n    /*\n    * @name Line Height - Loose\n    * @description The loose line height.\n    * @type Line Height\n    */\n    --nano-line-height-loose: 1.8;\n\n    /*\n    * @name Line Height - Looser\n    * @description The looser line height.\n    * @type Line Height\n    */\n    --nano-line-height-looser: 2;\n  }\n\n  // Mobile\n  @media (width <=767px) {\n    :root {\n      /* Font sizes */\n\n      /*\n      * @name Font Size 2XS (Mobile)\n      * @description The smallest font size on mobile.\n      * @type Font Size\n      */\n      --nano-font-size-l: 1.3125rem; // 21px\n\n      /*\n      * @name Font Size XS (Mobile)\n      * @description The extra small font size on mobile.\n      * @type Font Size\n      */\n      --nano-font-size-xl: 1.5rem; // 24px\n\n      /*\n      * @name Font Size S (Mobile)\n      * @description The small font size on mobile.\n      * @type Font Size\n      */\n      --nano-font-size-2xl: 2.125rem; // 34px\n\n      /*\n      * @name Font Size M (Mobile)\n      * @description The medium font size on mobile.\n      * @type Font Size\n      */\n      --nano-font-size-3xl: 2.625rem; // 42px\n    }\n  }\n\n  // Japanese font-face\n  :root[lang^=\"ja-\"] {\n    --nano-font-sans:\n      \"Noto Sans JP\", \"Noto Sans JP Fallback: Arial\", arial, sans-serif;\n  }\n\n  // Simplified Chinese font-face\n  :root[lang^=\"zh-\"] {\n    --nano-font-sans:\n      \"Noto Sans SC\", \"Noto Sans SC Fallback: Arial\", arial, sans-serif;\n  }\n}\n","@layer tokens {\n  :root {\n    /* Spacing */\n\n    /**\n    * @name Spacing - XS\n    * @description The smallest spacing.\n    * @type Spacing\n    */\n    --nano-spacing-xs: 0.3125rem; // 5px;\n\n    /*\n    * @name Spacing - SM\n    * @description The small spacing.\n    * @type Spacing\n    */\n    --nano-spacing-sm: 0.625rem; // 10px;\n\n    /*\n    * @name Spacing - L3\n    * @description The spacing for L3.\n    * @type Spacing\n    */\n    --nano-spacing-l3: var(--nano-spacing-sm);\n\n    /*\n    * @name Spacing - MD\n    * @description The medium spacing.\n    * @type Spacing\n    */\n    --nano-spacing-md: 1.25rem; // 20px\n\n    /*\n    * @name Spacing - L2\n    * @description The spacing for L2.\n    * @type Spacing\n    */\n    --nano-spacing-l2: var(--nano-spacing-md);\n\n    /*\n    * @name Spacing - L\n    * @description The large spacing.\n    * @type Spacing\n    */\n    --nano-spacing-l: 1.875rem; // 30px\n\n    /*\n    * @name Spacing - XL\n    * @description The extra large spacing.\n    * @type Spacing\n    */\n    --nano-spacing-xl: 2.5rem; // 40px\n\n    /*\n    * @name Spacing - L1 Default\n    * @description The default spacing for L1.\n    * @type Spacing\n    */\n    --nano-spacing-l1-default: var(--nano-spacing-xl);\n\n    /*\n    * @name Spacing - 2XL\n    * @description The largest spacing.\n    * @type Spacing\n    */\n    --nano-spacing-2xl: 3.75rem; // 60px\n\n    /*\n    * @name Spacing - L1 Feature\n    * @description The spacing for L1 feature.\n    * @type Spacing\n    */\n    --nano-spacing-l1-feature: var(--nano-spacing-2xl);\n  }\n\n  /* Tablet */\n  @media (width <= 1024px) {\n    :root {\n      --nano-spacing-l1-feature: 3.125rem; // 50px\n      --nano-spacing-l1-default: var(--nano-spacing-l);\n      --nano-spacing-l2: var(--nano-spacing-md);\n      --nano-spacing-l3: var(--nano-spacing-sm);\n    }\n  }\n\n  /* Mobile */\n  @media (width <= 767px) {\n    :root {\n      --nano-spacing-l1-feature: var(--nano-spacing-xl);\n      --nano-spacing-l1-default: var(--nano-spacing-md);\n      --nano-spacing-l: var(--nano-spacing-md);\n      --nano-spacing-l2: var(--nano-spacing-sm);\n      --nano-spacing-l3: var(--nano-spacing-sm);\n    }\n  }\n}\n","@layer tokens {\n  :root {\n    /*\n    * @name Border Radius - Small\n    * @description A small border radius for subtle rounding.\n    * @type Border Radius\n    */\n    --nano-border-radius-small: 0.1875rem;\n\n    /* 3px */\n\n    /*\n    * @name Border Radius - Medium\n    * @description A medium border radius for moderate rounding.\n    * @type Border Radius\n    */\n    --nano-border-radius-medium: 0.25rem;\n\n    /* 4px */\n\n    /*\n    * @name Border Radius - Large\n    * @description A large border radius for significant rounding.\n    * @type Border Radius\n    */\n    --nano-border-radius-large: 0.5rem;\n\n    /* 8px */\n\n    /*\n    * @name Border Radius - X-Large\n    * @description An extra-large border radius for highly rounded elements.\n    * @type Border Radius\n    */\n    --nano-border-radius-x-large: 1rem;\n\n    /* 16px */\n\n    /*\n    * @name Border Radius - Circle\n    * @description A border radius for creating circular shapes.\n    * @type Border Radius\n    */\n    --nano-border-radius-circle: 50%;\n\n    /*\n    * @name Border Radius - Pill\n    * @description A border radius for creating pill-shaped elements.\n    * @type Border Radius\n    */\n    --nano-border-radius-pill: 9999px;\n\n    /*\n    * @name Transition - X-Fast\n    * @description An extra-fast transition duration.\n    * @type Transitions\n    */\n    --nano-transition-x-fast: 120ms;\n\n    /*\n    * @name Transition - Fast\n    * @description A fast transition duration.\n    * @type Transitions\n    */\n    --nano-transition-fast: 300ms;\n\n    /*\n    * @name Transition - Medium\n    * @description A medium transition duration.\n    * @type Transitions\n    */\n    --nano-transition-medium: 500ms;\n\n    /*\n    * @name Transition - Slow\n    * @description A slow transition duration.\n    * @type Transitions\n    */\n    --nano-transition-slow: 700ms;\n\n    /*\n    * @name Transition - X-Slow\n    * @description An extra-slow transition duration.\n    * @type Transitions\n    */\n    --nano-transition-x-slow: 1000ms;\n\n    /*\n    * @name Focus Ring - Color\n    * @description The color of the focus ring.\n    * @type Focus Rings\n    */\n    --nano-focus-ring-color: var(--nano-color-blue-cerulean-700);\n\n    /*\n    * @name Focus Ring - Style\n    * @description The style of the focus ring.\n    * @type Focus Rings\n    */\n    --nano-focus-ring-style: solid;\n\n    /*\n    * @name Focus Ring - Width\n    * @description The width of the focus ring.\n    * @type Focus Rings\n    */\n    --nano-focus-ring-width: 3px;\n\n    /*\n    * @name Focus Ring - Primary\n    * @description The primary focus ring.\n    * @type Focus Rings\n    */\n    --nano-focus-ring: var(--nano-focus-ring-style) var(--nano-focus-ring-width)\n      var(--nano-focus-ring-color);\n\n    /*\n    * @name Focus Ring - Offset\n    * @description The offset of the focus ring from the element.\n    * @type Focus Rings\n    */\n    --nano-focus-ring-offset: 1px;\n\n    /*\n    * @name Icon Size - Small\n    * @description The size of small icons.\n    * @type Icon Sizes\n    */\n    --nano-icon-size-small: 16px;\n\n    /*\n    * @name Pictogram Size - Small\n    * @description The size of small pictograms.\n    * @type Icon Sizes\n    */\n    --nano-pictogram-size-small: 24px;\n\n    /*\n    * @name Pictogram Size - Medium\n    * @description The size of medium pictograms.\n    * @type Icon Sizes\n    */\n    --nano-pictogram-size-medium: 32px;\n\n    /*\n    * @name Icon Size - Large\n    * @description The size of large icons.\n    * @type Icon Sizes\n    */\n    --nano-icon-size-large: 32px;\n\n    /*\n    * @name Pictogram Size - Large\n    * @description The size of large pictograms.\n    * @type Icon Sizes\n    */\n    --nano-pictogram-size-large: 48px;\n\n    /*\n    * @name Pictogram Size - X-Large\n    * @description The size of extra-large pictograms.\n    * @type Icon Sizes\n    */\n    --nano-pictogram-size-x-large: 64px;\n\n    /*\n    * @name Image Ratio - Landscape\n    * @description The aspect ratio for landscape images.\n    * @type Image Ratios\n    */\n    --nano-image-ratio-landscape: 16/9;\n\n    /*\n    * @name Image Ratio - Square\n    * @description The aspect ratio for square images.\n    * @type Image Ratios\n    */\n    --nano-image-ratio-square: 1/1;\n\n    /*\n    * @name Image Ratio - Portrait\n    * @description The aspect ratio for portrait images.\n    * @type Image Ratios\n    */\n    --nano-image-ratio-portrait: 3/4;\n\n    /*\n    * @name Z-Index - Basic\n    * @description The z-index for basic elements.\n    * @type Z-Index\n    */\n    --nano-z-index: 2;\n\n    /*\n    * @name Z-Index - Raised\n    * @description The z-index for slightly raised elements.\n    * @type Z-Index\n    */\n    --nano-z-index-raised: 5;\n\n    /*\n    * @name Z-Index - Menubar\n    * @description The z-index for menubar elements.\n    * @type Z-Index\n    */\n    --nano-z-index-menubar: 10;\n\n    /*\n    * @name Z-Index - Mask\n    * @description The z-index for mask elements.\n    * @type Z-Index\n    */\n    --nano-z-index-mask: 50;\n\n    /*\n    * @name Z-Index - Dropdown\n    * @description The z-index for dropdown elements.\n    * @type Z-Index\n    */\n    --nano-z-index-dropdown: 300;\n\n    /*\n    * @name Z-Index - Modal\n    * @description The z-index for modal elements.\n    * @type Z-Index\n    */\n    --nano-z-index-modal: 700;\n\n    /*\n    * @name Z-Index - Alert\n    * @description The z-index for alert elements.\n    * @type Z-Index\n    */\n    --nano-z-index-alert: 800;\n\n    /*\n    * @name Z-Index - Tooltip\n    * @description The z-index for tooltip elements.\n    * @type Z-Index\n    */\n    --nano-z-index-tooltip: 1000;\n  }\n}\n"]}