[{"data":1,"prerenderedAt":12073},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-design-tokens-typography":682,"-docs-theme-design-tokens-typography-surround":12068},{"gettingStarted":4,"api":71,"theme":162},[5,36,51],{"title":6,"icon":7,"path":8,"stem":9,"children":10,"page":7},"Getting Started",false,"\u002Fdocs\u002Fgetting-started","docs\u002Fgetting-started",[11,16,21,26,31],{"title":12,"path":13,"stem":14,"icon":15},"Introduction","\u002Fdocs\u002Fgetting-started\u002Fintroduction","docs\u002Fgetting-started\u002F01.introduction","i-lucide-house",{"title":17,"path":18,"stem":19,"icon":20},"Installation","\u002Fdocs\u002Fgetting-started\u002Finstallation","docs\u002Fgetting-started\u002F02.installation","i-lucide-download",{"title":22,"path":23,"stem":24,"icon":25},"Guides","\u002Fdocs\u002Fgetting-started\u002Fguides","docs\u002Fgetting-started\u002F03.guides","i-lucide-book-open",{"title":27,"path":28,"stem":29,"icon":30},"Comparisons","\u002Fdocs\u002Fgetting-started\u002Fcomparisons","docs\u002Fgetting-started\u002F06.comparisons","i-lucide-file-diff",{"title":32,"path":33,"stem":34,"icon":35},"Licensing","\u002Fdocs\u002Fgetting-started\u002Flicensing","docs\u002Fgetting-started\u002F07.licensing","i-lucide-scale",{"title":37,"icon":7,"path":38,"stem":39,"children":40,"page":7},"Tooling","\u002Fdocs\u002Fgetting-started\u002Ftooling","docs\u002Fgetting-started\u002Ftooling",[41,46],{"title":42,"path":43,"stem":44,"icon":45},"CLI Reference","\u002Fdocs\u002Fgetting-started\u002Ftooling\u002Fcli","docs\u002Fgetting-started\u002Ftooling\u002F01.cli","i-lucide-square-terminal",{"title":47,"path":48,"stem":49,"icon":50},"Utility Scanner","\u002Fdocs\u002Fgetting-started\u002Ftooling\u002Fscanner","docs\u002Fgetting-started\u002Ftooling\u002F02.scanner","i-lucide-view",{"title":52,"icon":7,"path":53,"stem":54,"children":55,"page":7},"Integrations","\u002Fdocs\u002Fgetting-started\u002Fintegrations","docs\u002Fgetting-started\u002Fintegrations",[56,61,66],{"title":57,"path":58,"stem":59,"icon":60},"DTCG","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fdtcg","docs\u002Fgetting-started\u002Fintegrations\u002F01.dtcg","i-lucide-square-code",{"title":62,"path":63,"stem":64,"icon":65},"Figma Plugin","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Ffigma-plugin","docs\u002Fgetting-started\u002Fintegrations\u002F02.figma-plugin","i-simple-icons-figma",{"title":67,"path":68,"stem":69,"icon":70},"Storybook","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fstorybook","docs\u002Fgetting-started\u002Fintegrations\u002F03.storybook","i-simple-icons-storybook",[72],{"title":73,"path":74,"stem":75,"children":76,"icon":7},"API Reference","\u002Fdocs\u002Fapi","docs\u002Fapi\u002F00.index",[77,80,85,90,95,100,105,110,115,120,125,130,145,150,155,160],{"title":78,"path":74,"stem":75,"icon":79},"Overview","i-lucide-book-text",{"title":81,"path":82,"stem":83,"icon":84},"Instance","\u002Fdocs\u002Fapi\u002Finstance","docs\u002Fapi\u002F01.instance","i-lucide-cloud-lightning",{"title":86,"path":87,"stem":88,"icon":89},"Variables","\u002Fdocs\u002Fapi\u002Fvariables","docs\u002Fapi\u002F02.variables","i-lucide-variable",{"title":91,"path":92,"stem":93,"icon":94},"Selectors","\u002Fdocs\u002Fapi\u002Fselectors","docs\u002Fapi\u002F03.selectors","i-lucide-scan-text",{"title":96,"path":97,"stem":98,"icon":99},"At-Rules","\u002Fdocs\u002Fapi\u002Fat-rules","docs\u002Fapi\u002F04.at-rules","i-lucide-at-sign",{"title":101,"path":102,"stem":103,"icon":104},"Media Queries","\u002Fdocs\u002Fapi\u002Fmedia-queries","docs\u002Fapi\u002F05.media-queries","i-lucide-image-upscale",{"title":106,"path":107,"stem":108,"icon":109},"Keyframes","\u002Fdocs\u002Fapi\u002Fkeyframes","docs\u002Fapi\u002F06.keyframes","i-lucide-square-play",{"title":111,"path":112,"stem":113,"icon":114},"Interpolation","\u002Fdocs\u002Fapi\u002Finterpolation","docs\u002Fapi\u002F07.interpolation","i-lucide-wrap-text",{"title":116,"path":117,"stem":118,"icon":119},"Utilities","\u002Fdocs\u002Fapi\u002Futilities","docs\u002Fapi\u002F08.utilities","i-lucide-sparkles",{"title":121,"path":122,"stem":123,"icon":124},"Utility Modifiers","\u002Fdocs\u002Fapi\u002Futility-modifiers","docs\u002Fapi\u002F09.utility-modifiers","i-lucide-align-horizontal-justify-center",{"title":126,"path":127,"stem":128,"icon":129},"Themes","\u002Fdocs\u002Fapi\u002Fthemes","docs\u002Fapi\u002F10.themes","i-lucide-paintbrush",{"title":131,"path":132,"stem":133,"children":134,"icon":144},"Recipes","\u002Fdocs\u002Fapi\u002Frecipes","docs\u002Fapi\u002F11.recipes\u002F00.index",[135,136,140],{"title":78,"path":132,"stem":133},{"title":137,"path":138,"stem":139},"Runtime","\u002Fdocs\u002Fapi\u002Frecipes\u002Fruntime","docs\u002Fapi\u002F11.recipes\u002F01.runtime",{"title":141,"path":142,"stem":143},"Output Format","\u002Fdocs\u002Fapi\u002Frecipes\u002Foutput-format","docs\u002Fapi\u002F11.recipes\u002F02.output-format","i-lucide-chef-hat",{"title":146,"path":147,"stem":148,"icon":149},"Composables","\u002Fdocs\u002Fapi\u002Fcomposables","docs\u002Fapi\u002F12.composables","i-lucide-component",{"title":151,"path":152,"stem":153,"icon":154},"Imports","\u002Fdocs\u002Fapi\u002Fimports","docs\u002Fapi\u002F13.imports","i-lucide-file-input",{"title":156,"path":157,"stem":158,"icon":159},"Merging","\u002Fdocs\u002Fapi\u002Fmerging","docs\u002Fapi\u002F13.merging","i-lucide-squares-intersect",{"title":151,"path":152,"stem":161,"icon":154},"docs\u002Fapi\u002F14.imports",[163,243,357,558,635],{"title":164,"path":165,"stem":166,"children":167,"icon":7},"Design Tokens","\u002Fdocs\u002Ftheme\u002Fdesign-tokens","docs\u002Ftheme\u002Fdesign-tokens\u002F00.index",[168,169,174,179,184,189,194,199,204,209,224,228,233,238],{"title":78,"path":165,"stem":166,"icon":79},{"title":170,"path":171,"stem":172,"icon":173},"Preset","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fpreset","docs\u002Ftheme\u002Fdesign-tokens\u002F01.preset","i-lucide-package",{"title":175,"path":176,"stem":177,"icon":178},"Border Radiuses","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fborder-radiuses","docs\u002Ftheme\u002Fdesign-tokens\u002F02.border-radiuses","i-lucide-square-round-corner",{"title":180,"path":181,"stem":182,"icon":183},"Borders","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fborders","docs\u002Ftheme\u002Fdesign-tokens\u002F03.borders","i-lucide-square-dashed-top-solid",{"title":185,"path":186,"stem":187,"icon":188},"Box Shadows","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fbox-shadows","docs\u002Ftheme\u002Fdesign-tokens\u002F04.box-shadows","i-lucide-layers-2",{"title":190,"path":191,"stem":192,"icon":193},"Breakpoints","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fbreakpoints","docs\u002Ftheme\u002Fdesign-tokens\u002F05.breakpoints","i-lucide-monitor-smartphone",{"title":195,"path":196,"stem":197,"icon":198},"Colors","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fcolors","docs\u002Ftheme\u002Fdesign-tokens\u002F06.colors","i-lucide-palette",{"title":200,"path":201,"stem":202,"icon":203},"Duration","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fduration","docs\u002Ftheme\u002Fdesign-tokens\u002F07.duration","i-lucide-timer",{"title":205,"path":206,"stem":207,"icon":208},"Easing","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Feasing","docs\u002Ftheme\u002Fdesign-tokens\u002F08.easing","i-lucide-spline",{"title":210,"path":211,"stem":212,"children":213,"icon":104,"defaultOpen":223},"Fluid Design","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ffluid-design","docs\u002Ftheme\u002Fdesign-tokens\u002F09.fluid-design\u002F01.index",[214,215,219],{"title":78,"path":211,"stem":212},{"title":216,"path":217,"stem":218},"Fluid Viewport","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ffluid-design\u002Fviewport","docs\u002Ftheme\u002Fdesign-tokens\u002F09.fluid-design\u002F02.viewport",{"title":220,"path":221,"stem":222},"Fluid Typography","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ffluid-design\u002Ftypography","docs\u002Ftheme\u002Fdesign-tokens\u002F09.fluid-design\u002F03.typography",true,{"title":225,"path":226,"stem":227,"icon":35},"Scales","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fscales","docs\u002Ftheme\u002Fdesign-tokens\u002F10.scales",{"title":229,"path":230,"stem":231,"icon":232},"Spacing","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fspacing","docs\u002Ftheme\u002Fdesign-tokens\u002F11.spacing","i-lucide-move-horizontal",{"title":234,"path":235,"stem":236,"icon":237},"Typography","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ftypography","docs\u002Ftheme\u002Fdesign-tokens\u002F12.typography","i-lucide-type",{"title":239,"path":240,"stem":241,"icon":242},"Z-Index","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fz-index","docs\u002Ftheme\u002Fdesign-tokens\u002F13.z-index","i-lucide-layers",{"title":244,"path":245,"stem":246,"children":247,"icon":7},"Elements","\u002Fdocs\u002Ftheme\u002Felements","docs\u002Ftheme\u002Felements\u002F00.index",[248,249,252,259,281,301,313,329,341],{"title":78,"path":245,"stem":246,"icon":79},{"title":170,"path":250,"stem":251,"icon":173},"\u002Fdocs\u002Ftheme\u002Felements\u002Fpreset","docs\u002Ftheme\u002Felements\u002F01.preset",{"title":253,"icon":242,"defaultOpen":223,"page":7,"children":254},"Base",[255],{"title":256,"path":257,"stem":258,"icon":7},"Body","\u002Fdocs\u002Ftheme\u002Felements\u002Fbody","docs\u002Ftheme\u002Felements\u002F02.base\u002F00.body",{"title":234,"icon":237,"defaultOpen":223,"page":7,"children":260},[261,265,269,273,277],{"title":262,"path":263,"stem":264,"icon":7},"Headings","\u002Fdocs\u002Ftheme\u002Felements\u002Fheadings","docs\u002Ftheme\u002Felements\u002F03.typography\u002F01.headings",{"title":266,"path":267,"stem":268,"icon":7},"Paragraphs","\u002Fdocs\u002Ftheme\u002Felements\u002Fparagraphs","docs\u002Ftheme\u002Felements\u002F03.typography\u002F02.paragraphs",{"title":270,"path":271,"stem":272,"icon":7},"Links","\u002Fdocs\u002Ftheme\u002Felements\u002Flinks","docs\u002Ftheme\u002Felements\u002F03.typography\u002F03.links",{"title":274,"path":275,"stem":276,"icon":7},"Lists","\u002Fdocs\u002Ftheme\u002Felements\u002Flists","docs\u002Ftheme\u002Felements\u002F03.typography\u002F04.lists",{"title":278,"path":279,"stem":280,"icon":7},"Definition Lists","\u002Fdocs\u002Ftheme\u002Felements\u002Fdefinition-lists","docs\u002Ftheme\u002Felements\u002F03.typography\u002F05.definition-lists",{"title":282,"icon":283,"defaultOpen":223,"page":7,"children":284},"Inline Text","i-lucide-whole-word",[285,289,293,297],{"title":286,"path":287,"stem":288,"icon":7},"Abbreviation","\u002Fdocs\u002Ftheme\u002Felements\u002Fabbreviation","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F00.abbreviation",{"title":290,"path":291,"stem":292,"icon":7},"Code","\u002Fdocs\u002Ftheme\u002Felements\u002Fcode","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F01.code",{"title":294,"path":295,"stem":296,"icon":7},"Kbd","\u002Fdocs\u002Ftheme\u002Felements\u002Fkbd","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F02.kbd",{"title":298,"path":299,"stem":300,"icon":7},"Mark","\u002Fdocs\u002Ftheme\u002Felements\u002Fmark","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F03.mark",{"title":302,"icon":303,"defaultOpen":223,"page":7,"children":304},"Media & Embeds","i-lucide-image",[305,309],{"title":306,"path":307,"stem":308,"icon":7},"Image","\u002Fdocs\u002Ftheme\u002Felements\u002Fimage","docs\u002Ftheme\u002Felements\u002F05.media\u002F00.image",{"title":310,"path":311,"stem":312,"icon":7},"Iframe","\u002Fdocs\u002Ftheme\u002Felements\u002Fiframe","docs\u002Ftheme\u002Felements\u002F05.media\u002F01.iframe",{"title":314,"icon":315,"defaultOpen":223,"page":7,"children":316},"Forms & Tables","i-lucide-table",[317,321,325],{"title":318,"path":319,"stem":320,"icon":7},"Caption","\u002Fdocs\u002Ftheme\u002Felements\u002Fcaption","docs\u002Ftheme\u002Felements\u002F06.forms-tables\u002F00.caption",{"title":322,"path":323,"stem":324,"icon":7},"Legend","\u002Fdocs\u002Ftheme\u002Felements\u002Flegend","docs\u002Ftheme\u002Felements\u002F06.forms-tables\u002F01.legend",{"title":326,"path":327,"stem":328,"icon":7},"Output","\u002Fdocs\u002Ftheme\u002Felements\u002Foutput","docs\u002Ftheme\u002Felements\u002F06.forms-tables\u002F02.output",{"title":330,"icon":331,"defaultOpen":223,"page":7,"children":332},"Structure","i-lucide-separator-horizontal",[333,337],{"title":334,"path":335,"stem":336,"icon":7},"Address","\u002Fdocs\u002Ftheme\u002Felements\u002Faddress","docs\u002Ftheme\u002Felements\u002F07.structure\u002F00.address",{"title":338,"path":339,"stem":340,"icon":7},"Horizontal Rule","\u002Fdocs\u002Ftheme\u002Felements\u002Fhorizontal-rule","docs\u002Ftheme\u002Felements\u002F07.structure\u002F01.horizontal-rule",{"title":342,"icon":343,"defaultOpen":223,"page":7,"children":344},"States","i-lucide-mouse-pointer-click",[345,349,353],{"title":346,"path":347,"stem":348,"icon":7},"Focus","\u002Fdocs\u002Ftheme\u002Felements\u002Ffocus","docs\u002Ftheme\u002Felements\u002F08.states\u002F00.focus",{"title":350,"path":351,"stem":352,"icon":7},"Selection","\u002Fdocs\u002Ftheme\u002Felements\u002Fselection","docs\u002Ftheme\u002Felements\u002F08.states\u002F01.selection",{"title":354,"path":355,"stem":356,"icon":7},"Summary","\u002Fdocs\u002Ftheme\u002Felements\u002Fsummary","docs\u002Ftheme\u002Felements\u002F08.states\u002F02.summary",{"title":358,"path":359,"stem":360,"children":361,"icon":7},"Components","\u002Fdocs\u002Ftheme\u002Fcomponents","docs\u002Ftheme\u002Fcomponents\u002F00.index",[362,363,375,399,427,491,518,550],{"title":78,"path":359,"stem":360,"icon":79},{"title":364,"icon":365,"defaultOpen":223,"page":7,"children":366},"Actions","i-lucide-square-mouse-pointer",[367,371],{"title":368,"path":369,"stem":370,"icon":7},"Button","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fbutton","docs\u002Ftheme\u002Fcomponents\u002F02.actions\u002F00.button",{"title":372,"path":373,"stem":374,"icon":7},"Hamburger Menu","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fhamburger-menu","docs\u002Ftheme\u002Fcomponents\u002F02.actions\u002F01.hamburger-menu",{"title":376,"icon":377,"defaultOpen":223,"page":7,"children":378},"Navigation","i-lucide-navigation",[379,383,387,391,395],{"title":380,"path":381,"stem":382,"icon":7},"Breadcrumb","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fbreadcrumb","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F00.breadcrumb",{"title":384,"path":385,"stem":386,"icon":7},"Nav","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fnav","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F01.nav",{"title":388,"path":389,"stem":390,"icon":7},"Pagination","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fpagination","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F02.pagination",{"title":392,"path":393,"stem":394,"icon":7},"Sidebar","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fsidebar","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F03.sidebar",{"title":396,"path":397,"stem":398,"icon":7},"Tabs","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftabs","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F04.tabs",{"title":400,"icon":401,"defaultOpen":223,"page":7,"children":402},"Feedback","i-lucide-megaphone",[403,407,411,415,419,423],{"title":404,"path":405,"stem":406,"icon":7},"Badge","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fbadge","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F00.badge",{"title":408,"path":409,"stem":410,"icon":7},"Callout","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcallout","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F01.callout",{"title":412,"path":413,"stem":414,"icon":7},"Chip","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fchip","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F02.chip",{"title":416,"path":417,"stem":418,"icon":7},"Progress","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fprogress","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F03.progress",{"title":420,"path":421,"stem":422,"icon":7},"Skeleton","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fskeleton","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F04.skeleton",{"title":424,"path":425,"stem":426,"icon":7},"Spinner","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fspinner","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F05.spinner",{"title":428,"icon":429,"defaultOpen":223,"page":7,"children":430},"Forms","i-lucide-text-cursor-input",[431,435,439,443,447,451,455,459,463,467,471,475,479,483,487],{"title":432,"path":433,"stem":434,"icon":7},"Calendar","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcalendar","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F00.calendar",{"title":436,"path":437,"stem":438,"icon":7},"Checkbox","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcheckbox","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F01.checkbox",{"title":440,"path":441,"stem":442,"icon":7},"Checkbox Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcheckbox-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F02.checkbox-group",{"title":444,"path":445,"stem":446,"icon":7},"Color Picker","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcolor-picker","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F03.color-picker",{"title":448,"path":449,"stem":450,"icon":7},"Field Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ffield-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F04.field-group",{"title":452,"path":453,"stem":454,"icon":7},"Input","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Finput","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F05.input",{"title":456,"path":457,"stem":458,"icon":7},"OTP","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fotp","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F06.otp",{"title":460,"path":461,"stem":462,"icon":7},"Radio","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fradio","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F07.radio",{"title":464,"path":465,"stem":466,"icon":7},"Radio Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fradio-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F08.radio-group",{"title":468,"path":469,"stem":470,"icon":7},"Select","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fselect","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F09.select",{"title":472,"path":473,"stem":474,"icon":7},"Slider","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fslider","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F10.slider",{"title":476,"path":477,"stem":478,"icon":7},"Switch","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fswitch","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F11.switch",{"title":480,"path":481,"stem":482,"icon":7},"Textarea","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftextarea","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F12.textarea",{"title":484,"path":485,"stem":486,"icon":7},"Toggle","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftoggle","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F13.toggle",{"title":488,"path":489,"stem":490,"icon":7},"Toggle Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftoggle-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F14.toggle-group",{"title":492,"icon":242,"defaultOpen":223,"page":7,"children":493},"Overlays",[494,498,502,506,510,514],{"title":495,"path":496,"stem":497,"icon":7},"ContextMenu","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcontext-menu","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F00.context-menu",{"title":499,"path":500,"stem":501,"icon":7},"Drawer","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fdrawer","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F01.drawer",{"title":503,"path":504,"stem":505,"icon":7},"Dropdown","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fdropdown","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F02.dropdown",{"title":507,"path":508,"stem":509,"icon":7},"Modal","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fmodal","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F03.modal",{"title":511,"path":512,"stem":513,"icon":7},"Popover","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fpopover","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F04.popover",{"title":515,"path":516,"stem":517,"icon":7},"Tooltip","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftooltip","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F05.tooltip",{"title":519,"icon":520,"defaultOpen":223,"page":7,"children":521},"Layout","i-lucide-layout",[522,526,530,534,538,542,546],{"title":523,"path":524,"stem":525,"icon":7},"Accordion","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Faccordion","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F00.accordion",{"title":527,"path":528,"stem":529,"icon":7},"Avatar","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Favatar","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F01.avatar",{"title":531,"path":532,"stem":533,"icon":7},"Avatar Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Favatar-group","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F02.avatar-group",{"title":535,"path":536,"stem":537,"icon":7},"Card","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcard","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F03.card",{"title":539,"path":540,"stem":541,"icon":7},"Media","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fmedia","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F04.media",{"title":543,"path":544,"stem":545,"icon":7},"PageHero","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fpage-hero","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F05.page-hero",{"title":547,"path":548,"stem":549,"icon":7},"Placeholder","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fplaceholder","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F06.placeholder",{"title":551,"icon":552,"defaultOpen":223,"page":7,"children":553},"AI Chat","i-lucide-message-circle",[554],{"title":555,"path":556,"stem":557,"icon":7},"ChatMessage","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fchat-message","docs\u002Ftheme\u002Fcomponents\u002F08.ai-chat\u002F00.chat-message",{"title":116,"path":559,"stem":560,"children":561,"icon":7},"\u002Fdocs\u002Ftheme\u002Futilities","docs\u002Ftheme\u002Futilities\u002F00.index",[562,563,567,572,577,581,584,588,593,598,602,605,610,613,618,622,627,632],{"title":78,"path":559,"stem":560,"icon":79},{"title":564,"path":565,"stem":566,"icon":173},"Presets","\u002Fdocs\u002Ftheme\u002Futilities\u002Fpreset","docs\u002Ftheme\u002Futilities\u002F01.preset",{"title":568,"path":569,"stem":570,"icon":571},"Accessibility","\u002Fdocs\u002Ftheme\u002Futilities\u002Faccessibility","docs\u002Ftheme\u002Futilities\u002F02.accessibility","i-lucide-accessibility",{"title":573,"path":574,"stem":575,"icon":576},"Animations","\u002Fdocs\u002Ftheme\u002Futilities\u002Fanimations","docs\u002Ftheme\u002Futilities\u002F03.animations","i-lucide-loader-circle",{"title":578,"path":579,"stem":580,"icon":303},"Backgrounds","\u002Fdocs\u002Ftheme\u002Futilities\u002Fbackgrounds","docs\u002Ftheme\u002Futilities\u002F04.backgrounds",{"title":180,"path":582,"stem":583,"icon":183},"\u002Fdocs\u002Ftheme\u002Futilities\u002Fborders","docs\u002Ftheme\u002Futilities\u002F05.borders",{"title":585,"path":586,"stem":587,"icon":119},"Effects","\u002Fdocs\u002Ftheme\u002Futilities\u002Feffects","docs\u002Ftheme\u002Futilities\u002F06.effects",{"title":589,"path":590,"stem":591,"icon":592},"Filters","\u002Fdocs\u002Ftheme\u002Futilities\u002Ffilters","docs\u002Ftheme\u002Futilities\u002F07.filters","i-lucide-aperture",{"title":594,"path":595,"stem":596,"icon":597},"Flexbox & Grid","\u002Fdocs\u002Ftheme\u002Futilities\u002Fflexbox-grid","docs\u002Ftheme\u002Futilities\u002F08.flexbox-grid","i-lucide-layout-grid",{"title":599,"path":600,"stem":601,"icon":343},"Interactivity","\u002Fdocs\u002Ftheme\u002Futilities\u002Finteractivity","docs\u002Ftheme\u002Futilities\u002F09.interactivity",{"title":519,"path":603,"stem":604,"icon":520},"\u002Fdocs\u002Ftheme\u002Futilities\u002Flayout","docs\u002Ftheme\u002Futilities\u002F10.layout",{"title":606,"path":607,"stem":608,"icon":609},"Sizing","\u002Fdocs\u002Ftheme\u002Futilities\u002Fsizing","docs\u002Ftheme\u002Futilities\u002F11.sizing","i-lucide-scaling",{"title":229,"path":611,"stem":612,"icon":232},"\u002Fdocs\u002Ftheme\u002Futilities\u002Fspacing","docs\u002Ftheme\u002Futilities\u002F12.spacing",{"title":614,"path":615,"stem":616,"icon":617},"SVG","\u002Fdocs\u002Ftheme\u002Futilities\u002Fsvg","docs\u002Ftheme\u002Futilities\u002F13.svg","i-lucide-pen-tool",{"title":619,"path":620,"stem":621,"icon":315},"Tables","\u002Fdocs\u002Ftheme\u002Futilities\u002Ftables","docs\u002Ftheme\u002Futilities\u002F14.tables",{"title":623,"path":624,"stem":625,"icon":626},"Transforms","\u002Fdocs\u002Ftheme\u002Futilities\u002Ftransforms","docs\u002Ftheme\u002Futilities\u002F15.transforms","i-lucide-rotate-3d",{"title":628,"path":629,"stem":630,"icon":631},"Transitions","\u002Fdocs\u002Ftheme\u002Futilities\u002Ftransitions","docs\u002Ftheme\u002Futilities\u002F16.transitions","i-lucide-arrow-left-right",{"title":234,"path":633,"stem":634,"icon":237},"\u002Fdocs\u002Ftheme\u002Futilities\u002Ftypography","docs\u002Ftheme\u002Futilities\u002F17.typography",{"title":636,"path":637,"stem":638,"children":639,"icon":7},"Modifiers","\u002Fdocs\u002Ftheme\u002Fmodifiers","docs\u002Ftheme\u002Fmodifiers\u002F00.index",[640,641,644,648,653,657,662,667,672,677],{"title":78,"path":637,"stem":638,"icon":79},{"title":564,"path":642,"stem":643,"icon":173},"\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fpreset","docs\u002Ftheme\u002Fmodifiers\u002F01.preset",{"title":645,"path":646,"stem":647,"icon":571},"ARIA State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Faria-state","docs\u002Ftheme\u002Fmodifiers\u002F02.aria-state",{"title":649,"path":650,"stem":651,"icon":652},"Directional","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fdirectional","docs\u002Ftheme\u002Fmodifiers\u002F03.directional","i-lucide-flip-horizontal",{"title":654,"path":655,"stem":656,"icon":429},"Form State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fform-state","docs\u002Ftheme\u002Fmodifiers\u002F04.form-state",{"title":658,"path":659,"stem":660,"icon":661},"Media & Preferences","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fmedia-preferences","docs\u002Ftheme\u002Fmodifiers\u002F05.media-preferences","i-lucide-sun-moon",{"title":663,"path":664,"stem":665,"icon":666},"Other State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fother-state","docs\u002Ftheme\u002Fmodifiers\u002F06.other-state","i-lucide-toggle-left",{"title":668,"path":669,"stem":670,"icon":671},"Pseudo-Elements","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fpseudo-elements","docs\u002Ftheme\u002Fmodifiers\u002F07.pseudo-elements","i-lucide-box-select",{"title":673,"path":674,"stem":675,"icon":676},"Pseudo-State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fpseudo-state","docs\u002Ftheme\u002Fmodifiers\u002F08.pseudo-state","i-lucide-pointer",{"title":678,"path":679,"stem":680,"icon":681},"Structural","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fstructural","docs\u002Ftheme\u002Fmodifiers\u002F09.structural","i-lucide-list-ordered",{"id":683,"title":684,"body":685,"description":12061,"extension":12062,"links":12063,"meta":12064,"navigation":12065,"path":235,"seo":12066,"stem":236,"__hash__":12067},"docs_theme\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002F12.typography.md","Typography Design Tokens",{"type":686,"value":687,"toc":12024},"minimark",[688,746,750,754,758,761,795,800,807,812,815,1197,1200,1237,1251,1255,1258,1602,1606,1609,1980,1985,1991,2341,2348,2358,3468,3473,3479,3487,3492,3498,3501,3837,3839,3937,3941,3944,4218,4222,4225,4505,4510,4516,4519,4739,4741,4780,4794,4798,4801,5036,5040,5043,5262,5266,5269,5487,5492,5498,5501,5742,5744,5793,5802,5806,5809,6059,6063,6066,6289,6294,6300,6303,6543,6545,6595,6604,6608,6611,6878,6882,6884,7169,7173,7176,8502,8506,8510,8513,11082,11086,11089,11733,11737,11911,11920,11924,12020],[689,690,691,695,696,700,701,700,704,700,707,700,710,713,714,717,718,722,723,726,727,700,730,700,733,700,736,700,739,713,742,745],"note",{"icon":173},[692,693,694],"strong",{},"Part of the Design Tokens Preset:"," ",[697,698,699],"code",{},"useFontFamilyDesignTokens",", ",[697,702,703],{},"useFontSizeDesignTokens",[697,705,706],{},"useFontWeightDesignTokens",[697,708,709],{},"useFontStyleDesignTokens",[697,711,712],{},"useLineHeightDesignTokens",", and ",[697,715,716],{},"useLetterSpacingDesignTokens"," are included in the ",[719,720,721],"a",{"href":171},"Design Tokens Preset"," (",[697,724,725],{},"useDesignTokensPreset",") and you can configure them through the preset's ",[697,728,729],{},"fontFamily",[697,731,732],{},"fontSize",[697,734,735],{},"fontWeight",[697,737,738],{},"fontStyle",[697,740,741],{},"lineHeight",[697,743,744],{},"letterSpacing"," options. For most projects, applying them via the preset is the recommended approach.",[747,748,78],"h2",{"id":749},"overview",[751,752,753],"p",{},"The typography composables help you create comprehensive type systems with minimal code. They generate typography-related variables that can be easily referenced throughout your application, enabling flexible theming and consistent text styling across different components and contexts.",[747,755,757],{"id":756},"why-use-typography-composables","Why use typography composables?",[751,759,760],{},"Typography composables help you:",[762,763,764,771,777,783,789],"ul",{},[765,766,767,770],"li",{},[692,768,769],{},"Centralize typography definitions",": Define all your font families, sizes, weights, line heights, and letter spacing in one place.",[765,772,773,776],{},[692,774,775],{},"Enable flexible theming",": Override typography values to instantly update text styles across your application.",[765,778,779,782],{},[692,780,781],{},"Maintain consistency",": Use semantic names to ensure consistent typography usage throughout your design system.",[765,784,785,788],{},[692,786,787],{},"Create harmonious scales",": Integrate with modular scales to generate mathematically proportional type systems.",[765,790,791,794],{},[692,792,793],{},"Simplify maintenance",": Update typography values in one place instead of searching through your codebase.",[747,796,798],{"id":797},"usefontfamilydesigntokens",[697,799,699],{},[751,801,802,803,806],{},"The ",[697,804,805],{},"useFontFamilyDesignTokens()"," function creates a set of font family variables from a simple object of font stack definitions.",[808,809,811],"h3",{"id":810},"default-font-family-values","Default Font Family Values",[751,813,814],{},"Styleframe provides carefully chosen default font family values that you can use out of the box:",[816,817,818,999],"tabs",{},[819,820,822],"tabs-item",{"icon":821,"label":290},"i-lucide-code",[823,824,830],"pre",{"className":825,"code":826,"filename":827,"language":828,"meta":829,"style":829},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from 'styleframe';\nimport { useFontFamilyDesignTokens } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst {\n    fontFamily,\n    fontFamilyBase,\n    fontFamilyPrint,\n    fontFamilyMono,\n} = useFontFamilyDesignTokens(s);\n\nexport default s;\n","styleframe.config.ts","ts","",[697,831,832,868,891,897,918,923,931,940,948,956,964,980,985],{"__ignoreMap":829},[833,834,837,841,845,849,852,855,858,862,865],"span",{"class":835,"line":836},"line",1,[833,838,840],{"class":839},"s7zQu","import",[833,842,844],{"class":843},"sMK4o"," {",[833,846,848],{"class":847},"sTEyZ"," styleframe",[833,850,851],{"class":843}," }",[833,853,854],{"class":839}," from",[833,856,857],{"class":843}," '",[833,859,861],{"class":860},"sfazB","styleframe",[833,863,864],{"class":843},"'",[833,866,867],{"class":843},";\n",[833,869,871,873,875,878,880,882,884,887,889],{"class":835,"line":870},2,[833,872,840],{"class":839},[833,874,844],{"class":843},[833,876,877],{"class":847}," useFontFamilyDesignTokens",[833,879,851],{"class":843},[833,881,854],{"class":839},[833,883,857],{"class":843},[833,885,886],{"class":860},"@styleframe\u002Ftheme",[833,888,864],{"class":843},[833,890,867],{"class":843},[833,892,894],{"class":835,"line":893},3,[833,895,896],{"emptyLinePlaceholder":223},"\n",[833,898,900,904,907,910,913,916],{"class":835,"line":899},4,[833,901,903],{"class":902},"spNyl","const",[833,905,906],{"class":847}," s ",[833,908,909],{"class":843},"=",[833,911,848],{"class":912},"s2Zo4",[833,914,915],{"class":847},"()",[833,917,867],{"class":843},[833,919,921],{"class":835,"line":920},5,[833,922,896],{"emptyLinePlaceholder":223},[833,924,926,928],{"class":835,"line":925},6,[833,927,903],{"class":902},[833,929,930],{"class":843}," {\n",[833,932,934,937],{"class":835,"line":933},7,[833,935,936],{"class":847},"    fontFamily",[833,938,939],{"class":843},",\n",[833,941,943,946],{"class":835,"line":942},8,[833,944,945],{"class":847},"    fontFamilyBase",[833,947,939],{"class":843},[833,949,951,954],{"class":835,"line":950},9,[833,952,953],{"class":847},"    fontFamilyPrint",[833,955,939],{"class":843},[833,957,959,962],{"class":835,"line":958},10,[833,960,961],{"class":847},"    fontFamilyMono",[833,963,939],{"class":843},[833,965,967,970,973,975,978],{"class":835,"line":966},11,[833,968,969],{"class":843},"}",[833,971,972],{"class":843}," =",[833,974,877],{"class":912},[833,976,977],{"class":847},"(s)",[833,979,867],{"class":843},[833,981,983],{"class":835,"line":982},12,[833,984,896],{"emptyLinePlaceholder":223},[833,986,988,991,994,997],{"class":835,"line":987},13,[833,989,990],{"class":839},"export",[833,992,993],{"class":839}," default",[833,995,996],{"class":847}," s",[833,998,867],{"class":843},[819,1000,1001],{"icon":154,"label":326},[823,1002,1007],{"className":1003,"code":1004,"filename":1005,"language":1006,"meta":829,"style":829},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight",":root {\n    --font-family--base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;\n    --font-family--print: 'Georgia', 'Times New Roman', 'Times', serif;\n    --font-family--mono: 'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;\n    --font-family: var(--font-family--base);\n}\n","styleframe\u002Findex.css","css",[697,1008,1009,1019,1080,1119,1173,1192],{"__ignoreMap":829},[833,1010,1011,1014,1017],{"class":835,"line":836},[833,1012,1013],{"class":843},":",[833,1015,1016],{"class":902},"root",[833,1018,930],{"class":843},[833,1020,1021,1024,1026,1029,1032,1035,1037,1039,1042,1044,1046,1049,1051,1054,1056,1059,1061,1064,1066,1068,1071,1073,1075,1078],{"class":835,"line":870},[833,1022,1023],{"class":847},"    --font-family--base",[833,1025,1013],{"class":843},[833,1027,1028],{"class":847}," -apple-system",[833,1030,1031],{"class":843},",",[833,1033,1034],{"class":847}," BlinkMacSystemFont",[833,1036,1031],{"class":843},[833,1038,857],{"class":843},[833,1040,1041],{"class":860},"Segoe UI",[833,1043,864],{"class":843},[833,1045,1031],{"class":843},[833,1047,1048],{"class":847}," Roboto",[833,1050,1031],{"class":843},[833,1052,1053],{"class":847}," Oxygen-Sans",[833,1055,1031],{"class":843},[833,1057,1058],{"class":847}," Ubuntu",[833,1060,1031],{"class":843},[833,1062,1063],{"class":847}," Cantarell",[833,1065,1031],{"class":843},[833,1067,857],{"class":843},[833,1069,1070],{"class":860},"Helvetica Neue",[833,1072,864],{"class":843},[833,1074,1031],{"class":843},[833,1076,1077],{"class":847}," sans-serif",[833,1079,867],{"class":843},[833,1081,1082,1085,1087,1089,1092,1094,1096,1098,1101,1103,1105,1107,1110,1112,1114,1117],{"class":835,"line":893},[833,1083,1084],{"class":847},"    --font-family--print",[833,1086,1013],{"class":843},[833,1088,857],{"class":843},[833,1090,1091],{"class":860},"Georgia",[833,1093,864],{"class":843},[833,1095,1031],{"class":843},[833,1097,857],{"class":843},[833,1099,1100],{"class":860},"Times New Roman",[833,1102,864],{"class":843},[833,1104,1031],{"class":843},[833,1106,857],{"class":843},[833,1108,1109],{"class":860},"Times",[833,1111,864],{"class":843},[833,1113,1031],{"class":843},[833,1115,1116],{"class":847}," serif",[833,1118,867],{"class":843},[833,1120,1121,1124,1126,1128,1131,1133,1135,1138,1140,1143,1145,1148,1150,1152,1155,1157,1159,1161,1164,1166,1168,1171],{"class":835,"line":899},[833,1122,1123],{"class":847},"    --font-family--mono",[833,1125,1013],{"class":843},[833,1127,857],{"class":843},[833,1129,1130],{"class":860},"SFMono-Regular",[833,1132,864],{"class":843},[833,1134,1031],{"class":843},[833,1136,1137],{"class":847}," Menlo",[833,1139,1031],{"class":843},[833,1141,1142],{"class":847}," Monaco",[833,1144,1031],{"class":843},[833,1146,1147],{"class":847}," Consolas",[833,1149,1031],{"class":843},[833,1151,857],{"class":843},[833,1153,1154],{"class":860},"Liberation Mono",[833,1156,864],{"class":843},[833,1158,1031],{"class":843},[833,1160,857],{"class":843},[833,1162,1163],{"class":860},"Courier New",[833,1165,864],{"class":843},[833,1167,1031],{"class":843},[833,1169,1170],{"class":847}," monospace",[833,1172,867],{"class":843},[833,1174,1175,1178,1180,1183,1186,1189],{"class":835,"line":920},[833,1176,1177],{"class":847},"    --font-family",[833,1179,1013],{"class":843},[833,1181,1182],{"class":912}," var",[833,1184,1185],{"class":843},"(",[833,1187,1188],{"class":847},"--font-family--base",[833,1190,1191],{"class":843},");\n",[833,1193,1194],{"class":835,"line":925},[833,1195,1196],{"class":843},"}\n",[751,1198,1199],{},"The default values include:",[762,1201,1202,1210,1218,1226],{},[765,1203,1204,1209],{},[692,1205,1206],{},[697,1207,1208],{},"base",": System font stack for optimal performance and native appearance",[765,1211,1212,1217],{},[692,1213,1214],{},[697,1215,1216],{},"print",": Serif font stack for print media and article content",[765,1219,1220,1225],{},[692,1221,1222],{},[697,1223,1224],{},"mono",": Monospace font stack for code and technical content",[765,1227,1228,1233,1234,1236],{},[692,1229,1230],{},[697,1231,1232],{},"default",": References ",[697,1235,1208],{}," by default",[1238,1239,1240,1243,1244,1246,1247,1250],"tip",{},[692,1241,1242],{},"Pro tip:"," Use the ",[697,1245,1232],{}," key for your primary font family. It will create a variable named ",[697,1248,1249],{},"--font-family"," without any suffix, making it the natural choice for body text and general use.",[808,1252,1254],{"id":1253},"creating-custom-font-family-variables","Creating Custom Font Family Variables",[751,1256,1257],{},"You can provide completely custom font family values:",[816,1259,1260,1452],{},[819,1261,1262],{"icon":821,"label":290},[823,1263,1265],{"className":825,"code":1264,"filename":827,"language":828,"meta":829,"style":829},"import { styleframe } from 'styleframe';\nimport { useFontFamilyDesignTokens } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst {\n    fontFamily,\n    fontFamilyMono,\n    fontFamilySerif,\n} = useFontFamilyDesignTokens(s, {\n    default: \"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif\",\n    mono: \"'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace\",\n    serif: \"'Georgia', 'Times New Roman', 'Times', serif\",\n} as const);\n\nexport default s;\n",[697,1266,1267,1287,1307,1311,1325,1329,1335,1341,1347,1354,1369,1388,1404,1420,1436,1441],{"__ignoreMap":829},[833,1268,1269,1271,1273,1275,1277,1279,1281,1283,1285],{"class":835,"line":836},[833,1270,840],{"class":839},[833,1272,844],{"class":843},[833,1274,848],{"class":847},[833,1276,851],{"class":843},[833,1278,854],{"class":839},[833,1280,857],{"class":843},[833,1282,861],{"class":860},[833,1284,864],{"class":843},[833,1286,867],{"class":843},[833,1288,1289,1291,1293,1295,1297,1299,1301,1303,1305],{"class":835,"line":870},[833,1290,840],{"class":839},[833,1292,844],{"class":843},[833,1294,877],{"class":847},[833,1296,851],{"class":843},[833,1298,854],{"class":839},[833,1300,857],{"class":843},[833,1302,886],{"class":860},[833,1304,864],{"class":843},[833,1306,867],{"class":843},[833,1308,1309],{"class":835,"line":893},[833,1310,896],{"emptyLinePlaceholder":223},[833,1312,1313,1315,1317,1319,1321,1323],{"class":835,"line":899},[833,1314,903],{"class":902},[833,1316,906],{"class":847},[833,1318,909],{"class":843},[833,1320,848],{"class":912},[833,1322,915],{"class":847},[833,1324,867],{"class":843},[833,1326,1327],{"class":835,"line":920},[833,1328,896],{"emptyLinePlaceholder":223},[833,1330,1331,1333],{"class":835,"line":925},[833,1332,903],{"class":902},[833,1334,930],{"class":843},[833,1336,1337,1339],{"class":835,"line":933},[833,1338,936],{"class":847},[833,1340,939],{"class":843},[833,1342,1343,1345],{"class":835,"line":942},[833,1344,961],{"class":847},[833,1346,939],{"class":843},[833,1348,1349,1352],{"class":835,"line":950},[833,1350,1351],{"class":847},"    fontFamilySerif",[833,1353,939],{"class":843},[833,1355,1356,1358,1360,1362,1365,1367],{"class":835,"line":958},[833,1357,969],{"class":843},[833,1359,972],{"class":843},[833,1361,877],{"class":912},[833,1363,1364],{"class":847},"(s",[833,1366,1031],{"class":843},[833,1368,930],{"class":843},[833,1370,1371,1375,1377,1380,1383,1386],{"class":835,"line":966},[833,1372,1374],{"class":1373},"swJcz","    default",[833,1376,1013],{"class":843},[833,1378,1379],{"class":843}," \"",[833,1381,1382],{"class":860},"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",[833,1384,1385],{"class":843},"\"",[833,1387,939],{"class":843},[833,1389,1390,1393,1395,1397,1400,1402],{"class":835,"line":982},[833,1391,1392],{"class":1373},"    mono",[833,1394,1013],{"class":843},[833,1396,1379],{"class":843},[833,1398,1399],{"class":860},"'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",[833,1401,1385],{"class":843},[833,1403,939],{"class":843},[833,1405,1406,1409,1411,1413,1416,1418],{"class":835,"line":987},[833,1407,1408],{"class":1373},"    serif",[833,1410,1013],{"class":843},[833,1412,1379],{"class":843},[833,1414,1415],{"class":860},"'Georgia', 'Times New Roman', 'Times', serif",[833,1417,1385],{"class":843},[833,1419,939],{"class":843},[833,1421,1423,1425,1428,1431,1434],{"class":835,"line":1422},14,[833,1424,969],{"class":843},[833,1426,1427],{"class":839}," as",[833,1429,1430],{"class":902}," const",[833,1432,1433],{"class":847},")",[833,1435,867],{"class":843},[833,1437,1439],{"class":835,"line":1438},15,[833,1440,896],{"emptyLinePlaceholder":223},[833,1442,1444,1446,1448,1450],{"class":835,"line":1443},16,[833,1445,990],{"class":839},[833,1447,993],{"class":839},[833,1449,996],{"class":847},[833,1451,867],{"class":843},[819,1453,1454],{"icon":154,"label":326},[823,1455,1457],{"className":1003,"code":1456,"filename":1005,"language":1006,"meta":829,"style":829},":root {\n    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;\n    --font-family--mono: 'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;\n    --font-family--serif: 'Georgia', 'Times New Roman', 'Times', serif;\n}\n",[697,1458,1459,1467,1517,1563,1598],{"__ignoreMap":829},[833,1460,1461,1463,1465],{"class":835,"line":836},[833,1462,1013],{"class":843},[833,1464,1016],{"class":902},[833,1466,930],{"class":843},[833,1468,1469,1471,1473,1475,1477,1479,1481,1483,1485,1487,1489,1491,1493,1495,1497,1499,1501,1503,1505,1507,1509,1511,1513,1515],{"class":835,"line":870},[833,1470,1177],{"class":847},[833,1472,1013],{"class":843},[833,1474,1028],{"class":847},[833,1476,1031],{"class":843},[833,1478,1034],{"class":847},[833,1480,1031],{"class":843},[833,1482,857],{"class":843},[833,1484,1041],{"class":860},[833,1486,864],{"class":843},[833,1488,1031],{"class":843},[833,1490,1048],{"class":847},[833,1492,1031],{"class":843},[833,1494,1053],{"class":847},[833,1496,1031],{"class":843},[833,1498,1058],{"class":847},[833,1500,1031],{"class":843},[833,1502,1063],{"class":847},[833,1504,1031],{"class":843},[833,1506,857],{"class":843},[833,1508,1070],{"class":860},[833,1510,864],{"class":843},[833,1512,1031],{"class":843},[833,1514,1077],{"class":847},[833,1516,867],{"class":843},[833,1518,1519,1521,1523,1525,1527,1529,1531,1533,1535,1537,1539,1541,1543,1545,1547,1549,1551,1553,1555,1557,1559,1561],{"class":835,"line":893},[833,1520,1123],{"class":847},[833,1522,1013],{"class":843},[833,1524,857],{"class":843},[833,1526,1130],{"class":860},[833,1528,864],{"class":843},[833,1530,1031],{"class":843},[833,1532,1137],{"class":847},[833,1534,1031],{"class":843},[833,1536,1142],{"class":847},[833,1538,1031],{"class":843},[833,1540,1147],{"class":847},[833,1542,1031],{"class":843},[833,1544,857],{"class":843},[833,1546,1154],{"class":860},[833,1548,864],{"class":843},[833,1550,1031],{"class":843},[833,1552,857],{"class":843},[833,1554,1163],{"class":860},[833,1556,864],{"class":843},[833,1558,1031],{"class":843},[833,1560,1170],{"class":847},[833,1562,867],{"class":843},[833,1564,1565,1568,1570,1572,1574,1576,1578,1580,1582,1584,1586,1588,1590,1592,1594,1596],{"class":835,"line":899},[833,1566,1567],{"class":847},"    --font-family--serif",[833,1569,1013],{"class":843},[833,1571,857],{"class":843},[833,1573,1091],{"class":860},[833,1575,864],{"class":843},[833,1577,1031],{"class":843},[833,1579,857],{"class":843},[833,1581,1100],{"class":860},[833,1583,864],{"class":843},[833,1585,1031],{"class":843},[833,1587,857],{"class":843},[833,1589,1109],{"class":860},[833,1591,864],{"class":843},[833,1593,1031],{"class":843},[833,1595,1116],{"class":847},[833,1597,867],{"class":843},[833,1599,1600],{"class":835,"line":920},[833,1601,1196],{"class":843},[808,1603,1605],{"id":1604},"extending-the-default-font-family-values","Extending the Default Font Family Values",[751,1607,1608],{},"You can extend the defaults with additional custom font families:",[816,1610,1611,1789],{},[819,1612,1613],{"icon":821,"label":290},[823,1614,1616],{"className":825,"code":1615,"filename":827,"language":828,"meta":829,"style":829},"import { styleframe } from 'styleframe';\nimport { useFontFamilyDesignTokens, defaultFontFamilyValues } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst {\n    fontFamily,\n    fontFamilyBase,\n    fontFamilyPrint,\n    fontFamilyMono,\n    fontFamilyDisplay,\n} = useFontFamilyDesignTokens(s, {\n    ...defaultFontFamilyValues,\n    display: \"'Inter', -apple-system, BlinkMacSystemFont, sans-serif\",\n} as const);\n\nexport default s;\n",[697,1617,1618,1638,1663,1667,1681,1685,1691,1697,1703,1709,1715,1722,1736,1746,1762,1774,1778],{"__ignoreMap":829},[833,1619,1620,1622,1624,1626,1628,1630,1632,1634,1636],{"class":835,"line":836},[833,1621,840],{"class":839},[833,1623,844],{"class":843},[833,1625,848],{"class":847},[833,1627,851],{"class":843},[833,1629,854],{"class":839},[833,1631,857],{"class":843},[833,1633,861],{"class":860},[833,1635,864],{"class":843},[833,1637,867],{"class":843},[833,1639,1640,1642,1644,1646,1648,1651,1653,1655,1657,1659,1661],{"class":835,"line":870},[833,1641,840],{"class":839},[833,1643,844],{"class":843},[833,1645,877],{"class":847},[833,1647,1031],{"class":843},[833,1649,1650],{"class":847}," defaultFontFamilyValues",[833,1652,851],{"class":843},[833,1654,854],{"class":839},[833,1656,857],{"class":843},[833,1658,886],{"class":860},[833,1660,864],{"class":843},[833,1662,867],{"class":843},[833,1664,1665],{"class":835,"line":893},[833,1666,896],{"emptyLinePlaceholder":223},[833,1668,1669,1671,1673,1675,1677,1679],{"class":835,"line":899},[833,1670,903],{"class":902},[833,1672,906],{"class":847},[833,1674,909],{"class":843},[833,1676,848],{"class":912},[833,1678,915],{"class":847},[833,1680,867],{"class":843},[833,1682,1683],{"class":835,"line":920},[833,1684,896],{"emptyLinePlaceholder":223},[833,1686,1687,1689],{"class":835,"line":925},[833,1688,903],{"class":902},[833,1690,930],{"class":843},[833,1692,1693,1695],{"class":835,"line":933},[833,1694,936],{"class":847},[833,1696,939],{"class":843},[833,1698,1699,1701],{"class":835,"line":942},[833,1700,945],{"class":847},[833,1702,939],{"class":843},[833,1704,1705,1707],{"class":835,"line":950},[833,1706,953],{"class":847},[833,1708,939],{"class":843},[833,1710,1711,1713],{"class":835,"line":958},[833,1712,961],{"class":847},[833,1714,939],{"class":843},[833,1716,1717,1720],{"class":835,"line":966},[833,1718,1719],{"class":847},"    fontFamilyDisplay",[833,1721,939],{"class":843},[833,1723,1724,1726,1728,1730,1732,1734],{"class":835,"line":982},[833,1725,969],{"class":843},[833,1727,972],{"class":843},[833,1729,877],{"class":912},[833,1731,1364],{"class":847},[833,1733,1031],{"class":843},[833,1735,930],{"class":843},[833,1737,1738,1741,1744],{"class":835,"line":987},[833,1739,1740],{"class":843},"    ...",[833,1742,1743],{"class":847},"defaultFontFamilyValues",[833,1745,939],{"class":843},[833,1747,1748,1751,1753,1755,1758,1760],{"class":835,"line":1422},[833,1749,1750],{"class":1373},"    display",[833,1752,1013],{"class":843},[833,1754,1379],{"class":843},[833,1756,1757],{"class":860},"'Inter', -apple-system, BlinkMacSystemFont, sans-serif",[833,1759,1385],{"class":843},[833,1761,939],{"class":843},[833,1763,1764,1766,1768,1770,1772],{"class":835,"line":1438},[833,1765,969],{"class":843},[833,1767,1427],{"class":839},[833,1769,1430],{"class":902},[833,1771,1433],{"class":847},[833,1773,867],{"class":843},[833,1775,1776],{"class":835,"line":1443},[833,1777,896],{"emptyLinePlaceholder":223},[833,1779,1781,1783,1785,1787],{"class":835,"line":1780},17,[833,1782,990],{"class":839},[833,1784,993],{"class":839},[833,1786,996],{"class":847},[833,1788,867],{"class":843},[819,1790,1791],{"icon":154,"label":326},[823,1792,1794],{"className":1003,"code":1793,"filename":1005,"language":1006,"meta":829,"style":829},":root {\n    --font-family--base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;\n    --font-family--print: 'Georgia', 'Times New Roman', 'Times', serif;\n    --font-family--mono: 'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;\n    --font-family--display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n    --font-family: var(--font-family--base);\n}\n",[697,1795,1796,1804,1854,1888,1934,1962,1976],{"__ignoreMap":829},[833,1797,1798,1800,1802],{"class":835,"line":836},[833,1799,1013],{"class":843},[833,1801,1016],{"class":902},[833,1803,930],{"class":843},[833,1805,1806,1808,1810,1812,1814,1816,1818,1820,1822,1824,1826,1828,1830,1832,1834,1836,1838,1840,1842,1844,1846,1848,1850,1852],{"class":835,"line":870},[833,1807,1023],{"class":847},[833,1809,1013],{"class":843},[833,1811,1028],{"class":847},[833,1813,1031],{"class":843},[833,1815,1034],{"class":847},[833,1817,1031],{"class":843},[833,1819,857],{"class":843},[833,1821,1041],{"class":860},[833,1823,864],{"class":843},[833,1825,1031],{"class":843},[833,1827,1048],{"class":847},[833,1829,1031],{"class":843},[833,1831,1053],{"class":847},[833,1833,1031],{"class":843},[833,1835,1058],{"class":847},[833,1837,1031],{"class":843},[833,1839,1063],{"class":847},[833,1841,1031],{"class":843},[833,1843,857],{"class":843},[833,1845,1070],{"class":860},[833,1847,864],{"class":843},[833,1849,1031],{"class":843},[833,1851,1077],{"class":847},[833,1853,867],{"class":843},[833,1855,1856,1858,1860,1862,1864,1866,1868,1870,1872,1874,1876,1878,1880,1882,1884,1886],{"class":835,"line":893},[833,1857,1084],{"class":847},[833,1859,1013],{"class":843},[833,1861,857],{"class":843},[833,1863,1091],{"class":860},[833,1865,864],{"class":843},[833,1867,1031],{"class":843},[833,1869,857],{"class":843},[833,1871,1100],{"class":860},[833,1873,864],{"class":843},[833,1875,1031],{"class":843},[833,1877,857],{"class":843},[833,1879,1109],{"class":860},[833,1881,864],{"class":843},[833,1883,1031],{"class":843},[833,1885,1116],{"class":847},[833,1887,867],{"class":843},[833,1889,1890,1892,1894,1896,1898,1900,1902,1904,1906,1908,1910,1912,1914,1916,1918,1920,1922,1924,1926,1928,1930,1932],{"class":835,"line":899},[833,1891,1123],{"class":847},[833,1893,1013],{"class":843},[833,1895,857],{"class":843},[833,1897,1130],{"class":860},[833,1899,864],{"class":843},[833,1901,1031],{"class":843},[833,1903,1137],{"class":847},[833,1905,1031],{"class":843},[833,1907,1142],{"class":847},[833,1909,1031],{"class":843},[833,1911,1147],{"class":847},[833,1913,1031],{"class":843},[833,1915,857],{"class":843},[833,1917,1154],{"class":860},[833,1919,864],{"class":843},[833,1921,1031],{"class":843},[833,1923,857],{"class":843},[833,1925,1163],{"class":860},[833,1927,864],{"class":843},[833,1929,1031],{"class":843},[833,1931,1170],{"class":847},[833,1933,867],{"class":843},[833,1935,1936,1939,1941,1943,1946,1948,1950,1952,1954,1956,1958,1960],{"class":835,"line":920},[833,1937,1938],{"class":847},"    --font-family--display",[833,1940,1013],{"class":843},[833,1942,857],{"class":843},[833,1944,1945],{"class":860},"Inter",[833,1947,864],{"class":843},[833,1949,1031],{"class":843},[833,1951,1028],{"class":847},[833,1953,1031],{"class":843},[833,1955,1034],{"class":847},[833,1957,1031],{"class":843},[833,1959,1077],{"class":847},[833,1961,867],{"class":843},[833,1963,1964,1966,1968,1970,1972,1974],{"class":835,"line":925},[833,1965,1177],{"class":847},[833,1967,1013],{"class":843},[833,1969,1182],{"class":912},[833,1971,1185],{"class":843},[833,1973,1188],{"class":847},[833,1975,1191],{"class":843},[833,1977,1978],{"class":835,"line":933},[833,1979,1196],{"class":843},[747,1981,1983],{"id":1982},"usefontsizedesigntokens",[697,1984,703],{},[751,1986,802,1987,1990],{},[697,1988,1989],{},"useFontSizeDesignTokens()"," function creates a set of font size variables.",[816,1992,1993,2250],{},[819,1994,1995],{"icon":821,"label":290},[823,1996,1998],{"className":825,"code":1997,"filename":827,"language":828,"meta":829,"style":829},"import { styleframe } from 'styleframe';\nimport { useFontSizeDesignTokens } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst {\n    fontSize,\n    fontSizeXs,\n    fontSizeSm,\n    fontSizeMd,\n    fontSizeLg,\n    fontSizeXl,\n} = useFontSizeDesignTokens(s, {\n    default: '1rem',\n    xs: '0.75rem',\n    sm: '0.875rem',\n    md: '1rem',\n    lg: '1.25rem',\n    xl: '1.5rem',\n} as const);\n\nexport default s;\n",[697,1999,2000,2020,2041,2045,2059,2063,2069,2076,2083,2090,2097,2104,2111,2125,2140,2156,2172,2187,2204,2221,2234,2239],{"__ignoreMap":829},[833,2001,2002,2004,2006,2008,2010,2012,2014,2016,2018],{"class":835,"line":836},[833,2003,840],{"class":839},[833,2005,844],{"class":843},[833,2007,848],{"class":847},[833,2009,851],{"class":843},[833,2011,854],{"class":839},[833,2013,857],{"class":843},[833,2015,861],{"class":860},[833,2017,864],{"class":843},[833,2019,867],{"class":843},[833,2021,2022,2024,2026,2029,2031,2033,2035,2037,2039],{"class":835,"line":870},[833,2023,840],{"class":839},[833,2025,844],{"class":843},[833,2027,2028],{"class":847}," useFontSizeDesignTokens",[833,2030,851],{"class":843},[833,2032,854],{"class":839},[833,2034,857],{"class":843},[833,2036,886],{"class":860},[833,2038,864],{"class":843},[833,2040,867],{"class":843},[833,2042,2043],{"class":835,"line":893},[833,2044,896],{"emptyLinePlaceholder":223},[833,2046,2047,2049,2051,2053,2055,2057],{"class":835,"line":899},[833,2048,903],{"class":902},[833,2050,906],{"class":847},[833,2052,909],{"class":843},[833,2054,848],{"class":912},[833,2056,915],{"class":847},[833,2058,867],{"class":843},[833,2060,2061],{"class":835,"line":920},[833,2062,896],{"emptyLinePlaceholder":223},[833,2064,2065,2067],{"class":835,"line":925},[833,2066,903],{"class":902},[833,2068,930],{"class":843},[833,2070,2071,2074],{"class":835,"line":933},[833,2072,2073],{"class":847},"    fontSize",[833,2075,939],{"class":843},[833,2077,2078,2081],{"class":835,"line":942},[833,2079,2080],{"class":847},"    fontSizeXs",[833,2082,939],{"class":843},[833,2084,2085,2088],{"class":835,"line":950},[833,2086,2087],{"class":847},"    fontSizeSm",[833,2089,939],{"class":843},[833,2091,2092,2095],{"class":835,"line":958},[833,2093,2094],{"class":847},"    fontSizeMd",[833,2096,939],{"class":843},[833,2098,2099,2102],{"class":835,"line":966},[833,2100,2101],{"class":847},"    fontSizeLg",[833,2103,939],{"class":843},[833,2105,2106,2109],{"class":835,"line":982},[833,2107,2108],{"class":847},"    fontSizeXl",[833,2110,939],{"class":843},[833,2112,2113,2115,2117,2119,2121,2123],{"class":835,"line":987},[833,2114,969],{"class":843},[833,2116,972],{"class":843},[833,2118,2028],{"class":912},[833,2120,1364],{"class":847},[833,2122,1031],{"class":843},[833,2124,930],{"class":843},[833,2126,2127,2129,2131,2133,2136,2138],{"class":835,"line":1422},[833,2128,1374],{"class":1373},[833,2130,1013],{"class":843},[833,2132,857],{"class":843},[833,2134,2135],{"class":860},"1rem",[833,2137,864],{"class":843},[833,2139,939],{"class":843},[833,2141,2142,2145,2147,2149,2152,2154],{"class":835,"line":1438},[833,2143,2144],{"class":1373},"    xs",[833,2146,1013],{"class":843},[833,2148,857],{"class":843},[833,2150,2151],{"class":860},"0.75rem",[833,2153,864],{"class":843},[833,2155,939],{"class":843},[833,2157,2158,2161,2163,2165,2168,2170],{"class":835,"line":1443},[833,2159,2160],{"class":1373},"    sm",[833,2162,1013],{"class":843},[833,2164,857],{"class":843},[833,2166,2167],{"class":860},"0.875rem",[833,2169,864],{"class":843},[833,2171,939],{"class":843},[833,2173,2174,2177,2179,2181,2183,2185],{"class":835,"line":1780},[833,2175,2176],{"class":1373},"    md",[833,2178,1013],{"class":843},[833,2180,857],{"class":843},[833,2182,2135],{"class":860},[833,2184,864],{"class":843},[833,2186,939],{"class":843},[833,2188,2190,2193,2195,2197,2200,2202],{"class":835,"line":2189},18,[833,2191,2192],{"class":1373},"    lg",[833,2194,1013],{"class":843},[833,2196,857],{"class":843},[833,2198,2199],{"class":860},"1.25rem",[833,2201,864],{"class":843},[833,2203,939],{"class":843},[833,2205,2207,2210,2212,2214,2217,2219],{"class":835,"line":2206},19,[833,2208,2209],{"class":1373},"    xl",[833,2211,1013],{"class":843},[833,2213,857],{"class":843},[833,2215,2216],{"class":860},"1.5rem",[833,2218,864],{"class":843},[833,2220,939],{"class":843},[833,2222,2224,2226,2228,2230,2232],{"class":835,"line":2223},20,[833,2225,969],{"class":843},[833,2227,1427],{"class":839},[833,2229,1430],{"class":902},[833,2231,1433],{"class":847},[833,2233,867],{"class":843},[833,2235,2237],{"class":835,"line":2236},21,[833,2238,896],{"emptyLinePlaceholder":223},[833,2240,2242,2244,2246,2248],{"class":835,"line":2241},22,[833,2243,990],{"class":839},[833,2245,993],{"class":839},[833,2247,996],{"class":847},[833,2249,867],{"class":843},[819,2251,2252],{"icon":154,"label":326},[823,2253,2255],{"className":1003,"code":2254,"filename":1005,"language":1006,"meta":829,"style":829},":root {\n    --font-size: 1rem;\n    --font-size--xs: 0.75rem;\n    --font-size--sm: 0.875rem;\n    --font-size--md: 1rem;\n    --font-size--lg: 1.25rem;\n    --font-size--xl: 1.5rem;\n}\n",[697,2256,2257,2265,2278,2290,2302,2313,2325,2337],{"__ignoreMap":829},[833,2258,2259,2261,2263],{"class":835,"line":836},[833,2260,1013],{"class":843},[833,2262,1016],{"class":902},[833,2264,930],{"class":843},[833,2266,2267,2270,2272,2276],{"class":835,"line":870},[833,2268,2269],{"class":847},"    --font-size",[833,2271,1013],{"class":843},[833,2273,2275],{"class":2274},"sbssI"," 1rem",[833,2277,867],{"class":843},[833,2279,2280,2283,2285,2288],{"class":835,"line":893},[833,2281,2282],{"class":847},"    --font-size--xs",[833,2284,1013],{"class":843},[833,2286,2287],{"class":2274}," 0.75rem",[833,2289,867],{"class":843},[833,2291,2292,2295,2297,2300],{"class":835,"line":899},[833,2293,2294],{"class":847},"    --font-size--sm",[833,2296,1013],{"class":843},[833,2298,2299],{"class":2274}," 0.875rem",[833,2301,867],{"class":843},[833,2303,2304,2307,2309,2311],{"class":835,"line":920},[833,2305,2306],{"class":847},"    --font-size--md",[833,2308,1013],{"class":843},[833,2310,2275],{"class":2274},[833,2312,867],{"class":843},[833,2314,2315,2318,2320,2323],{"class":835,"line":925},[833,2316,2317],{"class":847},"    --font-size--lg",[833,2319,1013],{"class":843},[833,2321,2322],{"class":2274}," 1.25rem",[833,2324,867],{"class":843},[833,2326,2327,2330,2332,2335],{"class":835,"line":933},[833,2328,2329],{"class":847},"    --font-size--xl",[833,2331,1013],{"class":843},[833,2333,2334],{"class":2274}," 1.5rem",[833,2336,867],{"class":843},[833,2338,2339],{"class":835,"line":942},[833,2340,1196],{"class":843},[808,2342,2344,2345],{"id":2343},"integration-with-usemultiplierdesigntokens","Integration with ",[697,2346,2347],{},"useMultiplierDesignTokens",[751,2349,2350,2351,2353,2354,2357],{},"The real power of ",[697,2352,703],{}," comes when combined with ",[697,2355,2356],{},"useMultiplierDesignTokens()"," and modular scales. This allows you to create mathematically harmonious type systems:",[816,2359,2360,2911],{},[819,2361,2362],{"icon":821,"label":290},[823,2363,2365],{"className":825,"code":2364,"filename":827,"language":828,"meta":829,"style":829},"import { styleframe } from 'styleframe';\nimport { useScaleDesignTokens, useScalePowersDesignTokens, useMultiplierDesignTokens, useFontSizeDesignTokens, defaultScaleValues } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\n\u002F\u002F Use Perfect Fourth scale (1.333) for clear typographic hierarchy\nconst { scale } = useScaleDesignTokens(s, { ...defaultScaleValues, default: '@scale.perfect-fourth' });\n\n\u002F\u002F Define base font size\nconst { fontSize } = useFontSizeDesignTokens(s, { default: '1rem' });\n\n\u002F\u002F Create scale powers\nconst scalePowers = useScalePowersDesignTokens(s, scale, [-2, -1, 0, 1, 2, 3, 4, 5]);\n\n\u002F\u002F Generate font size scale automatically\nconst {\n    fontSizeXs,\n    fontSizeSm,\n    fontSizeMd,\n    fontSizeLg,\n    fontSizeXl,\n    fontSize2xl,\n    fontSize3xl,\n    fontSize4xl,\n} = useMultiplierDesignTokens(s, fontSize, {\n    xs: scalePowers[-2],   \u002F\u002F ~0.56rem\n    sm: scalePowers[-1],   \u002F\u002F ~0.75rem\n    md: scalePowers[0],    \u002F\u002F 1rem (base)\n    lg: scalePowers[1],    \u002F\u002F ~1.33rem\n    xl: scalePowers[2],    \u002F\u002F ~1.78rem\n    '2xl': scalePowers[3], \u002F\u002F ~2.37rem\n    '3xl': scalePowers[4], \u002F\u002F ~3.16rem\n    '4xl': scalePowers[5], \u002F\u002F ~4.21rem\n});\n\nexport default s;\n",[697,2366,2367,2387,2427,2431,2445,2449,2455,2501,2505,2510,2547,2551,2556,2628,2632,2637,2643,2649,2655,2661,2667,2673,2680,2688,2696,2716,2738,2758,2777,2795,2813,2838,2862,2886,2895,2900],{"__ignoreMap":829},[833,2368,2369,2371,2373,2375,2377,2379,2381,2383,2385],{"class":835,"line":836},[833,2370,840],{"class":839},[833,2372,844],{"class":843},[833,2374,848],{"class":847},[833,2376,851],{"class":843},[833,2378,854],{"class":839},[833,2380,857],{"class":843},[833,2382,861],{"class":860},[833,2384,864],{"class":843},[833,2386,867],{"class":843},[833,2388,2389,2391,2393,2396,2398,2401,2403,2406,2408,2410,2412,2415,2417,2419,2421,2423,2425],{"class":835,"line":870},[833,2390,840],{"class":839},[833,2392,844],{"class":843},[833,2394,2395],{"class":847}," useScaleDesignTokens",[833,2397,1031],{"class":843},[833,2399,2400],{"class":847}," useScalePowersDesignTokens",[833,2402,1031],{"class":843},[833,2404,2405],{"class":847}," useMultiplierDesignTokens",[833,2407,1031],{"class":843},[833,2409,2028],{"class":847},[833,2411,1031],{"class":843},[833,2413,2414],{"class":847}," defaultScaleValues",[833,2416,851],{"class":843},[833,2418,854],{"class":839},[833,2420,857],{"class":843},[833,2422,886],{"class":860},[833,2424,864],{"class":843},[833,2426,867],{"class":843},[833,2428,2429],{"class":835,"line":893},[833,2430,896],{"emptyLinePlaceholder":223},[833,2432,2433,2435,2437,2439,2441,2443],{"class":835,"line":899},[833,2434,903],{"class":902},[833,2436,906],{"class":847},[833,2438,909],{"class":843},[833,2440,848],{"class":912},[833,2442,915],{"class":847},[833,2444,867],{"class":843},[833,2446,2447],{"class":835,"line":920},[833,2448,896],{"emptyLinePlaceholder":223},[833,2450,2451],{"class":835,"line":925},[833,2452,2454],{"class":2453},"sHwdD","\u002F\u002F Use Perfect Fourth scale (1.333) for clear typographic hierarchy\n",[833,2456,2457,2459,2461,2464,2466,2468,2470,2472,2474,2476,2479,2482,2484,2486,2488,2490,2493,2495,2497,2499],{"class":835,"line":933},[833,2458,903],{"class":902},[833,2460,844],{"class":843},[833,2462,2463],{"class":847}," scale ",[833,2465,969],{"class":843},[833,2467,972],{"class":843},[833,2469,2395],{"class":912},[833,2471,1364],{"class":847},[833,2473,1031],{"class":843},[833,2475,844],{"class":843},[833,2477,2478],{"class":843}," ...",[833,2480,2481],{"class":847},"defaultScaleValues",[833,2483,1031],{"class":843},[833,2485,993],{"class":1373},[833,2487,1013],{"class":843},[833,2489,857],{"class":843},[833,2491,2492],{"class":860},"@scale.perfect-fourth",[833,2494,864],{"class":843},[833,2496,851],{"class":843},[833,2498,1433],{"class":847},[833,2500,867],{"class":843},[833,2502,2503],{"class":835,"line":942},[833,2504,896],{"emptyLinePlaceholder":223},[833,2506,2507],{"class":835,"line":950},[833,2508,2509],{"class":2453},"\u002F\u002F Define base font size\n",[833,2511,2512,2514,2516,2519,2521,2523,2525,2527,2529,2531,2533,2535,2537,2539,2541,2543,2545],{"class":835,"line":958},[833,2513,903],{"class":902},[833,2515,844],{"class":843},[833,2517,2518],{"class":847}," fontSize ",[833,2520,969],{"class":843},[833,2522,972],{"class":843},[833,2524,2028],{"class":912},[833,2526,1364],{"class":847},[833,2528,1031],{"class":843},[833,2530,844],{"class":843},[833,2532,993],{"class":1373},[833,2534,1013],{"class":843},[833,2536,857],{"class":843},[833,2538,2135],{"class":860},[833,2540,864],{"class":843},[833,2542,851],{"class":843},[833,2544,1433],{"class":847},[833,2546,867],{"class":843},[833,2548,2549],{"class":835,"line":966},[833,2550,896],{"emptyLinePlaceholder":223},[833,2552,2553],{"class":835,"line":982},[833,2554,2555],{"class":2453},"\u002F\u002F Create scale powers\n",[833,2557,2558,2560,2563,2565,2567,2569,2571,2574,2576,2579,2582,2585,2587,2590,2593,2595,2598,2600,2603,2605,2608,2610,2613,2615,2618,2620,2623,2626],{"class":835,"line":987},[833,2559,903],{"class":902},[833,2561,2562],{"class":847}," scalePowers ",[833,2564,909],{"class":843},[833,2566,2400],{"class":912},[833,2568,1364],{"class":847},[833,2570,1031],{"class":843},[833,2572,2573],{"class":847}," scale",[833,2575,1031],{"class":843},[833,2577,2578],{"class":847}," [",[833,2580,2581],{"class":843},"-",[833,2583,2584],{"class":2274},"2",[833,2586,1031],{"class":843},[833,2588,2589],{"class":843}," -",[833,2591,2592],{"class":2274},"1",[833,2594,1031],{"class":843},[833,2596,2597],{"class":2274}," 0",[833,2599,1031],{"class":843},[833,2601,2602],{"class":2274}," 1",[833,2604,1031],{"class":843},[833,2606,2607],{"class":2274}," 2",[833,2609,1031],{"class":843},[833,2611,2612],{"class":2274}," 3",[833,2614,1031],{"class":843},[833,2616,2617],{"class":2274}," 4",[833,2619,1031],{"class":843},[833,2621,2622],{"class":2274}," 5",[833,2624,2625],{"class":847},"])",[833,2627,867],{"class":843},[833,2629,2630],{"class":835,"line":1422},[833,2631,896],{"emptyLinePlaceholder":223},[833,2633,2634],{"class":835,"line":1438},[833,2635,2636],{"class":2453},"\u002F\u002F Generate font size scale automatically\n",[833,2638,2639,2641],{"class":835,"line":1443},[833,2640,903],{"class":902},[833,2642,930],{"class":843},[833,2644,2645,2647],{"class":835,"line":1780},[833,2646,2080],{"class":847},[833,2648,939],{"class":843},[833,2650,2651,2653],{"class":835,"line":2189},[833,2652,2087],{"class":847},[833,2654,939],{"class":843},[833,2656,2657,2659],{"class":835,"line":2206},[833,2658,2094],{"class":847},[833,2660,939],{"class":843},[833,2662,2663,2665],{"class":835,"line":2223},[833,2664,2101],{"class":847},[833,2666,939],{"class":843},[833,2668,2669,2671],{"class":835,"line":2236},[833,2670,2108],{"class":847},[833,2672,939],{"class":843},[833,2674,2675,2678],{"class":835,"line":2241},[833,2676,2677],{"class":847},"    fontSize2xl",[833,2679,939],{"class":843},[833,2681,2683,2686],{"class":835,"line":2682},23,[833,2684,2685],{"class":847},"    fontSize3xl",[833,2687,939],{"class":843},[833,2689,2691,2694],{"class":835,"line":2690},24,[833,2692,2693],{"class":847},"    fontSize4xl",[833,2695,939],{"class":843},[833,2697,2699,2701,2703,2705,2707,2709,2712,2714],{"class":835,"line":2698},25,[833,2700,969],{"class":843},[833,2702,972],{"class":843},[833,2704,2405],{"class":912},[833,2706,1364],{"class":847},[833,2708,1031],{"class":843},[833,2710,2711],{"class":847}," fontSize",[833,2713,1031],{"class":843},[833,2715,930],{"class":843},[833,2717,2719,2721,2723,2726,2728,2730,2733,2735],{"class":835,"line":2718},26,[833,2720,2144],{"class":1373},[833,2722,1013],{"class":843},[833,2724,2725],{"class":847}," scalePowers[",[833,2727,2581],{"class":843},[833,2729,2584],{"class":2274},[833,2731,2732],{"class":847},"]",[833,2734,1031],{"class":843},[833,2736,2737],{"class":2453},"   \u002F\u002F ~0.56rem\n",[833,2739,2741,2743,2745,2747,2749,2751,2753,2755],{"class":835,"line":2740},27,[833,2742,2160],{"class":1373},[833,2744,1013],{"class":843},[833,2746,2725],{"class":847},[833,2748,2581],{"class":843},[833,2750,2592],{"class":2274},[833,2752,2732],{"class":847},[833,2754,1031],{"class":843},[833,2756,2757],{"class":2453},"   \u002F\u002F ~0.75rem\n",[833,2759,2761,2763,2765,2767,2770,2772,2774],{"class":835,"line":2760},28,[833,2762,2176],{"class":1373},[833,2764,1013],{"class":843},[833,2766,2725],{"class":847},[833,2768,2769],{"class":2274},"0",[833,2771,2732],{"class":847},[833,2773,1031],{"class":843},[833,2775,2776],{"class":2453},"    \u002F\u002F 1rem (base)\n",[833,2778,2780,2782,2784,2786,2788,2790,2792],{"class":835,"line":2779},29,[833,2781,2192],{"class":1373},[833,2783,1013],{"class":843},[833,2785,2725],{"class":847},[833,2787,2592],{"class":2274},[833,2789,2732],{"class":847},[833,2791,1031],{"class":843},[833,2793,2794],{"class":2453},"    \u002F\u002F ~1.33rem\n",[833,2796,2798,2800,2802,2804,2806,2808,2810],{"class":835,"line":2797},30,[833,2799,2209],{"class":1373},[833,2801,1013],{"class":843},[833,2803,2725],{"class":847},[833,2805,2584],{"class":2274},[833,2807,2732],{"class":847},[833,2809,1031],{"class":843},[833,2811,2812],{"class":2453},"    \u002F\u002F ~1.78rem\n",[833,2814,2816,2819,2822,2824,2826,2828,2831,2833,2835],{"class":835,"line":2815},31,[833,2817,2818],{"class":843},"    '",[833,2820,2821],{"class":1373},"2xl",[833,2823,864],{"class":843},[833,2825,1013],{"class":843},[833,2827,2725],{"class":847},[833,2829,2830],{"class":2274},"3",[833,2832,2732],{"class":847},[833,2834,1031],{"class":843},[833,2836,2837],{"class":2453}," \u002F\u002F ~2.37rem\n",[833,2839,2841,2843,2846,2848,2850,2852,2855,2857,2859],{"class":835,"line":2840},32,[833,2842,2818],{"class":843},[833,2844,2845],{"class":1373},"3xl",[833,2847,864],{"class":843},[833,2849,1013],{"class":843},[833,2851,2725],{"class":847},[833,2853,2854],{"class":2274},"4",[833,2856,2732],{"class":847},[833,2858,1031],{"class":843},[833,2860,2861],{"class":2453}," \u002F\u002F ~3.16rem\n",[833,2863,2865,2867,2870,2872,2874,2876,2879,2881,2883],{"class":835,"line":2864},33,[833,2866,2818],{"class":843},[833,2868,2869],{"class":1373},"4xl",[833,2871,864],{"class":843},[833,2873,1013],{"class":843},[833,2875,2725],{"class":847},[833,2877,2878],{"class":2274},"5",[833,2880,2732],{"class":847},[833,2882,1031],{"class":843},[833,2884,2885],{"class":2453}," \u002F\u002F ~4.21rem\n",[833,2887,2889,2891,2893],{"class":835,"line":2888},34,[833,2890,969],{"class":843},[833,2892,1433],{"class":847},[833,2894,867],{"class":843},[833,2896,2898],{"class":835,"line":2897},35,[833,2899,896],{"emptyLinePlaceholder":223},[833,2901,2903,2905,2907,2909],{"class":835,"line":2902},36,[833,2904,990],{"class":839},[833,2906,993],{"class":839},[833,2908,996],{"class":847},[833,2910,867],{"class":843},[819,2912,2913],{"icon":154,"label":326},[823,2914,2916],{"className":1003,"code":2915,"filename":1005,"language":1006,"meta":829,"style":829},":root {\n    --scale--perfect-fourth: 1.333;\n    --scale: var(--scale--perfect-fourth);\n    --scale-power---2: calc(1 \u002F var(--scale) \u002F var(--scale));\n    --scale-power---1: calc(1 \u002F var(--scale));\n    --scale-power--0: 1;\n    --scale-power--1: var(--scale);\n    --scale-power--2: calc(var(--scale) * var(--scale));\n    --scale-power--3: calc(var(--scale) * var(--scale) * var(--scale));\n    --scale-power--4: calc(var(--scale) * var(--scale) * var(--scale) * var(--scale));\n    --scale-power--5: calc(var(--scale) * var(--scale) * var(--scale) * var(--scale) * var(--scale));\n    --font-size: 1rem;\n    --font-size--xs: calc(var(--font-size) * var(--scale-power---2));\n    --font-size--sm: calc(var(--font-size) * var(--scale-power---1));\n    --font-size--md: calc(var(--font-size) * var(--scale-power--0));\n    --font-size--lg: calc(var(--font-size) * var(--scale-power--1));\n    --font-size--xl: calc(var(--font-size) * var(--scale-power--2));\n    --font-size--2xl: calc(var(--font-size) * var(--scale-power--3));\n    --font-size--3xl: calc(var(--font-size) * var(--scale-power--4));\n    --font-size--4xl: calc(var(--font-size) * var(--scale-power--5));\n}\n",[697,2917,2918,2926,2938,2954,2991,3014,3025,3040,3071,3110,3159,3218,3228,3258,3287,3316,3345,3374,3404,3434,3464],{"__ignoreMap":829},[833,2919,2920,2922,2924],{"class":835,"line":836},[833,2921,1013],{"class":843},[833,2923,1016],{"class":902},[833,2925,930],{"class":843},[833,2927,2928,2931,2933,2936],{"class":835,"line":870},[833,2929,2930],{"class":847},"    --scale--perfect-fourth",[833,2932,1013],{"class":843},[833,2934,2935],{"class":2274}," 1.333",[833,2937,867],{"class":843},[833,2939,2940,2943,2945,2947,2949,2952],{"class":835,"line":893},[833,2941,2942],{"class":847},"    --scale",[833,2944,1013],{"class":843},[833,2946,1182],{"class":912},[833,2948,1185],{"class":843},[833,2950,2951],{"class":847},"--scale--perfect-fourth",[833,2953,1191],{"class":843},[833,2955,2956,2959,2961,2964,2966,2968,2971,2973,2975,2978,2980,2982,2984,2986,2988],{"class":835,"line":899},[833,2957,2958],{"class":847},"    --scale-power---2",[833,2960,1013],{"class":843},[833,2962,2963],{"class":912}," calc",[833,2965,1185],{"class":843},[833,2967,2592],{"class":2274},[833,2969,2970],{"class":843}," \u002F",[833,2972,1182],{"class":912},[833,2974,1185],{"class":843},[833,2976,2977],{"class":847},"--scale",[833,2979,1433],{"class":843},[833,2981,2970],{"class":843},[833,2983,1182],{"class":912},[833,2985,1185],{"class":843},[833,2987,2977],{"class":847},[833,2989,2990],{"class":843},"));\n",[833,2992,2993,2996,2998,3000,3002,3004,3006,3008,3010,3012],{"class":835,"line":920},[833,2994,2995],{"class":847},"    --scale-power---1",[833,2997,1013],{"class":843},[833,2999,2963],{"class":912},[833,3001,1185],{"class":843},[833,3003,2592],{"class":2274},[833,3005,2970],{"class":843},[833,3007,1182],{"class":912},[833,3009,1185],{"class":843},[833,3011,2977],{"class":847},[833,3013,2990],{"class":843},[833,3015,3016,3019,3021,3023],{"class":835,"line":925},[833,3017,3018],{"class":847},"    --scale-power--0",[833,3020,1013],{"class":843},[833,3022,2602],{"class":2274},[833,3024,867],{"class":843},[833,3026,3027,3030,3032,3034,3036,3038],{"class":835,"line":933},[833,3028,3029],{"class":847},"    --scale-power--1",[833,3031,1013],{"class":843},[833,3033,1182],{"class":912},[833,3035,1185],{"class":843},[833,3037,2977],{"class":847},[833,3039,1191],{"class":843},[833,3041,3042,3045,3047,3049,3051,3054,3056,3058,3060,3063,3065,3067,3069],{"class":835,"line":942},[833,3043,3044],{"class":847},"    --scale-power--2",[833,3046,1013],{"class":843},[833,3048,2963],{"class":912},[833,3050,1185],{"class":843},[833,3052,3053],{"class":912},"var",[833,3055,1185],{"class":843},[833,3057,2977],{"class":847},[833,3059,1433],{"class":843},[833,3061,3062],{"class":843}," *",[833,3064,1182],{"class":912},[833,3066,1185],{"class":843},[833,3068,2977],{"class":847},[833,3070,2990],{"class":843},[833,3072,3073,3076,3078,3080,3082,3084,3086,3088,3090,3092,3094,3096,3098,3100,3102,3104,3106,3108],{"class":835,"line":950},[833,3074,3075],{"class":847},"    --scale-power--3",[833,3077,1013],{"class":843},[833,3079,2963],{"class":912},[833,3081,1185],{"class":843},[833,3083,3053],{"class":912},[833,3085,1185],{"class":843},[833,3087,2977],{"class":847},[833,3089,1433],{"class":843},[833,3091,3062],{"class":843},[833,3093,1182],{"class":912},[833,3095,1185],{"class":843},[833,3097,2977],{"class":847},[833,3099,1433],{"class":843},[833,3101,3062],{"class":843},[833,3103,1182],{"class":912},[833,3105,1185],{"class":843},[833,3107,2977],{"class":847},[833,3109,2990],{"class":843},[833,3111,3112,3115,3117,3119,3121,3123,3125,3127,3129,3131,3133,3135,3137,3139,3141,3143,3145,3147,3149,3151,3153,3155,3157],{"class":835,"line":958},[833,3113,3114],{"class":847},"    --scale-power--4",[833,3116,1013],{"class":843},[833,3118,2963],{"class":912},[833,3120,1185],{"class":843},[833,3122,3053],{"class":912},[833,3124,1185],{"class":843},[833,3126,2977],{"class":847},[833,3128,1433],{"class":843},[833,3130,3062],{"class":843},[833,3132,1182],{"class":912},[833,3134,1185],{"class":843},[833,3136,2977],{"class":847},[833,3138,1433],{"class":843},[833,3140,3062],{"class":843},[833,3142,1182],{"class":912},[833,3144,1185],{"class":843},[833,3146,2977],{"class":847},[833,3148,1433],{"class":843},[833,3150,3062],{"class":843},[833,3152,1182],{"class":912},[833,3154,1185],{"class":843},[833,3156,2977],{"class":847},[833,3158,2990],{"class":843},[833,3160,3161,3164,3166,3168,3170,3172,3174,3176,3178,3180,3182,3184,3186,3188,3190,3192,3194,3196,3198,3200,3202,3204,3206,3208,3210,3212,3214,3216],{"class":835,"line":966},[833,3162,3163],{"class":847},"    --scale-power--5",[833,3165,1013],{"class":843},[833,3167,2963],{"class":912},[833,3169,1185],{"class":843},[833,3171,3053],{"class":912},[833,3173,1185],{"class":843},[833,3175,2977],{"class":847},[833,3177,1433],{"class":843},[833,3179,3062],{"class":843},[833,3181,1182],{"class":912},[833,3183,1185],{"class":843},[833,3185,2977],{"class":847},[833,3187,1433],{"class":843},[833,3189,3062],{"class":843},[833,3191,1182],{"class":912},[833,3193,1185],{"class":843},[833,3195,2977],{"class":847},[833,3197,1433],{"class":843},[833,3199,3062],{"class":843},[833,3201,1182],{"class":912},[833,3203,1185],{"class":843},[833,3205,2977],{"class":847},[833,3207,1433],{"class":843},[833,3209,3062],{"class":843},[833,3211,1182],{"class":912},[833,3213,1185],{"class":843},[833,3215,2977],{"class":847},[833,3217,2990],{"class":843},[833,3219,3220,3222,3224,3226],{"class":835,"line":982},[833,3221,2269],{"class":847},[833,3223,1013],{"class":843},[833,3225,2275],{"class":2274},[833,3227,867],{"class":843},[833,3229,3230,3232,3234,3236,3238,3240,3242,3245,3247,3249,3251,3253,3256],{"class":835,"line":987},[833,3231,2282],{"class":847},[833,3233,1013],{"class":843},[833,3235,2963],{"class":912},[833,3237,1185],{"class":843},[833,3239,3053],{"class":912},[833,3241,1185],{"class":843},[833,3243,3244],{"class":847},"--font-size",[833,3246,1433],{"class":843},[833,3248,3062],{"class":843},[833,3250,1182],{"class":912},[833,3252,1185],{"class":843},[833,3254,3255],{"class":847},"--scale-power---2",[833,3257,2990],{"class":843},[833,3259,3260,3262,3264,3266,3268,3270,3272,3274,3276,3278,3280,3282,3285],{"class":835,"line":1422},[833,3261,2294],{"class":847},[833,3263,1013],{"class":843},[833,3265,2963],{"class":912},[833,3267,1185],{"class":843},[833,3269,3053],{"class":912},[833,3271,1185],{"class":843},[833,3273,3244],{"class":847},[833,3275,1433],{"class":843},[833,3277,3062],{"class":843},[833,3279,1182],{"class":912},[833,3281,1185],{"class":843},[833,3283,3284],{"class":847},"--scale-power---1",[833,3286,2990],{"class":843},[833,3288,3289,3291,3293,3295,3297,3299,3301,3303,3305,3307,3309,3311,3314],{"class":835,"line":1438},[833,3290,2306],{"class":847},[833,3292,1013],{"class":843},[833,3294,2963],{"class":912},[833,3296,1185],{"class":843},[833,3298,3053],{"class":912},[833,3300,1185],{"class":843},[833,3302,3244],{"class":847},[833,3304,1433],{"class":843},[833,3306,3062],{"class":843},[833,3308,1182],{"class":912},[833,3310,1185],{"class":843},[833,3312,3313],{"class":847},"--scale-power--0",[833,3315,2990],{"class":843},[833,3317,3318,3320,3322,3324,3326,3328,3330,3332,3334,3336,3338,3340,3343],{"class":835,"line":1443},[833,3319,2317],{"class":847},[833,3321,1013],{"class":843},[833,3323,2963],{"class":912},[833,3325,1185],{"class":843},[833,3327,3053],{"class":912},[833,3329,1185],{"class":843},[833,3331,3244],{"class":847},[833,3333,1433],{"class":843},[833,3335,3062],{"class":843},[833,3337,1182],{"class":912},[833,3339,1185],{"class":843},[833,3341,3342],{"class":847},"--scale-power--1",[833,3344,2990],{"class":843},[833,3346,3347,3349,3351,3353,3355,3357,3359,3361,3363,3365,3367,3369,3372],{"class":835,"line":1780},[833,3348,2329],{"class":847},[833,3350,1013],{"class":843},[833,3352,2963],{"class":912},[833,3354,1185],{"class":843},[833,3356,3053],{"class":912},[833,3358,1185],{"class":843},[833,3360,3244],{"class":847},[833,3362,1433],{"class":843},[833,3364,3062],{"class":843},[833,3366,1182],{"class":912},[833,3368,1185],{"class":843},[833,3370,3371],{"class":847},"--scale-power--2",[833,3373,2990],{"class":843},[833,3375,3376,3379,3381,3383,3385,3387,3389,3391,3393,3395,3397,3399,3402],{"class":835,"line":2189},[833,3377,3378],{"class":847},"    --font-size--2xl",[833,3380,1013],{"class":843},[833,3382,2963],{"class":912},[833,3384,1185],{"class":843},[833,3386,3053],{"class":912},[833,3388,1185],{"class":843},[833,3390,3244],{"class":847},[833,3392,1433],{"class":843},[833,3394,3062],{"class":843},[833,3396,1182],{"class":912},[833,3398,1185],{"class":843},[833,3400,3401],{"class":847},"--scale-power--3",[833,3403,2990],{"class":843},[833,3405,3406,3409,3411,3413,3415,3417,3419,3421,3423,3425,3427,3429,3432],{"class":835,"line":2206},[833,3407,3408],{"class":847},"    --font-size--3xl",[833,3410,1013],{"class":843},[833,3412,2963],{"class":912},[833,3414,1185],{"class":843},[833,3416,3053],{"class":912},[833,3418,1185],{"class":843},[833,3420,3244],{"class":847},[833,3422,1433],{"class":843},[833,3424,3062],{"class":843},[833,3426,1182],{"class":912},[833,3428,1185],{"class":843},[833,3430,3431],{"class":847},"--scale-power--4",[833,3433,2990],{"class":843},[833,3435,3436,3439,3441,3443,3445,3447,3449,3451,3453,3455,3457,3459,3462],{"class":835,"line":2223},[833,3437,3438],{"class":847},"    --font-size--4xl",[833,3440,1013],{"class":843},[833,3442,2963],{"class":912},[833,3444,1185],{"class":843},[833,3446,3053],{"class":912},[833,3448,1185],{"class":843},[833,3450,3244],{"class":847},[833,3452,1433],{"class":843},[833,3454,3062],{"class":843},[833,3456,1182],{"class":912},[833,3458,1185],{"class":843},[833,3460,3461],{"class":847},"--scale-power--5",[833,3463,2990],{"class":843},[833,3465,3466],{"class":835,"line":2236},[833,3467,1196],{"class":843},[751,3469,802,3470,3472],{},[697,3471,2356],{}," function multiplies your base font size by the scale powers, creating a harmonious progression of sizes that maintain consistent proportional relationships.",[751,3474,3475,3478],{},[719,3476,3477],{"href":226},"Read more about design scales"," and take advantage of the flexibility they offer.",[1238,3480,3481,3483,3484,3486],{},[692,3482,1242],{}," Using ",[697,3485,2356],{}," with scales means you can change your entire type system's proportions by simply adjusting the scale ratio. Try different scales like Major Third (1.25) for more compact hierarchies or Perfect Fifth (1.5) for dramatic size differences.",[747,3488,3490],{"id":3489},"usefontweightdesigntokens",[697,3491,706],{},[751,3493,802,3494,3497],{},[697,3495,3496],{},"useFontWeightDesignTokens()"," function creates a set of font weight variables covering the standard range of weights.",[751,3499,3500],{},"Styleframe provides a comprehensive set of default font weight values:",[816,3502,3503,3682],{},[819,3504,3505],{"icon":821,"label":290},[823,3506,3508],{"className":825,"code":3507,"filename":827,"language":828,"meta":829,"style":829},"import { styleframe } from 'styleframe';\nimport { useFontWeightDesignTokens } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst {\n    fontWeight,\n    fontWeightExtralight,\n    fontWeightLight,\n    fontWeightNormal,\n    fontWeightMedium,\n    fontWeightSemibold,\n    fontWeightBold,\n    fontWeightBlack,\n    fontWeightLighter,\n    fontWeightBolder,\n    fontWeightInherit,\n} = useFontWeightDesignTokens(s);\n\nexport default s;\n",[697,3509,3510,3530,3551,3555,3569,3573,3579,3586,3593,3600,3607,3614,3621,3628,3635,3642,3649,3656,3668,3672],{"__ignoreMap":829},[833,3511,3512,3514,3516,3518,3520,3522,3524,3526,3528],{"class":835,"line":836},[833,3513,840],{"class":839},[833,3515,844],{"class":843},[833,3517,848],{"class":847},[833,3519,851],{"class":843},[833,3521,854],{"class":839},[833,3523,857],{"class":843},[833,3525,861],{"class":860},[833,3527,864],{"class":843},[833,3529,867],{"class":843},[833,3531,3532,3534,3536,3539,3541,3543,3545,3547,3549],{"class":835,"line":870},[833,3533,840],{"class":839},[833,3535,844],{"class":843},[833,3537,3538],{"class":847}," useFontWeightDesignTokens",[833,3540,851],{"class":843},[833,3542,854],{"class":839},[833,3544,857],{"class":843},[833,3546,886],{"class":860},[833,3548,864],{"class":843},[833,3550,867],{"class":843},[833,3552,3553],{"class":835,"line":893},[833,3554,896],{"emptyLinePlaceholder":223},[833,3556,3557,3559,3561,3563,3565,3567],{"class":835,"line":899},[833,3558,903],{"class":902},[833,3560,906],{"class":847},[833,3562,909],{"class":843},[833,3564,848],{"class":912},[833,3566,915],{"class":847},[833,3568,867],{"class":843},[833,3570,3571],{"class":835,"line":920},[833,3572,896],{"emptyLinePlaceholder":223},[833,3574,3575,3577],{"class":835,"line":925},[833,3576,903],{"class":902},[833,3578,930],{"class":843},[833,3580,3581,3584],{"class":835,"line":933},[833,3582,3583],{"class":847},"    fontWeight",[833,3585,939],{"class":843},[833,3587,3588,3591],{"class":835,"line":942},[833,3589,3590],{"class":847},"    fontWeightExtralight",[833,3592,939],{"class":843},[833,3594,3595,3598],{"class":835,"line":950},[833,3596,3597],{"class":847},"    fontWeightLight",[833,3599,939],{"class":843},[833,3601,3602,3605],{"class":835,"line":958},[833,3603,3604],{"class":847},"    fontWeightNormal",[833,3606,939],{"class":843},[833,3608,3609,3612],{"class":835,"line":966},[833,3610,3611],{"class":847},"    fontWeightMedium",[833,3613,939],{"class":843},[833,3615,3616,3619],{"class":835,"line":982},[833,3617,3618],{"class":847},"    fontWeightSemibold",[833,3620,939],{"class":843},[833,3622,3623,3626],{"class":835,"line":987},[833,3624,3625],{"class":847},"    fontWeightBold",[833,3627,939],{"class":843},[833,3629,3630,3633],{"class":835,"line":1422},[833,3631,3632],{"class":847},"    fontWeightBlack",[833,3634,939],{"class":843},[833,3636,3637,3640],{"class":835,"line":1438},[833,3638,3639],{"class":847},"    fontWeightLighter",[833,3641,939],{"class":843},[833,3643,3644,3647],{"class":835,"line":1443},[833,3645,3646],{"class":847},"    fontWeightBolder",[833,3648,939],{"class":843},[833,3650,3651,3654],{"class":835,"line":1780},[833,3652,3653],{"class":847},"    fontWeightInherit",[833,3655,939],{"class":843},[833,3657,3658,3660,3662,3664,3666],{"class":835,"line":2189},[833,3659,969],{"class":843},[833,3661,972],{"class":843},[833,3663,3538],{"class":912},[833,3665,977],{"class":847},[833,3667,867],{"class":843},[833,3669,3670],{"class":835,"line":2206},[833,3671,896],{"emptyLinePlaceholder":223},[833,3673,3674,3676,3678,3680],{"class":835,"line":2223},[833,3675,990],{"class":839},[833,3677,993],{"class":839},[833,3679,996],{"class":847},[833,3681,867],{"class":843},[819,3683,3684],{"icon":154,"label":326},[823,3685,3687],{"className":1003,"code":3686,"filename":1005,"language":1006,"meta":829,"style":829},":root {\n    --font-weight--extralight: 200;\n    --font-weight--light: 300;\n    --font-weight--normal: normal;\n    --font-weight--medium: 500;\n    --font-weight--semibold: 600;\n    --font-weight--bold: bold;\n    --font-weight--black: 900;\n    --font-weight--lighter: lighter;\n    --font-weight--bolder: bolder;\n    --font-weight--inherit: inherit;\n    --font-weight: var(--font-weight--normal);\n}\n",[697,3688,3689,3697,3709,3721,3733,3745,3757,3769,3781,3793,3805,3817,3833],{"__ignoreMap":829},[833,3690,3691,3693,3695],{"class":835,"line":836},[833,3692,1013],{"class":843},[833,3694,1016],{"class":902},[833,3696,930],{"class":843},[833,3698,3699,3702,3704,3707],{"class":835,"line":870},[833,3700,3701],{"class":847},"    --font-weight--extralight",[833,3703,1013],{"class":843},[833,3705,3706],{"class":2274}," 200",[833,3708,867],{"class":843},[833,3710,3711,3714,3716,3719],{"class":835,"line":893},[833,3712,3713],{"class":847},"    --font-weight--light",[833,3715,1013],{"class":843},[833,3717,3718],{"class":2274}," 300",[833,3720,867],{"class":843},[833,3722,3723,3726,3728,3731],{"class":835,"line":899},[833,3724,3725],{"class":847},"    --font-weight--normal",[833,3727,1013],{"class":843},[833,3729,3730],{"class":847}," normal",[833,3732,867],{"class":843},[833,3734,3735,3738,3740,3743],{"class":835,"line":920},[833,3736,3737],{"class":847},"    --font-weight--medium",[833,3739,1013],{"class":843},[833,3741,3742],{"class":2274}," 500",[833,3744,867],{"class":843},[833,3746,3747,3750,3752,3755],{"class":835,"line":925},[833,3748,3749],{"class":847},"    --font-weight--semibold",[833,3751,1013],{"class":843},[833,3753,3754],{"class":2274}," 600",[833,3756,867],{"class":843},[833,3758,3759,3762,3764,3767],{"class":835,"line":933},[833,3760,3761],{"class":847},"    --font-weight--bold",[833,3763,1013],{"class":843},[833,3765,3766],{"class":847}," bold",[833,3768,867],{"class":843},[833,3770,3771,3774,3776,3779],{"class":835,"line":942},[833,3772,3773],{"class":847},"    --font-weight--black",[833,3775,1013],{"class":843},[833,3777,3778],{"class":2274}," 900",[833,3780,867],{"class":843},[833,3782,3783,3786,3788,3791],{"class":835,"line":950},[833,3784,3785],{"class":847},"    --font-weight--lighter",[833,3787,1013],{"class":843},[833,3789,3790],{"class":847}," lighter",[833,3792,867],{"class":843},[833,3794,3795,3798,3800,3803],{"class":835,"line":958},[833,3796,3797],{"class":847},"    --font-weight--bolder",[833,3799,1013],{"class":843},[833,3801,3802],{"class":847}," bolder",[833,3804,867],{"class":843},[833,3806,3807,3810,3812,3815],{"class":835,"line":966},[833,3808,3809],{"class":847},"    --font-weight--inherit",[833,3811,1013],{"class":843},[833,3813,3814],{"class":847}," inherit",[833,3816,867],{"class":843},[833,3818,3819,3822,3824,3826,3828,3831],{"class":835,"line":982},[833,3820,3821],{"class":847},"    --font-weight",[833,3823,1013],{"class":843},[833,3825,1182],{"class":912},[833,3827,1185],{"class":843},[833,3829,3830],{"class":847},"--font-weight--normal",[833,3832,1191],{"class":843},[833,3834,3835],{"class":835,"line":987},[833,3836,1196],{"class":843},[751,3838,1199],{},[762,3840,3841,3849,3857,3868,3876,3884,3894,3902,3912,3921,3929],{},[765,3842,3843,3848],{},[692,3844,3845],{},[697,3846,3847],{},"extralight",": 200 - Ultra thin weight",[765,3850,3851,3856],{},[692,3852,3853],{},[697,3854,3855],{},"light",": 300 - Light weight",[765,3858,3859,3864,3865,3867],{},[692,3860,3861],{},[697,3862,3863],{},"normal",": ",[697,3866,3863],{}," keyword (typically 400)",[765,3869,3870,3875],{},[692,3871,3872],{},[697,3873,3874],{},"medium",": 500 - Medium weight",[765,3877,3878,3883],{},[692,3879,3880],{},[697,3881,3882],{},"semibold",": 600 - Semibold weight",[765,3885,3886,3864,3891,3893],{},[692,3887,3888],{},[697,3889,3890],{},"bold",[697,3892,3890],{}," keyword (typically 700)",[765,3895,3896,3901],{},[692,3897,3898],{},[697,3899,3900],{},"black",": 900 - Heaviest weight",[765,3903,3904,3864,3909,3911],{},[692,3905,3906],{},[697,3907,3908],{},"lighter",[697,3910,3908],{}," keyword (relative to parent)",[765,3913,3914,3864,3919,3911],{},[692,3915,3916],{},[697,3917,3918],{},"bolder",[697,3920,3918],{},[765,3922,3923,3928],{},[692,3924,3925],{},[697,3926,3927],{},"inherit",": Inherits from parent",[765,3930,3931,1233,3935,1236],{},[692,3932,3933],{},[697,3934,1232],{},[697,3936,3863],{},[808,3938,3940],{"id":3939},"creating-custom-font-weight-variables","Creating Custom Font Weight Variables",[751,3942,3943],{},"Override font weights to match your font's available weights:",[816,3945,3946,4148],{},[819,3947,3948],{"icon":821,"label":290},[823,3949,3951],{"className":825,"code":3950,"filename":827,"language":828,"meta":829,"style":829},"import { styleframe } from 'styleframe';\nimport { useFontWeightDesignTokens } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst {\n    fontWeight,\n    fontWeightLight,\n    fontWeightRegular,\n    fontWeightMedium,\n    fontWeightBold,\n} = useFontWeightDesignTokens(s, {\n    default: 400,\n    light: 300,\n    regular: 400,\n    medium: 500,\n    bold: 700,\n} as const);\n\nexport default s;\n",[697,3952,3953,3973,3993,3997,4011,4015,4021,4027,4033,4040,4046,4052,4066,4077,4088,4099,4110,4122,4134,4138],{"__ignoreMap":829},[833,3954,3955,3957,3959,3961,3963,3965,3967,3969,3971],{"class":835,"line":836},[833,3956,840],{"class":839},[833,3958,844],{"class":843},[833,3960,848],{"class":847},[833,3962,851],{"class":843},[833,3964,854],{"class":839},[833,3966,857],{"class":843},[833,3968,861],{"class":860},[833,3970,864],{"class":843},[833,3972,867],{"class":843},[833,3974,3975,3977,3979,3981,3983,3985,3987,3989,3991],{"class":835,"line":870},[833,3976,840],{"class":839},[833,3978,844],{"class":843},[833,3980,3538],{"class":847},[833,3982,851],{"class":843},[833,3984,854],{"class":839},[833,3986,857],{"class":843},[833,3988,886],{"class":860},[833,3990,864],{"class":843},[833,3992,867],{"class":843},[833,3994,3995],{"class":835,"line":893},[833,3996,896],{"emptyLinePlaceholder":223},[833,3998,3999,4001,4003,4005,4007,4009],{"class":835,"line":899},[833,4000,903],{"class":902},[833,4002,906],{"class":847},[833,4004,909],{"class":843},[833,4006,848],{"class":912},[833,4008,915],{"class":847},[833,4010,867],{"class":843},[833,4012,4013],{"class":835,"line":920},[833,4014,896],{"emptyLinePlaceholder":223},[833,4016,4017,4019],{"class":835,"line":925},[833,4018,903],{"class":902},[833,4020,930],{"class":843},[833,4022,4023,4025],{"class":835,"line":933},[833,4024,3583],{"class":847},[833,4026,939],{"class":843},[833,4028,4029,4031],{"class":835,"line":942},[833,4030,3597],{"class":847},[833,4032,939],{"class":843},[833,4034,4035,4038],{"class":835,"line":950},[833,4036,4037],{"class":847},"    fontWeightRegular",[833,4039,939],{"class":843},[833,4041,4042,4044],{"class":835,"line":958},[833,4043,3611],{"class":847},[833,4045,939],{"class":843},[833,4047,4048,4050],{"class":835,"line":966},[833,4049,3625],{"class":847},[833,4051,939],{"class":843},[833,4053,4054,4056,4058,4060,4062,4064],{"class":835,"line":982},[833,4055,969],{"class":843},[833,4057,972],{"class":843},[833,4059,3538],{"class":912},[833,4061,1364],{"class":847},[833,4063,1031],{"class":843},[833,4065,930],{"class":843},[833,4067,4068,4070,4072,4075],{"class":835,"line":987},[833,4069,1374],{"class":1373},[833,4071,1013],{"class":843},[833,4073,4074],{"class":2274}," 400",[833,4076,939],{"class":843},[833,4078,4079,4082,4084,4086],{"class":835,"line":1422},[833,4080,4081],{"class":1373},"    light",[833,4083,1013],{"class":843},[833,4085,3718],{"class":2274},[833,4087,939],{"class":843},[833,4089,4090,4093,4095,4097],{"class":835,"line":1438},[833,4091,4092],{"class":1373},"    regular",[833,4094,1013],{"class":843},[833,4096,4074],{"class":2274},[833,4098,939],{"class":843},[833,4100,4101,4104,4106,4108],{"class":835,"line":1443},[833,4102,4103],{"class":1373},"    medium",[833,4105,1013],{"class":843},[833,4107,3742],{"class":2274},[833,4109,939],{"class":843},[833,4111,4112,4115,4117,4120],{"class":835,"line":1780},[833,4113,4114],{"class":1373},"    bold",[833,4116,1013],{"class":843},[833,4118,4119],{"class":2274}," 700",[833,4121,939],{"class":843},[833,4123,4124,4126,4128,4130,4132],{"class":835,"line":2189},[833,4125,969],{"class":843},[833,4127,1427],{"class":839},[833,4129,1430],{"class":902},[833,4131,1433],{"class":847},[833,4133,867],{"class":843},[833,4135,4136],{"class":835,"line":2206},[833,4137,896],{"emptyLinePlaceholder":223},[833,4139,4140,4142,4144,4146],{"class":835,"line":2223},[833,4141,990],{"class":839},[833,4143,993],{"class":839},[833,4145,996],{"class":847},[833,4147,867],{"class":843},[819,4149,4150],{"icon":154,"label":326},[823,4151,4153],{"className":1003,"code":4152,"filename":1005,"language":1006,"meta":829,"style":829},":root {\n    --font-weight: 400;\n    --font-weight--light: 300;\n    --font-weight--regular: 400;\n    --font-weight--medium: 500;\n    --font-weight--bold: 700;\n}\n",[697,4154,4155,4163,4173,4183,4194,4204,4214],{"__ignoreMap":829},[833,4156,4157,4159,4161],{"class":835,"line":836},[833,4158,1013],{"class":843},[833,4160,1016],{"class":902},[833,4162,930],{"class":843},[833,4164,4165,4167,4169,4171],{"class":835,"line":870},[833,4166,3821],{"class":847},[833,4168,1013],{"class":843},[833,4170,4074],{"class":2274},[833,4172,867],{"class":843},[833,4174,4175,4177,4179,4181],{"class":835,"line":893},[833,4176,3713],{"class":847},[833,4178,1013],{"class":843},[833,4180,3718],{"class":2274},[833,4182,867],{"class":843},[833,4184,4185,4188,4190,4192],{"class":835,"line":899},[833,4186,4187],{"class":847},"    --font-weight--regular",[833,4189,1013],{"class":843},[833,4191,4074],{"class":2274},[833,4193,867],{"class":843},[833,4195,4196,4198,4200,4202],{"class":835,"line":920},[833,4197,3737],{"class":847},[833,4199,1013],{"class":843},[833,4201,3742],{"class":2274},[833,4203,867],{"class":843},[833,4205,4206,4208,4210,4212],{"class":835,"line":925},[833,4207,3761],{"class":847},[833,4209,1013],{"class":843},[833,4211,4119],{"class":2274},[833,4213,867],{"class":843},[833,4215,4216],{"class":835,"line":933},[833,4217,1196],{"class":843},[808,4219,4221],{"id":4220},"extending-the-default-font-weight-values","Extending the Default Font Weight Values",[751,4223,4224],{},"You can keep the defaults and override specific values:",[816,4226,4227,4371],{},[819,4228,4229],{"icon":821,"label":290},[823,4230,4232],{"className":825,"code":4231,"filename":827,"language":828,"meta":829,"style":829},"import { styleframe } from 'styleframe';\nimport { useFontWeightDesignTokens, defaultFontWeightValues } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst { fontWeight } = useFontWeightDesignTokens(s, {\n    ...defaultFontWeightValues,\n    default: '@font-weight.semibold'\n} as const);\n\nexport default s;\n",[697,4233,4234,4254,4279,4283,4297,4301,4322,4331,4345,4357,4361],{"__ignoreMap":829},[833,4235,4236,4238,4240,4242,4244,4246,4248,4250,4252],{"class":835,"line":836},[833,4237,840],{"class":839},[833,4239,844],{"class":843},[833,4241,848],{"class":847},[833,4243,851],{"class":843},[833,4245,854],{"class":839},[833,4247,857],{"class":843},[833,4249,861],{"class":860},[833,4251,864],{"class":843},[833,4253,867],{"class":843},[833,4255,4256,4258,4260,4262,4264,4267,4269,4271,4273,4275,4277],{"class":835,"line":870},[833,4257,840],{"class":839},[833,4259,844],{"class":843},[833,4261,3538],{"class":847},[833,4263,1031],{"class":843},[833,4265,4266],{"class":847}," defaultFontWeightValues",[833,4268,851],{"class":843},[833,4270,854],{"class":839},[833,4272,857],{"class":843},[833,4274,886],{"class":860},[833,4276,864],{"class":843},[833,4278,867],{"class":843},[833,4280,4281],{"class":835,"line":893},[833,4282,896],{"emptyLinePlaceholder":223},[833,4284,4285,4287,4289,4291,4293,4295],{"class":835,"line":899},[833,4286,903],{"class":902},[833,4288,906],{"class":847},[833,4290,909],{"class":843},[833,4292,848],{"class":912},[833,4294,915],{"class":847},[833,4296,867],{"class":843},[833,4298,4299],{"class":835,"line":920},[833,4300,896],{"emptyLinePlaceholder":223},[833,4302,4303,4305,4307,4310,4312,4314,4316,4318,4320],{"class":835,"line":925},[833,4304,903],{"class":902},[833,4306,844],{"class":843},[833,4308,4309],{"class":847}," fontWeight ",[833,4311,969],{"class":843},[833,4313,972],{"class":843},[833,4315,3538],{"class":912},[833,4317,1364],{"class":847},[833,4319,1031],{"class":843},[833,4321,930],{"class":843},[833,4323,4324,4326,4329],{"class":835,"line":933},[833,4325,1740],{"class":843},[833,4327,4328],{"class":847},"defaultFontWeightValues",[833,4330,939],{"class":843},[833,4332,4333,4335,4337,4339,4342],{"class":835,"line":942},[833,4334,1374],{"class":1373},[833,4336,1013],{"class":843},[833,4338,857],{"class":843},[833,4340,4341],{"class":860},"@font-weight.semibold",[833,4343,4344],{"class":843},"'\n",[833,4346,4347,4349,4351,4353,4355],{"class":835,"line":950},[833,4348,969],{"class":843},[833,4350,1427],{"class":839},[833,4352,1430],{"class":902},[833,4354,1433],{"class":847},[833,4356,867],{"class":843},[833,4358,4359],{"class":835,"line":958},[833,4360,896],{"emptyLinePlaceholder":223},[833,4362,4363,4365,4367,4369],{"class":835,"line":966},[833,4364,990],{"class":839},[833,4366,993],{"class":839},[833,4368,996],{"class":847},[833,4370,867],{"class":843},[819,4372,4373],{"icon":154,"label":326},[823,4374,4376],{"className":1003,"code":4375,"filename":1005,"language":1006,"meta":829,"style":829},":root {\n    --font-weight--extralight: 200;\n    --font-weight--light: 300;\n    --font-weight--normal: normal;\n    --font-weight--medium: 500;\n    --font-weight--semibold: 600;\n    --font-weight--bold: bold;\n    --font-weight--black: 900;\n    --font-weight--lighter: lighter;\n    --font-weight--bolder: bolder;\n    --font-weight--inherit: inherit;\n    --font-weight: var(--font-weight--semibold);\n}\n",[697,4377,4378,4386,4396,4406,4416,4426,4436,4446,4456,4466,4476,4486,4501],{"__ignoreMap":829},[833,4379,4380,4382,4384],{"class":835,"line":836},[833,4381,1013],{"class":843},[833,4383,1016],{"class":902},[833,4385,930],{"class":843},[833,4387,4388,4390,4392,4394],{"class":835,"line":870},[833,4389,3701],{"class":847},[833,4391,1013],{"class":843},[833,4393,3706],{"class":2274},[833,4395,867],{"class":843},[833,4397,4398,4400,4402,4404],{"class":835,"line":893},[833,4399,3713],{"class":847},[833,4401,1013],{"class":843},[833,4403,3718],{"class":2274},[833,4405,867],{"class":843},[833,4407,4408,4410,4412,4414],{"class":835,"line":899},[833,4409,3725],{"class":847},[833,4411,1013],{"class":843},[833,4413,3730],{"class":847},[833,4415,867],{"class":843},[833,4417,4418,4420,4422,4424],{"class":835,"line":920},[833,4419,3737],{"class":847},[833,4421,1013],{"class":843},[833,4423,3742],{"class":2274},[833,4425,867],{"class":843},[833,4427,4428,4430,4432,4434],{"class":835,"line":925},[833,4429,3749],{"class":847},[833,4431,1013],{"class":843},[833,4433,3754],{"class":2274},[833,4435,867],{"class":843},[833,4437,4438,4440,4442,4444],{"class":835,"line":933},[833,4439,3761],{"class":847},[833,4441,1013],{"class":843},[833,4443,3766],{"class":847},[833,4445,867],{"class":843},[833,4447,4448,4450,4452,4454],{"class":835,"line":942},[833,4449,3773],{"class":847},[833,4451,1013],{"class":843},[833,4453,3778],{"class":2274},[833,4455,867],{"class":843},[833,4457,4458,4460,4462,4464],{"class":835,"line":950},[833,4459,3785],{"class":847},[833,4461,1013],{"class":843},[833,4463,3790],{"class":847},[833,4465,867],{"class":843},[833,4467,4468,4470,4472,4474],{"class":835,"line":958},[833,4469,3797],{"class":847},[833,4471,1013],{"class":843},[833,4473,3802],{"class":847},[833,4475,867],{"class":843},[833,4477,4478,4480,4482,4484],{"class":835,"line":966},[833,4479,3809],{"class":847},[833,4481,1013],{"class":843},[833,4483,3814],{"class":847},[833,4485,867],{"class":843},[833,4487,4488,4490,4492,4494,4496,4499],{"class":835,"line":982},[833,4489,3821],{"class":847},[833,4491,1013],{"class":843},[833,4493,1182],{"class":912},[833,4495,1185],{"class":843},[833,4497,4498],{"class":847},"--font-weight--semibold",[833,4500,1191],{"class":843},[833,4502,4503],{"class":835,"line":987},[833,4504,1196],{"class":843},[747,4506,4508],{"id":4507},"usefontstyledesigntokens",[697,4509,709],{},[751,4511,802,4512,4515],{},[697,4513,4514],{},"useFontStyleDesignTokens()"," function creates a set of font style variables for controlling text styling like italic and oblique.",[751,4517,4518],{},"Styleframe provides all standard CSS font style values:",[816,4520,4521,4658],{},[819,4522,4523],{"icon":821,"label":290},[823,4524,4526],{"className":825,"code":4525,"filename":827,"language":828,"meta":829,"style":829},"import { styleframe } from 'styleframe';\nimport { useFontStyleDesignTokens } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst {\n    fontStyle,\n    fontStyleItalic,\n    fontStyleOblique,\n    fontStyleNormal,\n    fontStyleInherit,\n} = useFontStyleDesignTokens(s);\n\nexport default s;\n",[697,4527,4528,4548,4569,4573,4587,4591,4597,4604,4611,4618,4625,4632,4644,4648],{"__ignoreMap":829},[833,4529,4530,4532,4534,4536,4538,4540,4542,4544,4546],{"class":835,"line":836},[833,4531,840],{"class":839},[833,4533,844],{"class":843},[833,4535,848],{"class":847},[833,4537,851],{"class":843},[833,4539,854],{"class":839},[833,4541,857],{"class":843},[833,4543,861],{"class":860},[833,4545,864],{"class":843},[833,4547,867],{"class":843},[833,4549,4550,4552,4554,4557,4559,4561,4563,4565,4567],{"class":835,"line":870},[833,4551,840],{"class":839},[833,4553,844],{"class":843},[833,4555,4556],{"class":847}," useFontStyleDesignTokens",[833,4558,851],{"class":843},[833,4560,854],{"class":839},[833,4562,857],{"class":843},[833,4564,886],{"class":860},[833,4566,864],{"class":843},[833,4568,867],{"class":843},[833,4570,4571],{"class":835,"line":893},[833,4572,896],{"emptyLinePlaceholder":223},[833,4574,4575,4577,4579,4581,4583,4585],{"class":835,"line":899},[833,4576,903],{"class":902},[833,4578,906],{"class":847},[833,4580,909],{"class":843},[833,4582,848],{"class":912},[833,4584,915],{"class":847},[833,4586,867],{"class":843},[833,4588,4589],{"class":835,"line":920},[833,4590,896],{"emptyLinePlaceholder":223},[833,4592,4593,4595],{"class":835,"line":925},[833,4594,903],{"class":902},[833,4596,930],{"class":843},[833,4598,4599,4602],{"class":835,"line":933},[833,4600,4601],{"class":847},"    fontStyle",[833,4603,939],{"class":843},[833,4605,4606,4609],{"class":835,"line":942},[833,4607,4608],{"class":847},"    fontStyleItalic",[833,4610,939],{"class":843},[833,4612,4613,4616],{"class":835,"line":950},[833,4614,4615],{"class":847},"    fontStyleOblique",[833,4617,939],{"class":843},[833,4619,4620,4623],{"class":835,"line":958},[833,4621,4622],{"class":847},"    fontStyleNormal",[833,4624,939],{"class":843},[833,4626,4627,4630],{"class":835,"line":966},[833,4628,4629],{"class":847},"    fontStyleInherit",[833,4631,939],{"class":843},[833,4633,4634,4636,4638,4640,4642],{"class":835,"line":982},[833,4635,969],{"class":843},[833,4637,972],{"class":843},[833,4639,4556],{"class":912},[833,4641,977],{"class":847},[833,4643,867],{"class":843},[833,4645,4646],{"class":835,"line":987},[833,4647,896],{"emptyLinePlaceholder":223},[833,4649,4650,4652,4654,4656],{"class":835,"line":1422},[833,4651,990],{"class":839},[833,4653,993],{"class":839},[833,4655,996],{"class":847},[833,4657,867],{"class":843},[819,4659,4660],{"icon":154,"label":326},[823,4661,4663],{"className":1003,"code":4662,"filename":1005,"language":1006,"meta":829,"style":829},":root {\n    --font-style--italic: italic;\n    --font-style--oblique: oblique;\n    --font-style--normal: normal;\n    --font-style--inherit: inherit;\n    --font-style: var(--font-style--normal);\n}\n",[697,4664,4665,4673,4685,4697,4708,4719,4735],{"__ignoreMap":829},[833,4666,4667,4669,4671],{"class":835,"line":836},[833,4668,1013],{"class":843},[833,4670,1016],{"class":902},[833,4672,930],{"class":843},[833,4674,4675,4678,4680,4683],{"class":835,"line":870},[833,4676,4677],{"class":847},"    --font-style--italic",[833,4679,1013],{"class":843},[833,4681,4682],{"class":847}," italic",[833,4684,867],{"class":843},[833,4686,4687,4690,4692,4695],{"class":835,"line":893},[833,4688,4689],{"class":847},"    --font-style--oblique",[833,4691,1013],{"class":843},[833,4693,4694],{"class":847}," oblique",[833,4696,867],{"class":843},[833,4698,4699,4702,4704,4706],{"class":835,"line":899},[833,4700,4701],{"class":847},"    --font-style--normal",[833,4703,1013],{"class":843},[833,4705,3730],{"class":847},[833,4707,867],{"class":843},[833,4709,4710,4713,4715,4717],{"class":835,"line":920},[833,4711,4712],{"class":847},"    --font-style--inherit",[833,4714,1013],{"class":843},[833,4716,3814],{"class":847},[833,4718,867],{"class":843},[833,4720,4721,4724,4726,4728,4730,4733],{"class":835,"line":925},[833,4722,4723],{"class":847},"    --font-style",[833,4725,1013],{"class":843},[833,4727,1182],{"class":912},[833,4729,1185],{"class":843},[833,4731,4732],{"class":847},"--font-style--normal",[833,4734,1191],{"class":843},[833,4736,4737],{"class":835,"line":933},[833,4738,1196],{"class":843},[751,4740,1199],{},[762,4742,4743,4751,4759,4766,4772],{},[765,4744,4745,4750],{},[692,4746,4747],{},[697,4748,4749],{},"italic",": Italic style (uses true italic font if available)",[765,4752,4753,4758],{},[692,4754,4755],{},[697,4756,4757],{},"oblique",": Oblique style (slanted version of normal font)",[765,4760,4761,4765],{},[692,4762,4763],{},[697,4764,3863],{},": Normal upright style",[765,4767,4768,3928],{},[692,4769,4770],{},[697,4771,3927],{},[765,4773,4774,1233,4778,1236],{},[692,4775,4776],{},[697,4777,1232],{},[697,4779,3863],{},[689,4781,4782,695,4785,4787,4788,4790,4791,4793],{},[692,4783,4784],{},"Good to know:",[697,4786,4749],{}," uses a true italic font variant if available, while ",[697,4789,4757],{}," artificially slants the font. Most fonts provide italic variants, making ",[697,4792,4749],{}," the preferred choice for emphasis.",[808,4795,4797],{"id":4796},"creating-custom-font-style-variables","Creating Custom Font Style Variables",[751,4799,4800],{},"Define custom font style values for specific needs:",[816,4802,4803,4982],{},[819,4804,4805],{"icon":821,"label":290},[823,4806,4808],{"className":825,"code":4807,"filename":827,"language":828,"meta":829,"style":829},"import { styleframe } from 'styleframe';\nimport { useFontStyleDesignTokens } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst {\n    fontStyle,\n    fontStyleItalic,\n    fontStyleSlanted,\n} = useFontStyleDesignTokens(s, {\n    default: 'normal',\n    italic: 'italic',\n    slanted: 'oblique 15deg',\n} as const);\n\nexport default s;\n",[697,4809,4810,4830,4850,4854,4868,4872,4878,4884,4890,4897,4911,4925,4940,4956,4968,4972],{"__ignoreMap":829},[833,4811,4812,4814,4816,4818,4820,4822,4824,4826,4828],{"class":835,"line":836},[833,4813,840],{"class":839},[833,4815,844],{"class":843},[833,4817,848],{"class":847},[833,4819,851],{"class":843},[833,4821,854],{"class":839},[833,4823,857],{"class":843},[833,4825,861],{"class":860},[833,4827,864],{"class":843},[833,4829,867],{"class":843},[833,4831,4832,4834,4836,4838,4840,4842,4844,4846,4848],{"class":835,"line":870},[833,4833,840],{"class":839},[833,4835,844],{"class":843},[833,4837,4556],{"class":847},[833,4839,851],{"class":843},[833,4841,854],{"class":839},[833,4843,857],{"class":843},[833,4845,886],{"class":860},[833,4847,864],{"class":843},[833,4849,867],{"class":843},[833,4851,4852],{"class":835,"line":893},[833,4853,896],{"emptyLinePlaceholder":223},[833,4855,4856,4858,4860,4862,4864,4866],{"class":835,"line":899},[833,4857,903],{"class":902},[833,4859,906],{"class":847},[833,4861,909],{"class":843},[833,4863,848],{"class":912},[833,4865,915],{"class":847},[833,4867,867],{"class":843},[833,4869,4870],{"class":835,"line":920},[833,4871,896],{"emptyLinePlaceholder":223},[833,4873,4874,4876],{"class":835,"line":925},[833,4875,903],{"class":902},[833,4877,930],{"class":843},[833,4879,4880,4882],{"class":835,"line":933},[833,4881,4601],{"class":847},[833,4883,939],{"class":843},[833,4885,4886,4888],{"class":835,"line":942},[833,4887,4608],{"class":847},[833,4889,939],{"class":843},[833,4891,4892,4895],{"class":835,"line":950},[833,4893,4894],{"class":847},"    fontStyleSlanted",[833,4896,939],{"class":843},[833,4898,4899,4901,4903,4905,4907,4909],{"class":835,"line":958},[833,4900,969],{"class":843},[833,4902,972],{"class":843},[833,4904,4556],{"class":912},[833,4906,1364],{"class":847},[833,4908,1031],{"class":843},[833,4910,930],{"class":843},[833,4912,4913,4915,4917,4919,4921,4923],{"class":835,"line":966},[833,4914,1374],{"class":1373},[833,4916,1013],{"class":843},[833,4918,857],{"class":843},[833,4920,3863],{"class":860},[833,4922,864],{"class":843},[833,4924,939],{"class":843},[833,4926,4927,4930,4932,4934,4936,4938],{"class":835,"line":982},[833,4928,4929],{"class":1373},"    italic",[833,4931,1013],{"class":843},[833,4933,857],{"class":843},[833,4935,4749],{"class":860},[833,4937,864],{"class":843},[833,4939,939],{"class":843},[833,4941,4942,4945,4947,4949,4952,4954],{"class":835,"line":987},[833,4943,4944],{"class":1373},"    slanted",[833,4946,1013],{"class":843},[833,4948,857],{"class":843},[833,4950,4951],{"class":860},"oblique 15deg",[833,4953,864],{"class":843},[833,4955,939],{"class":843},[833,4957,4958,4960,4962,4964,4966],{"class":835,"line":1422},[833,4959,969],{"class":843},[833,4961,1427],{"class":839},[833,4963,1430],{"class":902},[833,4965,1433],{"class":847},[833,4967,867],{"class":843},[833,4969,4970],{"class":835,"line":1438},[833,4971,896],{"emptyLinePlaceholder":223},[833,4973,4974,4976,4978,4980],{"class":835,"line":1443},[833,4975,990],{"class":839},[833,4977,993],{"class":839},[833,4979,996],{"class":847},[833,4981,867],{"class":843},[819,4983,4984],{"icon":154,"label":326},[823,4985,4987],{"className":1003,"code":4986,"filename":1005,"language":1006,"meta":829,"style":829},":root {\n    --font-style--italic: italic;\n    --font-style--slanted: oblique 15deg;\n    --font-style: normal;\n}\n",[697,4988,4989,4997,5007,5022,5032],{"__ignoreMap":829},[833,4990,4991,4993,4995],{"class":835,"line":836},[833,4992,1013],{"class":843},[833,4994,1016],{"class":902},[833,4996,930],{"class":843},[833,4998,4999,5001,5003,5005],{"class":835,"line":870},[833,5000,4677],{"class":847},[833,5002,1013],{"class":843},[833,5004,4682],{"class":847},[833,5006,867],{"class":843},[833,5008,5009,5012,5014,5017,5020],{"class":835,"line":893},[833,5010,5011],{"class":847},"    --font-style--slanted",[833,5013,1013],{"class":843},[833,5015,5016],{"class":847}," oblique ",[833,5018,5019],{"class":2274},"15deg",[833,5021,867],{"class":843},[833,5023,5024,5026,5028,5030],{"class":835,"line":899},[833,5025,4723],{"class":847},[833,5027,1013],{"class":843},[833,5029,3730],{"class":847},[833,5031,867],{"class":843},[833,5033,5034],{"class":835,"line":920},[833,5035,1196],{"class":843},[808,5037,5039],{"id":5038},"extending-the-default-font-style-values","Extending the Default Font Style Values",[751,5041,5042],{},"You can extend the defaults with additional custom values:",[816,5044,5045,5188],{},[819,5046,5047],{"icon":821,"label":290},[823,5048,5050],{"className":825,"code":5049,"filename":827,"language":828,"meta":829,"style":829},"import { styleframe } from 'styleframe';\nimport { useFontStyleDesignTokens, defaultFontStyleValues } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst { fontStyle } = useFontStyleDesignTokens(s, {\n    ...defaultFontStyleValues,\n    default: '@font-style.italic'\n} as const);\n\nexport default s;\n",[697,5051,5052,5072,5097,5101,5115,5119,5140,5149,5162,5174,5178],{"__ignoreMap":829},[833,5053,5054,5056,5058,5060,5062,5064,5066,5068,5070],{"class":835,"line":836},[833,5055,840],{"class":839},[833,5057,844],{"class":843},[833,5059,848],{"class":847},[833,5061,851],{"class":843},[833,5063,854],{"class":839},[833,5065,857],{"class":843},[833,5067,861],{"class":860},[833,5069,864],{"class":843},[833,5071,867],{"class":843},[833,5073,5074,5076,5078,5080,5082,5085,5087,5089,5091,5093,5095],{"class":835,"line":870},[833,5075,840],{"class":839},[833,5077,844],{"class":843},[833,5079,4556],{"class":847},[833,5081,1031],{"class":843},[833,5083,5084],{"class":847}," defaultFontStyleValues",[833,5086,851],{"class":843},[833,5088,854],{"class":839},[833,5090,857],{"class":843},[833,5092,886],{"class":860},[833,5094,864],{"class":843},[833,5096,867],{"class":843},[833,5098,5099],{"class":835,"line":893},[833,5100,896],{"emptyLinePlaceholder":223},[833,5102,5103,5105,5107,5109,5111,5113],{"class":835,"line":899},[833,5104,903],{"class":902},[833,5106,906],{"class":847},[833,5108,909],{"class":843},[833,5110,848],{"class":912},[833,5112,915],{"class":847},[833,5114,867],{"class":843},[833,5116,5117],{"class":835,"line":920},[833,5118,896],{"emptyLinePlaceholder":223},[833,5120,5121,5123,5125,5128,5130,5132,5134,5136,5138],{"class":835,"line":925},[833,5122,903],{"class":902},[833,5124,844],{"class":843},[833,5126,5127],{"class":847}," fontStyle ",[833,5129,969],{"class":843},[833,5131,972],{"class":843},[833,5133,4556],{"class":912},[833,5135,1364],{"class":847},[833,5137,1031],{"class":843},[833,5139,930],{"class":843},[833,5141,5142,5144,5147],{"class":835,"line":933},[833,5143,1740],{"class":843},[833,5145,5146],{"class":847},"defaultFontStyleValues",[833,5148,939],{"class":843},[833,5150,5151,5153,5155,5157,5160],{"class":835,"line":942},[833,5152,1374],{"class":1373},[833,5154,1013],{"class":843},[833,5156,857],{"class":843},[833,5158,5159],{"class":860},"@font-style.italic",[833,5161,4344],{"class":843},[833,5163,5164,5166,5168,5170,5172],{"class":835,"line":950},[833,5165,969],{"class":843},[833,5167,1427],{"class":839},[833,5169,1430],{"class":902},[833,5171,1433],{"class":847},[833,5173,867],{"class":843},[833,5175,5176],{"class":835,"line":958},[833,5177,896],{"emptyLinePlaceholder":223},[833,5179,5180,5182,5184,5186],{"class":835,"line":966},[833,5181,990],{"class":839},[833,5183,993],{"class":839},[833,5185,996],{"class":847},[833,5187,867],{"class":843},[819,5189,5190],{"icon":154,"label":326},[823,5191,5193],{"className":1003,"code":5192,"filename":1005,"language":1006,"meta":829,"style":829},":root {\n    --font-style--italic: italic;\n    --font-style--oblique: oblique;\n    --font-style--normal: normal;\n    --font-style--inherit: inherit;\n    --font-style: var(--font-style--italic);\n}\n",[697,5194,5195,5203,5213,5223,5233,5243,5258],{"__ignoreMap":829},[833,5196,5197,5199,5201],{"class":835,"line":836},[833,5198,1013],{"class":843},[833,5200,1016],{"class":902},[833,5202,930],{"class":843},[833,5204,5205,5207,5209,5211],{"class":835,"line":870},[833,5206,4677],{"class":847},[833,5208,1013],{"class":843},[833,5210,4682],{"class":847},[833,5212,867],{"class":843},[833,5214,5215,5217,5219,5221],{"class":835,"line":893},[833,5216,4689],{"class":847},[833,5218,1013],{"class":843},[833,5220,4694],{"class":847},[833,5222,867],{"class":843},[833,5224,5225,5227,5229,5231],{"class":835,"line":899},[833,5226,4701],{"class":847},[833,5228,1013],{"class":843},[833,5230,3730],{"class":847},[833,5232,867],{"class":843},[833,5234,5235,5237,5239,5241],{"class":835,"line":920},[833,5236,4712],{"class":847},[833,5238,1013],{"class":843},[833,5240,3814],{"class":847},[833,5242,867],{"class":843},[833,5244,5245,5247,5249,5251,5253,5256],{"class":835,"line":925},[833,5246,4723],{"class":847},[833,5248,1013],{"class":843},[833,5250,1182],{"class":912},[833,5252,1185],{"class":843},[833,5254,5255],{"class":847},"--font-style--italic",[833,5257,1191],{"class":843},[833,5259,5260],{"class":835,"line":933},[833,5261,1196],{"class":843},[808,5263,5265],{"id":5264},"updating-the-default-font-style-variable","Updating the Default Font Style Variable",[751,5267,5268],{},"You can override the default font style value after creating it:",[816,5270,5271,5418],{},[819,5272,5273],{"icon":821,"label":290},[823,5274,5276],{"className":825,"code":5275,"filename":827,"language":828,"meta":829,"style":829},"import { styleframe } from 'styleframe';\nimport { useFontStyleDesignTokens } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\nconst { variable } = s;\n\nconst { fontStyle } = useFontStyleDesignTokens(s);\n\n\u002F\u002F Override the default font style\nvariable(fontStyle, 'italic');\n\nexport default s;\n",[697,5277,5278,5298,5318,5322,5336,5353,5357,5375,5379,5384,5404,5408],{"__ignoreMap":829},[833,5279,5280,5282,5284,5286,5288,5290,5292,5294,5296],{"class":835,"line":836},[833,5281,840],{"class":839},[833,5283,844],{"class":843},[833,5285,848],{"class":847},[833,5287,851],{"class":843},[833,5289,854],{"class":839},[833,5291,857],{"class":843},[833,5293,861],{"class":860},[833,5295,864],{"class":843},[833,5297,867],{"class":843},[833,5299,5300,5302,5304,5306,5308,5310,5312,5314,5316],{"class":835,"line":870},[833,5301,840],{"class":839},[833,5303,844],{"class":843},[833,5305,4556],{"class":847},[833,5307,851],{"class":843},[833,5309,854],{"class":839},[833,5311,857],{"class":843},[833,5313,886],{"class":860},[833,5315,864],{"class":843},[833,5317,867],{"class":843},[833,5319,5320],{"class":835,"line":893},[833,5321,896],{"emptyLinePlaceholder":223},[833,5323,5324,5326,5328,5330,5332,5334],{"class":835,"line":899},[833,5325,903],{"class":902},[833,5327,906],{"class":847},[833,5329,909],{"class":843},[833,5331,848],{"class":912},[833,5333,915],{"class":847},[833,5335,867],{"class":843},[833,5337,5338,5340,5342,5345,5347,5349,5351],{"class":835,"line":920},[833,5339,903],{"class":902},[833,5341,844],{"class":843},[833,5343,5344],{"class":847}," variable ",[833,5346,969],{"class":843},[833,5348,972],{"class":843},[833,5350,996],{"class":847},[833,5352,867],{"class":843},[833,5354,5355],{"class":835,"line":925},[833,5356,896],{"emptyLinePlaceholder":223},[833,5358,5359,5361,5363,5365,5367,5369,5371,5373],{"class":835,"line":933},[833,5360,903],{"class":902},[833,5362,844],{"class":843},[833,5364,5127],{"class":847},[833,5366,969],{"class":843},[833,5368,972],{"class":843},[833,5370,4556],{"class":912},[833,5372,977],{"class":847},[833,5374,867],{"class":843},[833,5376,5377],{"class":835,"line":942},[833,5378,896],{"emptyLinePlaceholder":223},[833,5380,5381],{"class":835,"line":950},[833,5382,5383],{"class":2453},"\u002F\u002F Override the default font style\n",[833,5385,5386,5389,5392,5394,5396,5398,5400,5402],{"class":835,"line":958},[833,5387,5388],{"class":912},"variable",[833,5390,5391],{"class":847},"(fontStyle",[833,5393,1031],{"class":843},[833,5395,857],{"class":843},[833,5397,4749],{"class":860},[833,5399,864],{"class":843},[833,5401,1433],{"class":847},[833,5403,867],{"class":843},[833,5405,5406],{"class":835,"line":966},[833,5407,896],{"emptyLinePlaceholder":223},[833,5409,5410,5412,5414,5416],{"class":835,"line":982},[833,5411,990],{"class":839},[833,5413,993],{"class":839},[833,5415,996],{"class":847},[833,5417,867],{"class":843},[819,5419,5420],{"icon":154,"label":326},[823,5421,5423],{"className":1003,"code":5422,"filename":1005,"language":1006,"meta":829,"style":829},":root {\n    --font-style--italic: italic;\n    --font-style--oblique: oblique;\n    --font-style--normal: normal;\n    --font-style--inherit: inherit;\n    --font-style: italic;\n}\n",[697,5424,5425,5433,5443,5453,5463,5473,5483],{"__ignoreMap":829},[833,5426,5427,5429,5431],{"class":835,"line":836},[833,5428,1013],{"class":843},[833,5430,1016],{"class":902},[833,5432,930],{"class":843},[833,5434,5435,5437,5439,5441],{"class":835,"line":870},[833,5436,4677],{"class":847},[833,5438,1013],{"class":843},[833,5440,4682],{"class":847},[833,5442,867],{"class":843},[833,5444,5445,5447,5449,5451],{"class":835,"line":893},[833,5446,4689],{"class":847},[833,5448,1013],{"class":843},[833,5450,4694],{"class":847},[833,5452,867],{"class":843},[833,5454,5455,5457,5459,5461],{"class":835,"line":899},[833,5456,4701],{"class":847},[833,5458,1013],{"class":843},[833,5460,3730],{"class":847},[833,5462,867],{"class":843},[833,5464,5465,5467,5469,5471],{"class":835,"line":920},[833,5466,4712],{"class":847},[833,5468,1013],{"class":843},[833,5470,3814],{"class":847},[833,5472,867],{"class":843},[833,5474,5475,5477,5479,5481],{"class":835,"line":925},[833,5476,4723],{"class":847},[833,5478,1013],{"class":843},[833,5480,4682],{"class":847},[833,5482,867],{"class":843},[833,5484,5485],{"class":835,"line":933},[833,5486,1196],{"class":843},[747,5488,5490],{"id":5489},"uselineheightdesigntokens",[697,5491,712],{},[751,5493,802,5494,5497],{},[697,5495,5496],{},"useLineHeightDesignTokens()"," function creates a set of line height variables for controlling vertical rhythm and text readability.",[751,5499,5500],{},"Styleframe provides carefully balanced default line height values:",[816,5502,5503,5647],{},[819,5504,5505],{"icon":821,"label":290},[823,5506,5508],{"className":825,"code":5507,"filename":827,"language":828,"meta":829,"style":829},"import { styleframe } from 'styleframe';\nimport { useLineHeightDesignTokens } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst {\n    lineHeight,\n    lineHeightTight,\n    lineHeightSnug,\n    lineHeightNormal,\n    lineHeightRelaxed,\n    lineHeightLoose,\n} = useLineHeightDesignTokens(s);\n\nexport default s;\n",[697,5509,5510,5530,5551,5555,5569,5573,5579,5586,5593,5600,5607,5614,5621,5633,5637],{"__ignoreMap":829},[833,5511,5512,5514,5516,5518,5520,5522,5524,5526,5528],{"class":835,"line":836},[833,5513,840],{"class":839},[833,5515,844],{"class":843},[833,5517,848],{"class":847},[833,5519,851],{"class":843},[833,5521,854],{"class":839},[833,5523,857],{"class":843},[833,5525,861],{"class":860},[833,5527,864],{"class":843},[833,5529,867],{"class":843},[833,5531,5532,5534,5536,5539,5541,5543,5545,5547,5549],{"class":835,"line":870},[833,5533,840],{"class":839},[833,5535,844],{"class":843},[833,5537,5538],{"class":847}," useLineHeightDesignTokens",[833,5540,851],{"class":843},[833,5542,854],{"class":839},[833,5544,857],{"class":843},[833,5546,886],{"class":860},[833,5548,864],{"class":843},[833,5550,867],{"class":843},[833,5552,5553],{"class":835,"line":893},[833,5554,896],{"emptyLinePlaceholder":223},[833,5556,5557,5559,5561,5563,5565,5567],{"class":835,"line":899},[833,5558,903],{"class":902},[833,5560,906],{"class":847},[833,5562,909],{"class":843},[833,5564,848],{"class":912},[833,5566,915],{"class":847},[833,5568,867],{"class":843},[833,5570,5571],{"class":835,"line":920},[833,5572,896],{"emptyLinePlaceholder":223},[833,5574,5575,5577],{"class":835,"line":925},[833,5576,903],{"class":902},[833,5578,930],{"class":843},[833,5580,5581,5584],{"class":835,"line":933},[833,5582,5583],{"class":847},"    lineHeight",[833,5585,939],{"class":843},[833,5587,5588,5591],{"class":835,"line":942},[833,5589,5590],{"class":847},"    lineHeightTight",[833,5592,939],{"class":843},[833,5594,5595,5598],{"class":835,"line":950},[833,5596,5597],{"class":847},"    lineHeightSnug",[833,5599,939],{"class":843},[833,5601,5602,5605],{"class":835,"line":958},[833,5603,5604],{"class":847},"    lineHeightNormal",[833,5606,939],{"class":843},[833,5608,5609,5612],{"class":835,"line":966},[833,5610,5611],{"class":847},"    lineHeightRelaxed",[833,5613,939],{"class":843},[833,5615,5616,5619],{"class":835,"line":982},[833,5617,5618],{"class":847},"    lineHeightLoose",[833,5620,939],{"class":843},[833,5622,5623,5625,5627,5629,5631],{"class":835,"line":987},[833,5624,969],{"class":843},[833,5626,972],{"class":843},[833,5628,5538],{"class":912},[833,5630,977],{"class":847},[833,5632,867],{"class":843},[833,5634,5635],{"class":835,"line":1422},[833,5636,896],{"emptyLinePlaceholder":223},[833,5638,5639,5641,5643,5645],{"class":835,"line":1438},[833,5640,990],{"class":839},[833,5642,993],{"class":839},[833,5644,996],{"class":847},[833,5646,867],{"class":843},[819,5648,5649],{"icon":154,"label":326},[823,5650,5652],{"className":1003,"code":5651,"filename":1005,"language":1006,"meta":829,"style":829},":root {\n    --line-height--tight: 1.2;\n    --line-height--snug: 1.35;\n    --line-height--normal: 1.5;\n    --line-height--relaxed: 1.65;\n    --line-height--loose: 1.9;\n    --line-height: var(--line-height--normal);\n}\n",[697,5653,5654,5662,5674,5686,5698,5710,5722,5738],{"__ignoreMap":829},[833,5655,5656,5658,5660],{"class":835,"line":836},[833,5657,1013],{"class":843},[833,5659,1016],{"class":902},[833,5661,930],{"class":843},[833,5663,5664,5667,5669,5672],{"class":835,"line":870},[833,5665,5666],{"class":847},"    --line-height--tight",[833,5668,1013],{"class":843},[833,5670,5671],{"class":2274}," 1.2",[833,5673,867],{"class":843},[833,5675,5676,5679,5681,5684],{"class":835,"line":893},[833,5677,5678],{"class":847},"    --line-height--snug",[833,5680,1013],{"class":843},[833,5682,5683],{"class":2274}," 1.35",[833,5685,867],{"class":843},[833,5687,5688,5691,5693,5696],{"class":835,"line":899},[833,5689,5690],{"class":847},"    --line-height--normal",[833,5692,1013],{"class":843},[833,5694,5695],{"class":2274}," 1.5",[833,5697,867],{"class":843},[833,5699,5700,5703,5705,5708],{"class":835,"line":920},[833,5701,5702],{"class":847},"    --line-height--relaxed",[833,5704,1013],{"class":843},[833,5706,5707],{"class":2274}," 1.65",[833,5709,867],{"class":843},[833,5711,5712,5715,5717,5720],{"class":835,"line":925},[833,5713,5714],{"class":847},"    --line-height--loose",[833,5716,1013],{"class":843},[833,5718,5719],{"class":2274}," 1.9",[833,5721,867],{"class":843},[833,5723,5724,5727,5729,5731,5733,5736],{"class":835,"line":933},[833,5725,5726],{"class":847},"    --line-height",[833,5728,1013],{"class":843},[833,5730,1182],{"class":912},[833,5732,1185],{"class":843},[833,5734,5735],{"class":847},"--line-height--normal",[833,5737,1191],{"class":843},[833,5739,5740],{"class":835,"line":942},[833,5741,1196],{"class":843},[751,5743,1199],{},[762,5745,5746,5754,5762,5769,5777,5785],{},[765,5747,5748,5753],{},[692,5749,5750],{},[697,5751,5752],{},"tight",": 1.2 - For headings and display text",[765,5755,5756,5761],{},[692,5757,5758],{},[697,5759,5760],{},"snug",": 1.35 - For compact UI text",[765,5763,5764,5768],{},[692,5765,5766],{},[697,5767,3863],{},": 1.5 - For body text (optimal readability)",[765,5770,5771,5776],{},[692,5772,5773],{},[697,5774,5775],{},"relaxed",": 1.65 - For longer reading passages",[765,5778,5779,5784],{},[692,5780,5781],{},[697,5782,5783],{},"loose",": 1.9 - For maximum spacing and accessibility",[765,5786,5787,1233,5791,1236],{},[692,5788,5789],{},[697,5790,1232],{},[697,5792,3863],{},[689,5794,5795,5797,5798,5801],{},[692,5796,4784],{}," Line height values are unitless multipliers. A line height of ",[697,5799,5800],{},"1.5"," means 1.5 times the font size, which scales proportionally as font sizes change.",[808,5803,5805],{"id":5804},"creating-custom-line-height-variables","Creating Custom Line Height Variables",[751,5807,5808],{},"Define custom line heights for specific design needs:",[816,5810,5811,5997],{},[819,5812,5813],{"icon":821,"label":290},[823,5814,5816],{"className":825,"code":5815,"filename":827,"language":828,"meta":829,"style":829},"import { styleframe } from 'styleframe';\nimport { useLineHeightDesignTokens } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst {\n    lineHeight,\n    lineHeightHeading,\n    lineHeightBody,\n    lineHeightArticle,\n} = useLineHeightDesignTokens(s, {\n    default: 1.5,\n    heading: 1.2,\n    body: 1.5,\n    article: 1.75,\n} as const);\n\nexport default s;\n",[697,5817,5818,5838,5858,5862,5876,5880,5886,5892,5899,5906,5913,5927,5937,5948,5959,5971,5983,5987],{"__ignoreMap":829},[833,5819,5820,5822,5824,5826,5828,5830,5832,5834,5836],{"class":835,"line":836},[833,5821,840],{"class":839},[833,5823,844],{"class":843},[833,5825,848],{"class":847},[833,5827,851],{"class":843},[833,5829,854],{"class":839},[833,5831,857],{"class":843},[833,5833,861],{"class":860},[833,5835,864],{"class":843},[833,5837,867],{"class":843},[833,5839,5840,5842,5844,5846,5848,5850,5852,5854,5856],{"class":835,"line":870},[833,5841,840],{"class":839},[833,5843,844],{"class":843},[833,5845,5538],{"class":847},[833,5847,851],{"class":843},[833,5849,854],{"class":839},[833,5851,857],{"class":843},[833,5853,886],{"class":860},[833,5855,864],{"class":843},[833,5857,867],{"class":843},[833,5859,5860],{"class":835,"line":893},[833,5861,896],{"emptyLinePlaceholder":223},[833,5863,5864,5866,5868,5870,5872,5874],{"class":835,"line":899},[833,5865,903],{"class":902},[833,5867,906],{"class":847},[833,5869,909],{"class":843},[833,5871,848],{"class":912},[833,5873,915],{"class":847},[833,5875,867],{"class":843},[833,5877,5878],{"class":835,"line":920},[833,5879,896],{"emptyLinePlaceholder":223},[833,5881,5882,5884],{"class":835,"line":925},[833,5883,903],{"class":902},[833,5885,930],{"class":843},[833,5887,5888,5890],{"class":835,"line":933},[833,5889,5583],{"class":847},[833,5891,939],{"class":843},[833,5893,5894,5897],{"class":835,"line":942},[833,5895,5896],{"class":847},"    lineHeightHeading",[833,5898,939],{"class":843},[833,5900,5901,5904],{"class":835,"line":950},[833,5902,5903],{"class":847},"    lineHeightBody",[833,5905,939],{"class":843},[833,5907,5908,5911],{"class":835,"line":958},[833,5909,5910],{"class":847},"    lineHeightArticle",[833,5912,939],{"class":843},[833,5914,5915,5917,5919,5921,5923,5925],{"class":835,"line":966},[833,5916,969],{"class":843},[833,5918,972],{"class":843},[833,5920,5538],{"class":912},[833,5922,1364],{"class":847},[833,5924,1031],{"class":843},[833,5926,930],{"class":843},[833,5928,5929,5931,5933,5935],{"class":835,"line":982},[833,5930,1374],{"class":1373},[833,5932,1013],{"class":843},[833,5934,5695],{"class":2274},[833,5936,939],{"class":843},[833,5938,5939,5942,5944,5946],{"class":835,"line":987},[833,5940,5941],{"class":1373},"    heading",[833,5943,1013],{"class":843},[833,5945,5671],{"class":2274},[833,5947,939],{"class":843},[833,5949,5950,5953,5955,5957],{"class":835,"line":1422},[833,5951,5952],{"class":1373},"    body",[833,5954,1013],{"class":843},[833,5956,5695],{"class":2274},[833,5958,939],{"class":843},[833,5960,5961,5964,5966,5969],{"class":835,"line":1438},[833,5962,5963],{"class":1373},"    article",[833,5965,1013],{"class":843},[833,5967,5968],{"class":2274}," 1.75",[833,5970,939],{"class":843},[833,5972,5973,5975,5977,5979,5981],{"class":835,"line":1443},[833,5974,969],{"class":843},[833,5976,1427],{"class":839},[833,5978,1430],{"class":902},[833,5980,1433],{"class":847},[833,5982,867],{"class":843},[833,5984,5985],{"class":835,"line":1780},[833,5986,896],{"emptyLinePlaceholder":223},[833,5988,5989,5991,5993,5995],{"class":835,"line":2189},[833,5990,990],{"class":839},[833,5992,993],{"class":839},[833,5994,996],{"class":847},[833,5996,867],{"class":843},[819,5998,5999],{"icon":154,"label":326},[823,6000,6002],{"className":1003,"code":6001,"filename":1005,"language":1006,"meta":829,"style":829},":root {\n    --line-height: 1.5;\n    --line-height--heading: 1.2;\n    --line-height--body: 1.5;\n    --line-height--article: 1.75;\n}\n",[697,6003,6004,6012,6022,6033,6044,6055],{"__ignoreMap":829},[833,6005,6006,6008,6010],{"class":835,"line":836},[833,6007,1013],{"class":843},[833,6009,1016],{"class":902},[833,6011,930],{"class":843},[833,6013,6014,6016,6018,6020],{"class":835,"line":870},[833,6015,5726],{"class":847},[833,6017,1013],{"class":843},[833,6019,5695],{"class":2274},[833,6021,867],{"class":843},[833,6023,6024,6027,6029,6031],{"class":835,"line":893},[833,6025,6026],{"class":847},"    --line-height--heading",[833,6028,1013],{"class":843},[833,6030,5671],{"class":2274},[833,6032,867],{"class":843},[833,6034,6035,6038,6040,6042],{"class":835,"line":899},[833,6036,6037],{"class":847},"    --line-height--body",[833,6039,1013],{"class":843},[833,6041,5695],{"class":2274},[833,6043,867],{"class":843},[833,6045,6046,6049,6051,6053],{"class":835,"line":920},[833,6047,6048],{"class":847},"    --line-height--article",[833,6050,1013],{"class":843},[833,6052,5968],{"class":2274},[833,6054,867],{"class":843},[833,6056,6057],{"class":835,"line":925},[833,6058,1196],{"class":843},[808,6060,6062],{"id":6061},"updating-the-default-line-height-variable","Updating the Default Line Height Variable",[751,6064,6065],{},"You can override the default line height value after creating it:",[816,6067,6068,6210],{},[819,6069,6070],{"icon":821,"label":290},[823,6071,6073],{"className":825,"code":6072,"filename":827,"language":828,"meta":829,"style":829},"import { styleframe } from 'styleframe';\nimport { useLineHeightDesignTokens } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\nconst { variable } = s;\n\nconst { lineHeight } = useLineHeightDesignTokens(s);\n\n\u002F\u002F Override the default line height\nvariable(lineHeight, 1.65);\n\nexport default s;\n",[697,6074,6075,6095,6115,6119,6133,6149,6153,6172,6176,6181,6196,6200],{"__ignoreMap":829},[833,6076,6077,6079,6081,6083,6085,6087,6089,6091,6093],{"class":835,"line":836},[833,6078,840],{"class":839},[833,6080,844],{"class":843},[833,6082,848],{"class":847},[833,6084,851],{"class":843},[833,6086,854],{"class":839},[833,6088,857],{"class":843},[833,6090,861],{"class":860},[833,6092,864],{"class":843},[833,6094,867],{"class":843},[833,6096,6097,6099,6101,6103,6105,6107,6109,6111,6113],{"class":835,"line":870},[833,6098,840],{"class":839},[833,6100,844],{"class":843},[833,6102,5538],{"class":847},[833,6104,851],{"class":843},[833,6106,854],{"class":839},[833,6108,857],{"class":843},[833,6110,886],{"class":860},[833,6112,864],{"class":843},[833,6114,867],{"class":843},[833,6116,6117],{"class":835,"line":893},[833,6118,896],{"emptyLinePlaceholder":223},[833,6120,6121,6123,6125,6127,6129,6131],{"class":835,"line":899},[833,6122,903],{"class":902},[833,6124,906],{"class":847},[833,6126,909],{"class":843},[833,6128,848],{"class":912},[833,6130,915],{"class":847},[833,6132,867],{"class":843},[833,6134,6135,6137,6139,6141,6143,6145,6147],{"class":835,"line":920},[833,6136,903],{"class":902},[833,6138,844],{"class":843},[833,6140,5344],{"class":847},[833,6142,969],{"class":843},[833,6144,972],{"class":843},[833,6146,996],{"class":847},[833,6148,867],{"class":843},[833,6150,6151],{"class":835,"line":925},[833,6152,896],{"emptyLinePlaceholder":223},[833,6154,6155,6157,6159,6162,6164,6166,6168,6170],{"class":835,"line":933},[833,6156,903],{"class":902},[833,6158,844],{"class":843},[833,6160,6161],{"class":847}," lineHeight ",[833,6163,969],{"class":843},[833,6165,972],{"class":843},[833,6167,5538],{"class":912},[833,6169,977],{"class":847},[833,6171,867],{"class":843},[833,6173,6174],{"class":835,"line":942},[833,6175,896],{"emptyLinePlaceholder":223},[833,6177,6178],{"class":835,"line":950},[833,6179,6180],{"class":2453},"\u002F\u002F Override the default line height\n",[833,6182,6183,6185,6188,6190,6192,6194],{"class":835,"line":958},[833,6184,5388],{"class":912},[833,6186,6187],{"class":847},"(lineHeight",[833,6189,1031],{"class":843},[833,6191,5707],{"class":2274},[833,6193,1433],{"class":847},[833,6195,867],{"class":843},[833,6197,6198],{"class":835,"line":966},[833,6199,896],{"emptyLinePlaceholder":223},[833,6201,6202,6204,6206,6208],{"class":835,"line":982},[833,6203,990],{"class":839},[833,6205,993],{"class":839},[833,6207,996],{"class":847},[833,6209,867],{"class":843},[819,6211,6212],{"icon":154,"label":326},[823,6213,6215],{"className":1003,"code":6214,"filename":1005,"language":1006,"meta":829,"style":829},":root {\n    --line-height--tight: 1.2;\n    --line-height--snug: 1.35;\n    --line-height--normal: 1.5;\n    --line-height--relaxed: 1.65;\n    --line-height--loose: 1.9;\n    --line-height: 1.65;\n}\n",[697,6216,6217,6225,6235,6245,6255,6265,6275,6285],{"__ignoreMap":829},[833,6218,6219,6221,6223],{"class":835,"line":836},[833,6220,1013],{"class":843},[833,6222,1016],{"class":902},[833,6224,930],{"class":843},[833,6226,6227,6229,6231,6233],{"class":835,"line":870},[833,6228,5666],{"class":847},[833,6230,1013],{"class":843},[833,6232,5671],{"class":2274},[833,6234,867],{"class":843},[833,6236,6237,6239,6241,6243],{"class":835,"line":893},[833,6238,5678],{"class":847},[833,6240,1013],{"class":843},[833,6242,5683],{"class":2274},[833,6244,867],{"class":843},[833,6246,6247,6249,6251,6253],{"class":835,"line":899},[833,6248,5690],{"class":847},[833,6250,1013],{"class":843},[833,6252,5695],{"class":2274},[833,6254,867],{"class":843},[833,6256,6257,6259,6261,6263],{"class":835,"line":920},[833,6258,5702],{"class":847},[833,6260,1013],{"class":843},[833,6262,5707],{"class":2274},[833,6264,867],{"class":843},[833,6266,6267,6269,6271,6273],{"class":835,"line":925},[833,6268,5714],{"class":847},[833,6270,1013],{"class":843},[833,6272,5719],{"class":2274},[833,6274,867],{"class":843},[833,6276,6277,6279,6281,6283],{"class":835,"line":933},[833,6278,5726],{"class":847},[833,6280,1013],{"class":843},[833,6282,5707],{"class":2274},[833,6284,867],{"class":843},[833,6286,6287],{"class":835,"line":942},[833,6288,1196],{"class":843},[747,6290,6292],{"id":6291},"useletterspacingdesigntokens",[697,6293,716],{},[751,6295,802,6296,6299],{},[697,6297,6298],{},"useLetterSpacingDesignTokens()"," function creates a set of letter spacing (tracking) variables for fine-tuning text appearance.",[751,6301,6302],{},"Styleframe provides balanced default letter spacing values:",[816,6304,6305,6449],{},[819,6306,6307],{"icon":821,"label":290},[823,6308,6310],{"className":825,"code":6309,"filename":827,"language":828,"meta":829,"style":829},"import { styleframe } from 'styleframe';\nimport { useLetterSpacingDesignTokens } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst {\n    letterSpacing,\n    letterSpacingTighter,\n    letterSpacingTight,\n    letterSpacingNormal,\n    letterSpacingWide,\n    letterSpacingWider,\n} = useLetterSpacingDesignTokens(s);\n\nexport default s;\n",[697,6311,6312,6332,6353,6357,6371,6375,6381,6388,6395,6402,6409,6416,6423,6435,6439],{"__ignoreMap":829},[833,6313,6314,6316,6318,6320,6322,6324,6326,6328,6330],{"class":835,"line":836},[833,6315,840],{"class":839},[833,6317,844],{"class":843},[833,6319,848],{"class":847},[833,6321,851],{"class":843},[833,6323,854],{"class":839},[833,6325,857],{"class":843},[833,6327,861],{"class":860},[833,6329,864],{"class":843},[833,6331,867],{"class":843},[833,6333,6334,6336,6338,6341,6343,6345,6347,6349,6351],{"class":835,"line":870},[833,6335,840],{"class":839},[833,6337,844],{"class":843},[833,6339,6340],{"class":847}," useLetterSpacingDesignTokens",[833,6342,851],{"class":843},[833,6344,854],{"class":839},[833,6346,857],{"class":843},[833,6348,886],{"class":860},[833,6350,864],{"class":843},[833,6352,867],{"class":843},[833,6354,6355],{"class":835,"line":893},[833,6356,896],{"emptyLinePlaceholder":223},[833,6358,6359,6361,6363,6365,6367,6369],{"class":835,"line":899},[833,6360,903],{"class":902},[833,6362,906],{"class":847},[833,6364,909],{"class":843},[833,6366,848],{"class":912},[833,6368,915],{"class":847},[833,6370,867],{"class":843},[833,6372,6373],{"class":835,"line":920},[833,6374,896],{"emptyLinePlaceholder":223},[833,6376,6377,6379],{"class":835,"line":925},[833,6378,903],{"class":902},[833,6380,930],{"class":843},[833,6382,6383,6386],{"class":835,"line":933},[833,6384,6385],{"class":847},"    letterSpacing",[833,6387,939],{"class":843},[833,6389,6390,6393],{"class":835,"line":942},[833,6391,6392],{"class":847},"    letterSpacingTighter",[833,6394,939],{"class":843},[833,6396,6397,6400],{"class":835,"line":950},[833,6398,6399],{"class":847},"    letterSpacingTight",[833,6401,939],{"class":843},[833,6403,6404,6407],{"class":835,"line":958},[833,6405,6406],{"class":847},"    letterSpacingNormal",[833,6408,939],{"class":843},[833,6410,6411,6414],{"class":835,"line":966},[833,6412,6413],{"class":847},"    letterSpacingWide",[833,6415,939],{"class":843},[833,6417,6418,6421],{"class":835,"line":982},[833,6419,6420],{"class":847},"    letterSpacingWider",[833,6422,939],{"class":843},[833,6424,6425,6427,6429,6431,6433],{"class":835,"line":987},[833,6426,969],{"class":843},[833,6428,972],{"class":843},[833,6430,6340],{"class":912},[833,6432,977],{"class":847},[833,6434,867],{"class":843},[833,6436,6437],{"class":835,"line":1422},[833,6438,896],{"emptyLinePlaceholder":223},[833,6440,6441,6443,6445,6447],{"class":835,"line":1438},[833,6442,990],{"class":839},[833,6444,993],{"class":839},[833,6446,996],{"class":847},[833,6448,867],{"class":843},[819,6450,6451],{"icon":154,"label":326},[823,6452,6454],{"className":1003,"code":6453,"filename":1005,"language":1006,"meta":829,"style":829},":root {\n    --letter-spacing--tighter: -0.05em;\n    --letter-spacing--tight: -0.025em;\n    --letter-spacing--normal: normal;\n    --letter-spacing--wide: 0.05em;\n    --letter-spacing--wider: 0.1em;\n    --letter-spacing: var(--letter-spacing--normal);\n}\n",[697,6455,6456,6464,6476,6488,6499,6511,6523,6539],{"__ignoreMap":829},[833,6457,6458,6460,6462],{"class":835,"line":836},[833,6459,1013],{"class":843},[833,6461,1016],{"class":902},[833,6463,930],{"class":843},[833,6465,6466,6469,6471,6474],{"class":835,"line":870},[833,6467,6468],{"class":847},"    --letter-spacing--tighter",[833,6470,1013],{"class":843},[833,6472,6473],{"class":2274}," -0.05em",[833,6475,867],{"class":843},[833,6477,6478,6481,6483,6486],{"class":835,"line":893},[833,6479,6480],{"class":847},"    --letter-spacing--tight",[833,6482,1013],{"class":843},[833,6484,6485],{"class":2274}," -0.025em",[833,6487,867],{"class":843},[833,6489,6490,6493,6495,6497],{"class":835,"line":899},[833,6491,6492],{"class":847},"    --letter-spacing--normal",[833,6494,1013],{"class":843},[833,6496,3730],{"class":847},[833,6498,867],{"class":843},[833,6500,6501,6504,6506,6509],{"class":835,"line":920},[833,6502,6503],{"class":847},"    --letter-spacing--wide",[833,6505,1013],{"class":843},[833,6507,6508],{"class":2274}," 0.05em",[833,6510,867],{"class":843},[833,6512,6513,6516,6518,6521],{"class":835,"line":925},[833,6514,6515],{"class":847},"    --letter-spacing--wider",[833,6517,1013],{"class":843},[833,6519,6520],{"class":2274}," 0.1em",[833,6522,867],{"class":843},[833,6524,6525,6528,6530,6532,6534,6537],{"class":835,"line":933},[833,6526,6527],{"class":847},"    --letter-spacing",[833,6529,1013],{"class":843},[833,6531,1182],{"class":912},[833,6533,1185],{"class":843},[833,6535,6536],{"class":847},"--letter-spacing--normal",[833,6538,1191],{"class":843},[833,6540,6541],{"class":835,"line":942},[833,6542,1196],{"class":843},[751,6544,1199],{},[762,6546,6547,6555,6562,6571,6579,6587],{},[765,6548,6549,6554],{},[692,6550,6551],{},[697,6552,6553],{},"tighter",": -0.05em - Very tight spacing for large display text",[765,6556,6557,6561],{},[692,6558,6559],{},[697,6560,5752],{},": -0.025em - Tight spacing for headings",[765,6563,6564,3864,6568,6570],{},[692,6565,6566],{},[697,6567,3863],{},[697,6569,3863],{}," keyword - Default browser spacing",[765,6572,6573,6578],{},[692,6574,6575],{},[697,6576,6577],{},"wide",": 0.05em - Loose spacing for small text or all-caps",[765,6580,6581,6586],{},[692,6582,6583],{},[697,6584,6585],{},"wider",": 0.1em - Very loose spacing for labels and UI text",[765,6588,6589,1233,6593,1236],{},[692,6590,6591],{},[697,6592,1232],{},[697,6594,3863],{},[689,6596,6597,6599,6600,6603],{},[692,6598,4784],{}," Letter spacing uses ",[697,6601,6602],{},"em"," units so it scales proportionally with font size. Negative values tighten spacing, positive values loosen it.",[808,6605,6607],{"id":6606},"creating-custom-letter-spacing-variables","Creating Custom Letter Spacing Variables",[751,6609,6610],{},"Define custom letter spacing for specific typography styles:",[816,6612,6613,6814],{},[819,6614,6615],{"icon":821,"label":290},[823,6616,6618],{"className":825,"code":6617,"filename":827,"language":828,"meta":829,"style":829},"import { styleframe } from 'styleframe';\nimport { useLetterSpacingDesignTokens } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst {\n    letterSpacing,\n    letterSpacingHeading,\n    letterSpacingBody,\n    letterSpacingLabel,\n} = useLetterSpacingDesignTokens(s, {\n    default: 'normal',\n    heading: '-0.02em',\n    body: 'normal',\n    label: '0.08em',\n} as const);\n\nexport default s;\n",[697,6619,6620,6640,6660,6664,6678,6682,6688,6694,6701,6708,6715,6729,6743,6758,6772,6788,6800,6804],{"__ignoreMap":829},[833,6621,6622,6624,6626,6628,6630,6632,6634,6636,6638],{"class":835,"line":836},[833,6623,840],{"class":839},[833,6625,844],{"class":843},[833,6627,848],{"class":847},[833,6629,851],{"class":843},[833,6631,854],{"class":839},[833,6633,857],{"class":843},[833,6635,861],{"class":860},[833,6637,864],{"class":843},[833,6639,867],{"class":843},[833,6641,6642,6644,6646,6648,6650,6652,6654,6656,6658],{"class":835,"line":870},[833,6643,840],{"class":839},[833,6645,844],{"class":843},[833,6647,6340],{"class":847},[833,6649,851],{"class":843},[833,6651,854],{"class":839},[833,6653,857],{"class":843},[833,6655,886],{"class":860},[833,6657,864],{"class":843},[833,6659,867],{"class":843},[833,6661,6662],{"class":835,"line":893},[833,6663,896],{"emptyLinePlaceholder":223},[833,6665,6666,6668,6670,6672,6674,6676],{"class":835,"line":899},[833,6667,903],{"class":902},[833,6669,906],{"class":847},[833,6671,909],{"class":843},[833,6673,848],{"class":912},[833,6675,915],{"class":847},[833,6677,867],{"class":843},[833,6679,6680],{"class":835,"line":920},[833,6681,896],{"emptyLinePlaceholder":223},[833,6683,6684,6686],{"class":835,"line":925},[833,6685,903],{"class":902},[833,6687,930],{"class":843},[833,6689,6690,6692],{"class":835,"line":933},[833,6691,6385],{"class":847},[833,6693,939],{"class":843},[833,6695,6696,6699],{"class":835,"line":942},[833,6697,6698],{"class":847},"    letterSpacingHeading",[833,6700,939],{"class":843},[833,6702,6703,6706],{"class":835,"line":950},[833,6704,6705],{"class":847},"    letterSpacingBody",[833,6707,939],{"class":843},[833,6709,6710,6713],{"class":835,"line":958},[833,6711,6712],{"class":847},"    letterSpacingLabel",[833,6714,939],{"class":843},[833,6716,6717,6719,6721,6723,6725,6727],{"class":835,"line":966},[833,6718,969],{"class":843},[833,6720,972],{"class":843},[833,6722,6340],{"class":912},[833,6724,1364],{"class":847},[833,6726,1031],{"class":843},[833,6728,930],{"class":843},[833,6730,6731,6733,6735,6737,6739,6741],{"class":835,"line":982},[833,6732,1374],{"class":1373},[833,6734,1013],{"class":843},[833,6736,857],{"class":843},[833,6738,3863],{"class":860},[833,6740,864],{"class":843},[833,6742,939],{"class":843},[833,6744,6745,6747,6749,6751,6754,6756],{"class":835,"line":987},[833,6746,5941],{"class":1373},[833,6748,1013],{"class":843},[833,6750,857],{"class":843},[833,6752,6753],{"class":860},"-0.02em",[833,6755,864],{"class":843},[833,6757,939],{"class":843},[833,6759,6760,6762,6764,6766,6768,6770],{"class":835,"line":1422},[833,6761,5952],{"class":1373},[833,6763,1013],{"class":843},[833,6765,857],{"class":843},[833,6767,3863],{"class":860},[833,6769,864],{"class":843},[833,6771,939],{"class":843},[833,6773,6774,6777,6779,6781,6784,6786],{"class":835,"line":1438},[833,6775,6776],{"class":1373},"    label",[833,6778,1013],{"class":843},[833,6780,857],{"class":843},[833,6782,6783],{"class":860},"0.08em",[833,6785,864],{"class":843},[833,6787,939],{"class":843},[833,6789,6790,6792,6794,6796,6798],{"class":835,"line":1443},[833,6791,969],{"class":843},[833,6793,1427],{"class":839},[833,6795,1430],{"class":902},[833,6797,1433],{"class":847},[833,6799,867],{"class":843},[833,6801,6802],{"class":835,"line":1780},[833,6803,896],{"emptyLinePlaceholder":223},[833,6805,6806,6808,6810,6812],{"class":835,"line":2189},[833,6807,990],{"class":839},[833,6809,993],{"class":839},[833,6811,996],{"class":847},[833,6813,867],{"class":843},[819,6815,6816],{"icon":154,"label":326},[823,6817,6819],{"className":1003,"code":6818,"filename":1005,"language":1006,"meta":829,"style":829},":root {\n    --letter-spacing: normal;\n    --letter-spacing--heading: -0.02em;\n    --letter-spacing--body: normal;\n    --letter-spacing--label: 0.08em;\n}\n",[697,6820,6821,6829,6839,6851,6862,6874],{"__ignoreMap":829},[833,6822,6823,6825,6827],{"class":835,"line":836},[833,6824,1013],{"class":843},[833,6826,1016],{"class":902},[833,6828,930],{"class":843},[833,6830,6831,6833,6835,6837],{"class":835,"line":870},[833,6832,6527],{"class":847},[833,6834,1013],{"class":843},[833,6836,3730],{"class":847},[833,6838,867],{"class":843},[833,6840,6841,6844,6846,6849],{"class":835,"line":893},[833,6842,6843],{"class":847},"    --letter-spacing--heading",[833,6845,1013],{"class":843},[833,6847,6848],{"class":2274}," -0.02em",[833,6850,867],{"class":843},[833,6852,6853,6856,6858,6860],{"class":835,"line":899},[833,6854,6855],{"class":847},"    --letter-spacing--body",[833,6857,1013],{"class":843},[833,6859,3730],{"class":847},[833,6861,867],{"class":843},[833,6863,6864,6867,6869,6872],{"class":835,"line":920},[833,6865,6866],{"class":847},"    --letter-spacing--label",[833,6868,1013],{"class":843},[833,6870,6871],{"class":2274}," 0.08em",[833,6873,867],{"class":843},[833,6875,6876],{"class":835,"line":925},[833,6877,1196],{"class":843},[808,6879,6881],{"id":6880},"extending-the-default-letter-spacing-values","Extending the Default Letter Spacing Values",[751,6883,5042],{},[816,6885,6886,7074],{},[819,6887,6888],{"icon":821,"label":290},[823,6889,6891],{"className":825,"code":6890,"filename":827,"language":828,"meta":829,"style":829},"import { styleframe } from 'styleframe';\nimport { useLetterSpacingDesignTokens, defaultLetterSpacingValues } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst {\n    letterSpacing,\n    letterSpacingTighter,\n    letterSpacingTight,\n    letterSpacingNormal,\n    letterSpacingWide,\n    letterSpacingWider,\n    letterSpacingWidest,\n} = useLetterSpacingDesignTokens(s, {\n    ...defaultLetterSpacingValues,\n    widest: '0.15em',\n} as const);\n\nexport default s;\n",[697,6892,6893,6913,6938,6942,6956,6960,6966,6972,6978,6984,6990,6996,7002,7009,7023,7032,7048,7060,7064],{"__ignoreMap":829},[833,6894,6895,6897,6899,6901,6903,6905,6907,6909,6911],{"class":835,"line":836},[833,6896,840],{"class":839},[833,6898,844],{"class":843},[833,6900,848],{"class":847},[833,6902,851],{"class":843},[833,6904,854],{"class":839},[833,6906,857],{"class":843},[833,6908,861],{"class":860},[833,6910,864],{"class":843},[833,6912,867],{"class":843},[833,6914,6915,6917,6919,6921,6923,6926,6928,6930,6932,6934,6936],{"class":835,"line":870},[833,6916,840],{"class":839},[833,6918,844],{"class":843},[833,6920,6340],{"class":847},[833,6922,1031],{"class":843},[833,6924,6925],{"class":847}," defaultLetterSpacingValues",[833,6927,851],{"class":843},[833,6929,854],{"class":839},[833,6931,857],{"class":843},[833,6933,886],{"class":860},[833,6935,864],{"class":843},[833,6937,867],{"class":843},[833,6939,6940],{"class":835,"line":893},[833,6941,896],{"emptyLinePlaceholder":223},[833,6943,6944,6946,6948,6950,6952,6954],{"class":835,"line":899},[833,6945,903],{"class":902},[833,6947,906],{"class":847},[833,6949,909],{"class":843},[833,6951,848],{"class":912},[833,6953,915],{"class":847},[833,6955,867],{"class":843},[833,6957,6958],{"class":835,"line":920},[833,6959,896],{"emptyLinePlaceholder":223},[833,6961,6962,6964],{"class":835,"line":925},[833,6963,903],{"class":902},[833,6965,930],{"class":843},[833,6967,6968,6970],{"class":835,"line":933},[833,6969,6385],{"class":847},[833,6971,939],{"class":843},[833,6973,6974,6976],{"class":835,"line":942},[833,6975,6392],{"class":847},[833,6977,939],{"class":843},[833,6979,6980,6982],{"class":835,"line":950},[833,6981,6399],{"class":847},[833,6983,939],{"class":843},[833,6985,6986,6988],{"class":835,"line":958},[833,6987,6406],{"class":847},[833,6989,939],{"class":843},[833,6991,6992,6994],{"class":835,"line":966},[833,6993,6413],{"class":847},[833,6995,939],{"class":843},[833,6997,6998,7000],{"class":835,"line":982},[833,6999,6420],{"class":847},[833,7001,939],{"class":843},[833,7003,7004,7007],{"class":835,"line":987},[833,7005,7006],{"class":847},"    letterSpacingWidest",[833,7008,939],{"class":843},[833,7010,7011,7013,7015,7017,7019,7021],{"class":835,"line":1422},[833,7012,969],{"class":843},[833,7014,972],{"class":843},[833,7016,6340],{"class":912},[833,7018,1364],{"class":847},[833,7020,1031],{"class":843},[833,7022,930],{"class":843},[833,7024,7025,7027,7030],{"class":835,"line":1438},[833,7026,1740],{"class":843},[833,7028,7029],{"class":847},"defaultLetterSpacingValues",[833,7031,939],{"class":843},[833,7033,7034,7037,7039,7041,7044,7046],{"class":835,"line":1443},[833,7035,7036],{"class":1373},"    widest",[833,7038,1013],{"class":843},[833,7040,857],{"class":843},[833,7042,7043],{"class":860},"0.15em",[833,7045,864],{"class":843},[833,7047,939],{"class":843},[833,7049,7050,7052,7054,7056,7058],{"class":835,"line":1780},[833,7051,969],{"class":843},[833,7053,1427],{"class":839},[833,7055,1430],{"class":902},[833,7057,1433],{"class":847},[833,7059,867],{"class":843},[833,7061,7062],{"class":835,"line":2189},[833,7063,896],{"emptyLinePlaceholder":223},[833,7065,7066,7068,7070,7072],{"class":835,"line":2206},[833,7067,990],{"class":839},[833,7069,993],{"class":839},[833,7071,996],{"class":847},[833,7073,867],{"class":843},[819,7075,7076],{"icon":154,"label":326},[823,7077,7079],{"className":1003,"code":7078,"filename":1005,"language":1006,"meta":829,"style":829},":root {\n    --letter-spacing--tighter: -0.05em;\n    --letter-spacing--tight: -0.025em;\n    --letter-spacing--normal: normal;\n    --letter-spacing--wide: 0.05em;\n    --letter-spacing--wider: 0.1em;\n    --letter-spacing--widest: 0.15em;\n    --letter-spacing: var(--letter-spacing--normal);\n}\n",[697,7080,7081,7089,7099,7109,7119,7129,7139,7151,7165],{"__ignoreMap":829},[833,7082,7083,7085,7087],{"class":835,"line":836},[833,7084,1013],{"class":843},[833,7086,1016],{"class":902},[833,7088,930],{"class":843},[833,7090,7091,7093,7095,7097],{"class":835,"line":870},[833,7092,6468],{"class":847},[833,7094,1013],{"class":843},[833,7096,6473],{"class":2274},[833,7098,867],{"class":843},[833,7100,7101,7103,7105,7107],{"class":835,"line":893},[833,7102,6480],{"class":847},[833,7104,1013],{"class":843},[833,7106,6485],{"class":2274},[833,7108,867],{"class":843},[833,7110,7111,7113,7115,7117],{"class":835,"line":899},[833,7112,6492],{"class":847},[833,7114,1013],{"class":843},[833,7116,3730],{"class":847},[833,7118,867],{"class":843},[833,7120,7121,7123,7125,7127],{"class":835,"line":920},[833,7122,6503],{"class":847},[833,7124,1013],{"class":843},[833,7126,6508],{"class":2274},[833,7128,867],{"class":843},[833,7130,7131,7133,7135,7137],{"class":835,"line":925},[833,7132,6515],{"class":847},[833,7134,1013],{"class":843},[833,7136,6520],{"class":2274},[833,7138,867],{"class":843},[833,7140,7141,7144,7146,7149],{"class":835,"line":933},[833,7142,7143],{"class":847},"    --letter-spacing--widest",[833,7145,1013],{"class":843},[833,7147,7148],{"class":2274}," 0.15em",[833,7150,867],{"class":843},[833,7152,7153,7155,7157,7159,7161,7163],{"class":835,"line":942},[833,7154,6527],{"class":847},[833,7156,1013],{"class":843},[833,7158,1182],{"class":912},[833,7160,1185],{"class":843},[833,7162,6536],{"class":847},[833,7164,1191],{"class":843},[833,7166,7167],{"class":835,"line":950},[833,7168,1196],{"class":843},[747,7170,7172],{"id":7171},"using-typography-variables","Using Typography Variables",[751,7174,7175],{},"Once created, typography variables can be combined to create complete text styles:",[816,7177,7178,7834],{},[819,7179,7180],{"icon":821,"label":290},[823,7181,7183],{"className":825,"code":7182,"filename":827,"language":828,"meta":829,"style":829},"import { styleframe } from 'styleframe';\nimport { useFontFamilyDesignTokens, useFontSizeDesignTokens, useFontWeightDesignTokens, useLineHeightDesignTokens, useLetterSpacingDesignTokens } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\nconst { ref, selector } = s;\n\n\u002F\u002F Define typography variables\nconst { fontFamily, fontFamilyMono } = useFontFamilyDesignTokens(s);\nconst { fontSizeXl, fontSize2xl, fontSize3xl } = useFontSizeDesignTokens(s, {\n    xl: '1.25rem',\n    '2xl': '1.5rem',\n    '3xl': '2rem',\n} as const);\nconst { fontWeightNormal, fontWeightSemibold, fontWeightBold } = useFontWeightDesignTokens(s);\nconst { fontStyleNormal, fontStyleItalic } = useFontStyleDesignTokens(s);\nconst { lineHeightTight, lineHeightNormal } = useLineHeightDesignTokens(s);\nconst { letterSpacingTight, letterSpacingWide } = useLetterSpacingDesignTokens(s);\n\n\u002F\u002F Apply to elements\nselector('h1', {\n    fontFamily: ref(fontFamily),\n    fontSize: ref(fontSize3xl),\n    fontWeight: ref(fontWeightBold),\n    fontStyle: ref(fontStyleNormal),\n    lineHeight: ref(lineHeightTight),\n    letterSpacing: ref(letterSpacingTight),\n});\n\nselector('body', {\n    fontFamily: ref(fontFamily),\n    fontWeight: ref(fontWeightNormal),\n    fontStyle: ref(fontStyleNormal),\n    lineHeight: ref(lineHeightNormal),\n});\n\nselector('em, i', {\n    fontStyle: ref(fontStyleItalic),\n});\n\nselector('code', {\n    fontFamily: ref(fontFamilyMono),\n    fontSize: ref(fontSizeXl),\n    letterSpacing: ref(letterSpacingWide),\n});\n\nexport default s;\n",[697,7184,7185,7205,7241,7245,7259,7281,7285,7290,7314,7345,7359,7377,7396,7408,7437,7461,7485,7509,7513,7518,7536,7549,7562,7575,7588,7601,7614,7622,7626,7643,7655,7668,7680,7693,7701,7705,7722,7736,7745,7750,7767,7781,7795,7809,7818,7823],{"__ignoreMap":829},[833,7186,7187,7189,7191,7193,7195,7197,7199,7201,7203],{"class":835,"line":836},[833,7188,840],{"class":839},[833,7190,844],{"class":843},[833,7192,848],{"class":847},[833,7194,851],{"class":843},[833,7196,854],{"class":839},[833,7198,857],{"class":843},[833,7200,861],{"class":860},[833,7202,864],{"class":843},[833,7204,867],{"class":843},[833,7206,7207,7209,7211,7213,7215,7217,7219,7221,7223,7225,7227,7229,7231,7233,7235,7237,7239],{"class":835,"line":870},[833,7208,840],{"class":839},[833,7210,844],{"class":843},[833,7212,877],{"class":847},[833,7214,1031],{"class":843},[833,7216,2028],{"class":847},[833,7218,1031],{"class":843},[833,7220,3538],{"class":847},[833,7222,1031],{"class":843},[833,7224,5538],{"class":847},[833,7226,1031],{"class":843},[833,7228,6340],{"class":847},[833,7230,851],{"class":843},[833,7232,854],{"class":839},[833,7234,857],{"class":843},[833,7236,886],{"class":860},[833,7238,864],{"class":843},[833,7240,867],{"class":843},[833,7242,7243],{"class":835,"line":893},[833,7244,896],{"emptyLinePlaceholder":223},[833,7246,7247,7249,7251,7253,7255,7257],{"class":835,"line":899},[833,7248,903],{"class":902},[833,7250,906],{"class":847},[833,7252,909],{"class":843},[833,7254,848],{"class":912},[833,7256,915],{"class":847},[833,7258,867],{"class":843},[833,7260,7261,7263,7265,7268,7270,7273,7275,7277,7279],{"class":835,"line":920},[833,7262,903],{"class":902},[833,7264,844],{"class":843},[833,7266,7267],{"class":847}," ref",[833,7269,1031],{"class":843},[833,7271,7272],{"class":847}," selector ",[833,7274,969],{"class":843},[833,7276,972],{"class":843},[833,7278,996],{"class":847},[833,7280,867],{"class":843},[833,7282,7283],{"class":835,"line":925},[833,7284,896],{"emptyLinePlaceholder":223},[833,7286,7287],{"class":835,"line":933},[833,7288,7289],{"class":2453},"\u002F\u002F Define typography variables\n",[833,7291,7292,7294,7296,7299,7301,7304,7306,7308,7310,7312],{"class":835,"line":942},[833,7293,903],{"class":902},[833,7295,844],{"class":843},[833,7297,7298],{"class":847}," fontFamily",[833,7300,1031],{"class":843},[833,7302,7303],{"class":847}," fontFamilyMono ",[833,7305,969],{"class":843},[833,7307,972],{"class":843},[833,7309,877],{"class":912},[833,7311,977],{"class":847},[833,7313,867],{"class":843},[833,7315,7316,7318,7320,7323,7325,7328,7330,7333,7335,7337,7339,7341,7343],{"class":835,"line":950},[833,7317,903],{"class":902},[833,7319,844],{"class":843},[833,7321,7322],{"class":847}," fontSizeXl",[833,7324,1031],{"class":843},[833,7326,7327],{"class":847}," fontSize2xl",[833,7329,1031],{"class":843},[833,7331,7332],{"class":847}," fontSize3xl ",[833,7334,969],{"class":843},[833,7336,972],{"class":843},[833,7338,2028],{"class":912},[833,7340,1364],{"class":847},[833,7342,1031],{"class":843},[833,7344,930],{"class":843},[833,7346,7347,7349,7351,7353,7355,7357],{"class":835,"line":958},[833,7348,2209],{"class":1373},[833,7350,1013],{"class":843},[833,7352,857],{"class":843},[833,7354,2199],{"class":860},[833,7356,864],{"class":843},[833,7358,939],{"class":843},[833,7360,7361,7363,7365,7367,7369,7371,7373,7375],{"class":835,"line":966},[833,7362,2818],{"class":843},[833,7364,2821],{"class":1373},[833,7366,864],{"class":843},[833,7368,1013],{"class":843},[833,7370,857],{"class":843},[833,7372,2216],{"class":860},[833,7374,864],{"class":843},[833,7376,939],{"class":843},[833,7378,7379,7381,7383,7385,7387,7389,7392,7394],{"class":835,"line":982},[833,7380,2818],{"class":843},[833,7382,2845],{"class":1373},[833,7384,864],{"class":843},[833,7386,1013],{"class":843},[833,7388,857],{"class":843},[833,7390,7391],{"class":860},"2rem",[833,7393,864],{"class":843},[833,7395,939],{"class":843},[833,7397,7398,7400,7402,7404,7406],{"class":835,"line":987},[833,7399,969],{"class":843},[833,7401,1427],{"class":839},[833,7403,1430],{"class":902},[833,7405,1433],{"class":847},[833,7407,867],{"class":843},[833,7409,7410,7412,7414,7417,7419,7422,7424,7427,7429,7431,7433,7435],{"class":835,"line":1422},[833,7411,903],{"class":902},[833,7413,844],{"class":843},[833,7415,7416],{"class":847}," fontWeightNormal",[833,7418,1031],{"class":843},[833,7420,7421],{"class":847}," fontWeightSemibold",[833,7423,1031],{"class":843},[833,7425,7426],{"class":847}," fontWeightBold ",[833,7428,969],{"class":843},[833,7430,972],{"class":843},[833,7432,3538],{"class":912},[833,7434,977],{"class":847},[833,7436,867],{"class":843},[833,7438,7439,7441,7443,7446,7448,7451,7453,7455,7457,7459],{"class":835,"line":1438},[833,7440,903],{"class":902},[833,7442,844],{"class":843},[833,7444,7445],{"class":847}," fontStyleNormal",[833,7447,1031],{"class":843},[833,7449,7450],{"class":847}," fontStyleItalic ",[833,7452,969],{"class":843},[833,7454,972],{"class":843},[833,7456,4556],{"class":912},[833,7458,977],{"class":847},[833,7460,867],{"class":843},[833,7462,7463,7465,7467,7470,7472,7475,7477,7479,7481,7483],{"class":835,"line":1443},[833,7464,903],{"class":902},[833,7466,844],{"class":843},[833,7468,7469],{"class":847}," lineHeightTight",[833,7471,1031],{"class":843},[833,7473,7474],{"class":847}," lineHeightNormal ",[833,7476,969],{"class":843},[833,7478,972],{"class":843},[833,7480,5538],{"class":912},[833,7482,977],{"class":847},[833,7484,867],{"class":843},[833,7486,7487,7489,7491,7494,7496,7499,7501,7503,7505,7507],{"class":835,"line":1780},[833,7488,903],{"class":902},[833,7490,844],{"class":843},[833,7492,7493],{"class":847}," letterSpacingTight",[833,7495,1031],{"class":843},[833,7497,7498],{"class":847}," letterSpacingWide ",[833,7500,969],{"class":843},[833,7502,972],{"class":843},[833,7504,6340],{"class":912},[833,7506,977],{"class":847},[833,7508,867],{"class":843},[833,7510,7511],{"class":835,"line":2189},[833,7512,896],{"emptyLinePlaceholder":223},[833,7514,7515],{"class":835,"line":2206},[833,7516,7517],{"class":2453},"\u002F\u002F Apply to elements\n",[833,7519,7520,7523,7525,7527,7530,7532,7534],{"class":835,"line":2223},[833,7521,7522],{"class":912},"selector",[833,7524,1185],{"class":847},[833,7526,864],{"class":843},[833,7528,7529],{"class":860},"h1",[833,7531,864],{"class":843},[833,7533,1031],{"class":843},[833,7535,930],{"class":843},[833,7537,7538,7540,7542,7544,7547],{"class":835,"line":2236},[833,7539,936],{"class":1373},[833,7541,1013],{"class":843},[833,7543,7267],{"class":912},[833,7545,7546],{"class":847},"(fontFamily)",[833,7548,939],{"class":843},[833,7550,7551,7553,7555,7557,7560],{"class":835,"line":2241},[833,7552,2073],{"class":1373},[833,7554,1013],{"class":843},[833,7556,7267],{"class":912},[833,7558,7559],{"class":847},"(fontSize3xl)",[833,7561,939],{"class":843},[833,7563,7564,7566,7568,7570,7573],{"class":835,"line":2682},[833,7565,3583],{"class":1373},[833,7567,1013],{"class":843},[833,7569,7267],{"class":912},[833,7571,7572],{"class":847},"(fontWeightBold)",[833,7574,939],{"class":843},[833,7576,7577,7579,7581,7583,7586],{"class":835,"line":2690},[833,7578,4601],{"class":1373},[833,7580,1013],{"class":843},[833,7582,7267],{"class":912},[833,7584,7585],{"class":847},"(fontStyleNormal)",[833,7587,939],{"class":843},[833,7589,7590,7592,7594,7596,7599],{"class":835,"line":2698},[833,7591,5583],{"class":1373},[833,7593,1013],{"class":843},[833,7595,7267],{"class":912},[833,7597,7598],{"class":847},"(lineHeightTight)",[833,7600,939],{"class":843},[833,7602,7603,7605,7607,7609,7612],{"class":835,"line":2718},[833,7604,6385],{"class":1373},[833,7606,1013],{"class":843},[833,7608,7267],{"class":912},[833,7610,7611],{"class":847},"(letterSpacingTight)",[833,7613,939],{"class":843},[833,7615,7616,7618,7620],{"class":835,"line":2740},[833,7617,969],{"class":843},[833,7619,1433],{"class":847},[833,7621,867],{"class":843},[833,7623,7624],{"class":835,"line":2760},[833,7625,896],{"emptyLinePlaceholder":223},[833,7627,7628,7630,7632,7634,7637,7639,7641],{"class":835,"line":2779},[833,7629,7522],{"class":912},[833,7631,1185],{"class":847},[833,7633,864],{"class":843},[833,7635,7636],{"class":860},"body",[833,7638,864],{"class":843},[833,7640,1031],{"class":843},[833,7642,930],{"class":843},[833,7644,7645,7647,7649,7651,7653],{"class":835,"line":2797},[833,7646,936],{"class":1373},[833,7648,1013],{"class":843},[833,7650,7267],{"class":912},[833,7652,7546],{"class":847},[833,7654,939],{"class":843},[833,7656,7657,7659,7661,7663,7666],{"class":835,"line":2815},[833,7658,3583],{"class":1373},[833,7660,1013],{"class":843},[833,7662,7267],{"class":912},[833,7664,7665],{"class":847},"(fontWeightNormal)",[833,7667,939],{"class":843},[833,7669,7670,7672,7674,7676,7678],{"class":835,"line":2840},[833,7671,4601],{"class":1373},[833,7673,1013],{"class":843},[833,7675,7267],{"class":912},[833,7677,7585],{"class":847},[833,7679,939],{"class":843},[833,7681,7682,7684,7686,7688,7691],{"class":835,"line":2864},[833,7683,5583],{"class":1373},[833,7685,1013],{"class":843},[833,7687,7267],{"class":912},[833,7689,7690],{"class":847},"(lineHeightNormal)",[833,7692,939],{"class":843},[833,7694,7695,7697,7699],{"class":835,"line":2888},[833,7696,969],{"class":843},[833,7698,1433],{"class":847},[833,7700,867],{"class":843},[833,7702,7703],{"class":835,"line":2897},[833,7704,896],{"emptyLinePlaceholder":223},[833,7706,7707,7709,7711,7713,7716,7718,7720],{"class":835,"line":2902},[833,7708,7522],{"class":912},[833,7710,1185],{"class":847},[833,7712,864],{"class":843},[833,7714,7715],{"class":860},"em, i",[833,7717,864],{"class":843},[833,7719,1031],{"class":843},[833,7721,930],{"class":843},[833,7723,7725,7727,7729,7731,7734],{"class":835,"line":7724},37,[833,7726,4601],{"class":1373},[833,7728,1013],{"class":843},[833,7730,7267],{"class":912},[833,7732,7733],{"class":847},"(fontStyleItalic)",[833,7735,939],{"class":843},[833,7737,7739,7741,7743],{"class":835,"line":7738},38,[833,7740,969],{"class":843},[833,7742,1433],{"class":847},[833,7744,867],{"class":843},[833,7746,7748],{"class":835,"line":7747},39,[833,7749,896],{"emptyLinePlaceholder":223},[833,7751,7753,7755,7757,7759,7761,7763,7765],{"class":835,"line":7752},40,[833,7754,7522],{"class":912},[833,7756,1185],{"class":847},[833,7758,864],{"class":843},[833,7760,697],{"class":860},[833,7762,864],{"class":843},[833,7764,1031],{"class":843},[833,7766,930],{"class":843},[833,7768,7770,7772,7774,7776,7779],{"class":835,"line":7769},41,[833,7771,936],{"class":1373},[833,7773,1013],{"class":843},[833,7775,7267],{"class":912},[833,7777,7778],{"class":847},"(fontFamilyMono)",[833,7780,939],{"class":843},[833,7782,7784,7786,7788,7790,7793],{"class":835,"line":7783},42,[833,7785,2073],{"class":1373},[833,7787,1013],{"class":843},[833,7789,7267],{"class":912},[833,7791,7792],{"class":847},"(fontSizeXl)",[833,7794,939],{"class":843},[833,7796,7798,7800,7802,7804,7807],{"class":835,"line":7797},43,[833,7799,6385],{"class":1373},[833,7801,1013],{"class":843},[833,7803,7267],{"class":912},[833,7805,7806],{"class":847},"(letterSpacingWide)",[833,7808,939],{"class":843},[833,7810,7812,7814,7816],{"class":835,"line":7811},44,[833,7813,969],{"class":843},[833,7815,1433],{"class":847},[833,7817,867],{"class":843},[833,7819,7821],{"class":835,"line":7820},45,[833,7822,896],{"emptyLinePlaceholder":223},[833,7824,7826,7828,7830,7832],{"class":835,"line":7825},46,[833,7827,990],{"class":839},[833,7829,993],{"class":839},[833,7831,996],{"class":847},[833,7833,867],{"class":843},[819,7835,7836],{"icon":154,"label":326},[823,7837,7839],{"className":1003,"code":7838,"filename":1005,"language":1006,"meta":829,"style":829},":root {\n    --font-family--base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;\n    --font-family--print: 'Georgia', 'Times New Roman', 'Times', serif;\n    --font-family--mono: 'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;\n    --font-family: var(--font-family--base);\n    --font-size--xl: 1.25rem;\n    --font-size--2xl: 1.5rem;\n    --font-size--3xl: 2rem;\n    --font-weight--extralight: 200;\n    --font-weight--light: 300;\n    --font-weight--normal: normal;\n    --font-weight--medium: 500;\n    --font-weight--semibold: 600;\n    --font-weight--bold: bold;\n    --font-weight--black: 900;\n    --font-style--italic: italic;\n    --font-style--oblique: oblique;\n    --font-style--normal: normal;\n    --font-style--inherit: inherit;\n    --font-style: var(--font-style--normal);\n    --line-height--tight: 1.2;\n    --line-height--snug: 1.35;\n    --line-height--normal: 1.5;\n    --line-height--relaxed: 1.65;\n    --line-height--loose: 1.9;\n    --letter-spacing--tight: -0.025em;\n    --letter-spacing--wide: 0.05em;\n}\n\nh1 {\n    font-family: var(--font-family);\n    font-size: var(--font-size--3xl);\n    font-weight: var(--font-weight--bold);\n    font-style: var(--font-style--normal);\n    line-height: var(--line-height--tight);\n    letter-spacing: var(--letter-spacing--tight);\n}\n\nbody {\n    font-family: var(--font-family);\n    font-weight: var(--font-weight--normal);\n    font-style: var(--font-style--normal);\n    line-height: var(--line-height--normal);\n}\n\nem, i {\n    font-style: var(--font-style--italic);\n}\n\ncode {\n    font-family: var(--font-family--mono);\n    font-size: var(--font-size--xl);\n    letter-spacing: var(--letter-spacing--wide);\n}\n",[697,7840,7841,7849,7899,7933,7979,7993,8003,8013,8024,8034,8044,8054,8064,8074,8084,8094,8104,8114,8124,8134,8148,8158,8168,8178,8188,8198,8208,8218,8222,8226,8233,8249,8265,8281,8296,8312,8328,8332,8336,8342,8356,8370,8384,8398,8402,8406,8417,8432,8437,8442,8449,8465,8481,8497],{"__ignoreMap":829},[833,7842,7843,7845,7847],{"class":835,"line":836},[833,7844,1013],{"class":843},[833,7846,1016],{"class":902},[833,7848,930],{"class":843},[833,7850,7851,7853,7855,7857,7859,7861,7863,7865,7867,7869,7871,7873,7875,7877,7879,7881,7883,7885,7887,7889,7891,7893,7895,7897],{"class":835,"line":870},[833,7852,1023],{"class":847},[833,7854,1013],{"class":843},[833,7856,1028],{"class":847},[833,7858,1031],{"class":843},[833,7860,1034],{"class":847},[833,7862,1031],{"class":843},[833,7864,857],{"class":843},[833,7866,1041],{"class":860},[833,7868,864],{"class":843},[833,7870,1031],{"class":843},[833,7872,1048],{"class":847},[833,7874,1031],{"class":843},[833,7876,1053],{"class":847},[833,7878,1031],{"class":843},[833,7880,1058],{"class":847},[833,7882,1031],{"class":843},[833,7884,1063],{"class":847},[833,7886,1031],{"class":843},[833,7888,857],{"class":843},[833,7890,1070],{"class":860},[833,7892,864],{"class":843},[833,7894,1031],{"class":843},[833,7896,1077],{"class":847},[833,7898,867],{"class":843},[833,7900,7901,7903,7905,7907,7909,7911,7913,7915,7917,7919,7921,7923,7925,7927,7929,7931],{"class":835,"line":893},[833,7902,1084],{"class":847},[833,7904,1013],{"class":843},[833,7906,857],{"class":843},[833,7908,1091],{"class":860},[833,7910,864],{"class":843},[833,7912,1031],{"class":843},[833,7914,857],{"class":843},[833,7916,1100],{"class":860},[833,7918,864],{"class":843},[833,7920,1031],{"class":843},[833,7922,857],{"class":843},[833,7924,1109],{"class":860},[833,7926,864],{"class":843},[833,7928,1031],{"class":843},[833,7930,1116],{"class":847},[833,7932,867],{"class":843},[833,7934,7935,7937,7939,7941,7943,7945,7947,7949,7951,7953,7955,7957,7959,7961,7963,7965,7967,7969,7971,7973,7975,7977],{"class":835,"line":899},[833,7936,1123],{"class":847},[833,7938,1013],{"class":843},[833,7940,857],{"class":843},[833,7942,1130],{"class":860},[833,7944,864],{"class":843},[833,7946,1031],{"class":843},[833,7948,1137],{"class":847},[833,7950,1031],{"class":843},[833,7952,1142],{"class":847},[833,7954,1031],{"class":843},[833,7956,1147],{"class":847},[833,7958,1031],{"class":843},[833,7960,857],{"class":843},[833,7962,1154],{"class":860},[833,7964,864],{"class":843},[833,7966,1031],{"class":843},[833,7968,857],{"class":843},[833,7970,1163],{"class":860},[833,7972,864],{"class":843},[833,7974,1031],{"class":843},[833,7976,1170],{"class":847},[833,7978,867],{"class":843},[833,7980,7981,7983,7985,7987,7989,7991],{"class":835,"line":920},[833,7982,1177],{"class":847},[833,7984,1013],{"class":843},[833,7986,1182],{"class":912},[833,7988,1185],{"class":843},[833,7990,1188],{"class":847},[833,7992,1191],{"class":843},[833,7994,7995,7997,7999,8001],{"class":835,"line":925},[833,7996,2329],{"class":847},[833,7998,1013],{"class":843},[833,8000,2322],{"class":2274},[833,8002,867],{"class":843},[833,8004,8005,8007,8009,8011],{"class":835,"line":933},[833,8006,3378],{"class":847},[833,8008,1013],{"class":843},[833,8010,2334],{"class":2274},[833,8012,867],{"class":843},[833,8014,8015,8017,8019,8022],{"class":835,"line":942},[833,8016,3408],{"class":847},[833,8018,1013],{"class":843},[833,8020,8021],{"class":2274}," 2rem",[833,8023,867],{"class":843},[833,8025,8026,8028,8030,8032],{"class":835,"line":950},[833,8027,3701],{"class":847},[833,8029,1013],{"class":843},[833,8031,3706],{"class":2274},[833,8033,867],{"class":843},[833,8035,8036,8038,8040,8042],{"class":835,"line":958},[833,8037,3713],{"class":847},[833,8039,1013],{"class":843},[833,8041,3718],{"class":2274},[833,8043,867],{"class":843},[833,8045,8046,8048,8050,8052],{"class":835,"line":966},[833,8047,3725],{"class":847},[833,8049,1013],{"class":843},[833,8051,3730],{"class":847},[833,8053,867],{"class":843},[833,8055,8056,8058,8060,8062],{"class":835,"line":982},[833,8057,3737],{"class":847},[833,8059,1013],{"class":843},[833,8061,3742],{"class":2274},[833,8063,867],{"class":843},[833,8065,8066,8068,8070,8072],{"class":835,"line":987},[833,8067,3749],{"class":847},[833,8069,1013],{"class":843},[833,8071,3754],{"class":2274},[833,8073,867],{"class":843},[833,8075,8076,8078,8080,8082],{"class":835,"line":1422},[833,8077,3761],{"class":847},[833,8079,1013],{"class":843},[833,8081,3766],{"class":847},[833,8083,867],{"class":843},[833,8085,8086,8088,8090,8092],{"class":835,"line":1438},[833,8087,3773],{"class":847},[833,8089,1013],{"class":843},[833,8091,3778],{"class":2274},[833,8093,867],{"class":843},[833,8095,8096,8098,8100,8102],{"class":835,"line":1443},[833,8097,4677],{"class":847},[833,8099,1013],{"class":843},[833,8101,4682],{"class":847},[833,8103,867],{"class":843},[833,8105,8106,8108,8110,8112],{"class":835,"line":1780},[833,8107,4689],{"class":847},[833,8109,1013],{"class":843},[833,8111,4694],{"class":847},[833,8113,867],{"class":843},[833,8115,8116,8118,8120,8122],{"class":835,"line":2189},[833,8117,4701],{"class":847},[833,8119,1013],{"class":843},[833,8121,3730],{"class":847},[833,8123,867],{"class":843},[833,8125,8126,8128,8130,8132],{"class":835,"line":2206},[833,8127,4712],{"class":847},[833,8129,1013],{"class":843},[833,8131,3814],{"class":847},[833,8133,867],{"class":843},[833,8135,8136,8138,8140,8142,8144,8146],{"class":835,"line":2223},[833,8137,4723],{"class":847},[833,8139,1013],{"class":843},[833,8141,1182],{"class":912},[833,8143,1185],{"class":843},[833,8145,4732],{"class":847},[833,8147,1191],{"class":843},[833,8149,8150,8152,8154,8156],{"class":835,"line":2236},[833,8151,5666],{"class":847},[833,8153,1013],{"class":843},[833,8155,5671],{"class":2274},[833,8157,867],{"class":843},[833,8159,8160,8162,8164,8166],{"class":835,"line":2241},[833,8161,5678],{"class":847},[833,8163,1013],{"class":843},[833,8165,5683],{"class":2274},[833,8167,867],{"class":843},[833,8169,8170,8172,8174,8176],{"class":835,"line":2682},[833,8171,5690],{"class":847},[833,8173,1013],{"class":843},[833,8175,5695],{"class":2274},[833,8177,867],{"class":843},[833,8179,8180,8182,8184,8186],{"class":835,"line":2690},[833,8181,5702],{"class":847},[833,8183,1013],{"class":843},[833,8185,5707],{"class":2274},[833,8187,867],{"class":843},[833,8189,8190,8192,8194,8196],{"class":835,"line":2698},[833,8191,5714],{"class":847},[833,8193,1013],{"class":843},[833,8195,5719],{"class":2274},[833,8197,867],{"class":843},[833,8199,8200,8202,8204,8206],{"class":835,"line":2718},[833,8201,6480],{"class":847},[833,8203,1013],{"class":843},[833,8205,6485],{"class":2274},[833,8207,867],{"class":843},[833,8209,8210,8212,8214,8216],{"class":835,"line":2740},[833,8211,6503],{"class":847},[833,8213,1013],{"class":843},[833,8215,6508],{"class":2274},[833,8217,867],{"class":843},[833,8219,8220],{"class":835,"line":2760},[833,8221,1196],{"class":843},[833,8223,8224],{"class":835,"line":2779},[833,8225,896],{"emptyLinePlaceholder":223},[833,8227,8228,8231],{"class":835,"line":2797},[833,8229,7529],{"class":8230},"sBMFI",[833,8232,930],{"class":843},[833,8234,8235,8239,8241,8243,8245,8247],{"class":835,"line":2815},[833,8236,8238],{"class":8237},"sqsOY","    font-family",[833,8240,1013],{"class":843},[833,8242,1182],{"class":912},[833,8244,1185],{"class":843},[833,8246,1249],{"class":847},[833,8248,1191],{"class":843},[833,8250,8251,8254,8256,8258,8260,8263],{"class":835,"line":2840},[833,8252,8253],{"class":8237},"    font-size",[833,8255,1013],{"class":843},[833,8257,1182],{"class":912},[833,8259,1185],{"class":843},[833,8261,8262],{"class":847},"--font-size--3xl",[833,8264,1191],{"class":843},[833,8266,8267,8270,8272,8274,8276,8279],{"class":835,"line":2864},[833,8268,8269],{"class":8237},"    font-weight",[833,8271,1013],{"class":843},[833,8273,1182],{"class":912},[833,8275,1185],{"class":843},[833,8277,8278],{"class":847},"--font-weight--bold",[833,8280,1191],{"class":843},[833,8282,8283,8286,8288,8290,8292,8294],{"class":835,"line":2888},[833,8284,8285],{"class":8237},"    font-style",[833,8287,1013],{"class":843},[833,8289,1182],{"class":912},[833,8291,1185],{"class":843},[833,8293,4732],{"class":847},[833,8295,1191],{"class":843},[833,8297,8298,8301,8303,8305,8307,8310],{"class":835,"line":2897},[833,8299,8300],{"class":8237},"    line-height",[833,8302,1013],{"class":843},[833,8304,1182],{"class":912},[833,8306,1185],{"class":843},[833,8308,8309],{"class":847},"--line-height--tight",[833,8311,1191],{"class":843},[833,8313,8314,8317,8319,8321,8323,8326],{"class":835,"line":2902},[833,8315,8316],{"class":8237},"    letter-spacing",[833,8318,1013],{"class":843},[833,8320,1182],{"class":912},[833,8322,1185],{"class":843},[833,8324,8325],{"class":847},"--letter-spacing--tight",[833,8327,1191],{"class":843},[833,8329,8330],{"class":835,"line":7724},[833,8331,1196],{"class":843},[833,8333,8334],{"class":835,"line":7738},[833,8335,896],{"emptyLinePlaceholder":223},[833,8337,8338,8340],{"class":835,"line":7747},[833,8339,7636],{"class":8230},[833,8341,930],{"class":843},[833,8343,8344,8346,8348,8350,8352,8354],{"class":835,"line":7752},[833,8345,8238],{"class":8237},[833,8347,1013],{"class":843},[833,8349,1182],{"class":912},[833,8351,1185],{"class":843},[833,8353,1249],{"class":847},[833,8355,1191],{"class":843},[833,8357,8358,8360,8362,8364,8366,8368],{"class":835,"line":7769},[833,8359,8269],{"class":8237},[833,8361,1013],{"class":843},[833,8363,1182],{"class":912},[833,8365,1185],{"class":843},[833,8367,3830],{"class":847},[833,8369,1191],{"class":843},[833,8371,8372,8374,8376,8378,8380,8382],{"class":835,"line":7783},[833,8373,8285],{"class":8237},[833,8375,1013],{"class":843},[833,8377,1182],{"class":912},[833,8379,1185],{"class":843},[833,8381,4732],{"class":847},[833,8383,1191],{"class":843},[833,8385,8386,8388,8390,8392,8394,8396],{"class":835,"line":7797},[833,8387,8300],{"class":8237},[833,8389,1013],{"class":843},[833,8391,1182],{"class":912},[833,8393,1185],{"class":843},[833,8395,5735],{"class":847},[833,8397,1191],{"class":843},[833,8399,8400],{"class":835,"line":7811},[833,8401,1196],{"class":843},[833,8403,8404],{"class":835,"line":7820},[833,8405,896],{"emptyLinePlaceholder":223},[833,8407,8408,8410,8412,8415],{"class":835,"line":7825},[833,8409,6602],{"class":8230},[833,8411,1031],{"class":843},[833,8413,8414],{"class":8230}," i",[833,8416,930],{"class":843},[833,8418,8420,8422,8424,8426,8428,8430],{"class":835,"line":8419},47,[833,8421,8285],{"class":8237},[833,8423,1013],{"class":843},[833,8425,1182],{"class":912},[833,8427,1185],{"class":843},[833,8429,5255],{"class":847},[833,8431,1191],{"class":843},[833,8433,8435],{"class":835,"line":8434},48,[833,8436,1196],{"class":843},[833,8438,8440],{"class":835,"line":8439},49,[833,8441,896],{"emptyLinePlaceholder":223},[833,8443,8445,8447],{"class":835,"line":8444},50,[833,8446,697],{"class":8230},[833,8448,930],{"class":843},[833,8450,8452,8454,8456,8458,8460,8463],{"class":835,"line":8451},51,[833,8453,8238],{"class":8237},[833,8455,1013],{"class":843},[833,8457,1182],{"class":912},[833,8459,1185],{"class":843},[833,8461,8462],{"class":847},"--font-family--mono",[833,8464,1191],{"class":843},[833,8466,8468,8470,8472,8474,8476,8479],{"class":835,"line":8467},52,[833,8469,8253],{"class":8237},[833,8471,1013],{"class":843},[833,8473,1182],{"class":912},[833,8475,1185],{"class":843},[833,8477,8478],{"class":847},"--font-size--xl",[833,8480,1191],{"class":843},[833,8482,8484,8486,8488,8490,8492,8495],{"class":835,"line":8483},53,[833,8485,8316],{"class":8237},[833,8487,1013],{"class":843},[833,8489,1182],{"class":912},[833,8491,1185],{"class":843},[833,8493,8494],{"class":847},"--letter-spacing--wide",[833,8496,1191],{"class":843},[833,8498,8500],{"class":835,"line":8499},54,[833,8501,1196],{"class":843},[747,8503,8505],{"id":8504},"examples","Examples",[808,8507,8509],{"id":8508},"complete-typography-system","Complete Typography System",[751,8511,8512],{},"Here's a comprehensive example showing a full typography system with all composables working together:",[816,8514,8515,9982],{},[819,8516,8517],{"icon":821,"label":290},[823,8518,8520],{"className":825,"code":8519,"filename":827,"language":828,"meta":829,"style":829},"import { styleframe } from 'styleframe';\nimport { \n    useFontFamilyDesignTokens,\n    useFontSizeDesignTokens,\n    useFontWeightDesignTokens,\n    useLineHeightDesignTokens,\n    useLetterSpacingDesignTokens,\n    useScaleDesignTokens,\n    useScalePowersDesignTokens,\n    useMultiplierDesignTokens,\n    defaultScaleValues\n} from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\nconst { ref, selector } = s;\n\n\u002F\u002F Font families\nconst { fontFamily, fontFamilyMono, fontFamilyDisplay } = useFontFamilyDesignTokens(s, {\n    default: \"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif\",\n    mono: \"'JetBrains Mono', 'Fira Code', monospace\",\n    display: \"'Inter', sans-serif\",\n} as const);\n\n\u002F\u002F Font size with scale\nconst { scale } = useScaleDesignTokens(s, { ...defaultScaleValues, default: '@scale.perfect-fourth' });\nconst { fontSize } = useFontSizeDesignTokens(s, { default: '1rem' });\nconst scalePowers = useScalePowersDesignTokens(s, scale, [-2, -1, 0, 1, 2, 3, 4]);\n\nconst {\n    fontSizeXs,\n    fontSizeSm,\n    fontSizeMd,\n    fontSizeLg,\n    fontSizeXl,\n    fontSize2xl,\n    fontSize3xl,\n} = useMultiplierDesignTokens(s, fontSize, {\n    xs: scalePowers[-2],\n    sm: scalePowers[-1],\n    md: scalePowers[0],\n    lg: scalePowers[1],\n    xl: scalePowers[2],\n    '2xl': scalePowers[3],\n    '3xl': scalePowers[4],\n});\n\n\u002F\u002F Font weights\nconst { fontWeightNormal, fontWeightMedium, fontWeightSemibold, fontWeightBold } = useFontWeightDesignTokens(s);\n\n\u002F\u002F Font styles\nconst { fontStyleNormal, fontStyleItalic } = useFontStyleDesignTokens(s);\n\n\u002F\u002F Line heights\nconst { lineHeightTight, lineHeightNormal, lineHeightRelaxed } = useLineHeightDesignTokens(s);\n\n\u002F\u002F Letter spacing\nconst { letterSpacingTight, letterSpacingNormal, letterSpacingWide } = useLetterSpacingDesignTokens(s);\n\n\u002F\u002F Apply to elements\nselector('body', {\n    fontFamily: ref(fontFamily),\n    fontSize: ref(fontSizeMd),\n    fontWeight: ref(fontWeightNormal),\n    lineHeight: ref(lineHeightNormal),\n    letterSpacing: ref(letterSpacingNormal),\n});\n\nselector('h1', {\n    fontFamily: ref(fontFamilyDisplay),\n    fontSize: ref(fontSize3xl),\n    fontWeight: ref(fontWeightBold),\n    lineHeight: ref(lineHeightTight),\n    letterSpacing: ref(letterSpacingTight),\n});\n\nselector('h2', {\n    fontFamily: ref(fontFamilyDisplay),\n    fontSize: ref(fontSize2xl),\n    fontWeight: ref(fontWeightBold),\n    lineHeight: ref(lineHeightTight),\n    letterSpacing: ref(letterSpacingTight),\n});\n\nselector('h3', {\n    fontFamily: ref(fontFamilyDisplay),\n    fontSize: ref(fontSizeXl),\n    fontWeight: ref(fontWeightSemibold),\n    lineHeight: ref(lineHeightTight),\n});\n\nselector('p', {\n    fontSize: ref(fontSizeMd),\n    lineHeight: ref(lineHeightRelaxed),\n});\n\nselector('small', {\n    fontSize: ref(fontSizeSm),\n    lineHeight: ref(lineHeightNormal),\n});\n\nselector('code', {\n    fontFamily: ref(fontFamilyMono),\n    fontSize: ref(fontSizeSm),\n    letterSpacing: ref(letterSpacingWide),\n});\n\nselector('.lead', {\n    fontSize: ref(fontSizeLg),\n    fontWeight: ref(fontWeightMedium),\n    lineHeight: ref(lineHeightRelaxed),\n});\n\nselector('.label', {\n    fontSize: ref(fontSizeXs),\n    fontWeight: ref(fontWeightMedium),\n    textTransform: 'uppercase',\n    letterSpacing: ref(letterSpacingWide),\n});\n\nexport default s;\n",[697,8521,8522,8542,8551,8558,8565,8572,8579,8586,8593,8600,8607,8612,8626,8630,8644,8664,8668,8673,8703,8718,8733,8748,8760,8764,8769,8811,8847,8901,8905,8911,8917,8923,8929,8935,8941,8947,8953,8971,8987,9003,9017,9031,9045,9063,9081,9089,9093,9098,9129,9133,9138,9160,9164,9169,9197,9202,9208,9236,9241,9246,9263,9276,9290,9303,9316,9330,9339,9344,9361,9375,9388,9401,9414,9427,9436,9441,9458,9471,9485,9498,9511,9524,9533,9538,9555,9568,9581,9595,9608,9617,9622,9639,9652,9666,9675,9680,9698,9712,9725,9734,9739,9756,9769,9782,9795,9804,9809,9827,9841,9855,9868,9877,9882,9900,9914,9927,9944,9957,9966,9971],{"__ignoreMap":829},[833,8523,8524,8526,8528,8530,8532,8534,8536,8538,8540],{"class":835,"line":836},[833,8525,840],{"class":839},[833,8527,844],{"class":843},[833,8529,848],{"class":847},[833,8531,851],{"class":843},[833,8533,854],{"class":839},[833,8535,857],{"class":843},[833,8537,861],{"class":860},[833,8539,864],{"class":843},[833,8541,867],{"class":843},[833,8543,8544,8546,8548],{"class":835,"line":870},[833,8545,840],{"class":839},[833,8547,844],{"class":843},[833,8549,8550],{"class":1373}," \n",[833,8552,8553,8556],{"class":835,"line":893},[833,8554,8555],{"class":847},"    useFontFamilyDesignTokens",[833,8557,939],{"class":843},[833,8559,8560,8563],{"class":835,"line":899},[833,8561,8562],{"class":847},"    useFontSizeDesignTokens",[833,8564,939],{"class":843},[833,8566,8567,8570],{"class":835,"line":920},[833,8568,8569],{"class":847},"    useFontWeightDesignTokens",[833,8571,939],{"class":843},[833,8573,8574,8577],{"class":835,"line":925},[833,8575,8576],{"class":847},"    useLineHeightDesignTokens",[833,8578,939],{"class":843},[833,8580,8581,8584],{"class":835,"line":933},[833,8582,8583],{"class":847},"    useLetterSpacingDesignTokens",[833,8585,939],{"class":843},[833,8587,8588,8591],{"class":835,"line":942},[833,8589,8590],{"class":847},"    useScaleDesignTokens",[833,8592,939],{"class":843},[833,8594,8595,8598],{"class":835,"line":950},[833,8596,8597],{"class":847},"    useScalePowersDesignTokens",[833,8599,939],{"class":843},[833,8601,8602,8605],{"class":835,"line":958},[833,8603,8604],{"class":847},"    useMultiplierDesignTokens",[833,8606,939],{"class":843},[833,8608,8609],{"class":835,"line":966},[833,8610,8611],{"class":847},"    defaultScaleValues\n",[833,8613,8614,8616,8618,8620,8622,8624],{"class":835,"line":982},[833,8615,969],{"class":843},[833,8617,854],{"class":839},[833,8619,857],{"class":843},[833,8621,886],{"class":860},[833,8623,864],{"class":843},[833,8625,867],{"class":843},[833,8627,8628],{"class":835,"line":987},[833,8629,896],{"emptyLinePlaceholder":223},[833,8631,8632,8634,8636,8638,8640,8642],{"class":835,"line":1422},[833,8633,903],{"class":902},[833,8635,906],{"class":847},[833,8637,909],{"class":843},[833,8639,848],{"class":912},[833,8641,915],{"class":847},[833,8643,867],{"class":843},[833,8645,8646,8648,8650,8652,8654,8656,8658,8660,8662],{"class":835,"line":1438},[833,8647,903],{"class":902},[833,8649,844],{"class":843},[833,8651,7267],{"class":847},[833,8653,1031],{"class":843},[833,8655,7272],{"class":847},[833,8657,969],{"class":843},[833,8659,972],{"class":843},[833,8661,996],{"class":847},[833,8663,867],{"class":843},[833,8665,8666],{"class":835,"line":1443},[833,8667,896],{"emptyLinePlaceholder":223},[833,8669,8670],{"class":835,"line":1780},[833,8671,8672],{"class":2453},"\u002F\u002F Font families\n",[833,8674,8675,8677,8679,8681,8683,8686,8688,8691,8693,8695,8697,8699,8701],{"class":835,"line":2189},[833,8676,903],{"class":902},[833,8678,844],{"class":843},[833,8680,7298],{"class":847},[833,8682,1031],{"class":843},[833,8684,8685],{"class":847}," fontFamilyMono",[833,8687,1031],{"class":843},[833,8689,8690],{"class":847}," fontFamilyDisplay ",[833,8692,969],{"class":843},[833,8694,972],{"class":843},[833,8696,877],{"class":912},[833,8698,1364],{"class":847},[833,8700,1031],{"class":843},[833,8702,930],{"class":843},[833,8704,8705,8707,8709,8711,8714,8716],{"class":835,"line":2206},[833,8706,1374],{"class":1373},[833,8708,1013],{"class":843},[833,8710,1379],{"class":843},[833,8712,8713],{"class":860},"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",[833,8715,1385],{"class":843},[833,8717,939],{"class":843},[833,8719,8720,8722,8724,8726,8729,8731],{"class":835,"line":2223},[833,8721,1392],{"class":1373},[833,8723,1013],{"class":843},[833,8725,1379],{"class":843},[833,8727,8728],{"class":860},"'JetBrains Mono', 'Fira Code', monospace",[833,8730,1385],{"class":843},[833,8732,939],{"class":843},[833,8734,8735,8737,8739,8741,8744,8746],{"class":835,"line":2236},[833,8736,1750],{"class":1373},[833,8738,1013],{"class":843},[833,8740,1379],{"class":843},[833,8742,8743],{"class":860},"'Inter', sans-serif",[833,8745,1385],{"class":843},[833,8747,939],{"class":843},[833,8749,8750,8752,8754,8756,8758],{"class":835,"line":2241},[833,8751,969],{"class":843},[833,8753,1427],{"class":839},[833,8755,1430],{"class":902},[833,8757,1433],{"class":847},[833,8759,867],{"class":843},[833,8761,8762],{"class":835,"line":2682},[833,8763,896],{"emptyLinePlaceholder":223},[833,8765,8766],{"class":835,"line":2690},[833,8767,8768],{"class":2453},"\u002F\u002F Font size with scale\n",[833,8770,8771,8773,8775,8777,8779,8781,8783,8785,8787,8789,8791,8793,8795,8797,8799,8801,8803,8805,8807,8809],{"class":835,"line":2698},[833,8772,903],{"class":902},[833,8774,844],{"class":843},[833,8776,2463],{"class":847},[833,8778,969],{"class":843},[833,8780,972],{"class":843},[833,8782,2395],{"class":912},[833,8784,1364],{"class":847},[833,8786,1031],{"class":843},[833,8788,844],{"class":843},[833,8790,2478],{"class":843},[833,8792,2481],{"class":847},[833,8794,1031],{"class":843},[833,8796,993],{"class":1373},[833,8798,1013],{"class":843},[833,8800,857],{"class":843},[833,8802,2492],{"class":860},[833,8804,864],{"class":843},[833,8806,851],{"class":843},[833,8808,1433],{"class":847},[833,8810,867],{"class":843},[833,8812,8813,8815,8817,8819,8821,8823,8825,8827,8829,8831,8833,8835,8837,8839,8841,8843,8845],{"class":835,"line":2718},[833,8814,903],{"class":902},[833,8816,844],{"class":843},[833,8818,2518],{"class":847},[833,8820,969],{"class":843},[833,8822,972],{"class":843},[833,8824,2028],{"class":912},[833,8826,1364],{"class":847},[833,8828,1031],{"class":843},[833,8830,844],{"class":843},[833,8832,993],{"class":1373},[833,8834,1013],{"class":843},[833,8836,857],{"class":843},[833,8838,2135],{"class":860},[833,8840,864],{"class":843},[833,8842,851],{"class":843},[833,8844,1433],{"class":847},[833,8846,867],{"class":843},[833,8848,8849,8851,8853,8855,8857,8859,8861,8863,8865,8867,8869,8871,8873,8875,8877,8879,8881,8883,8885,8887,8889,8891,8893,8895,8897,8899],{"class":835,"line":2740},[833,8850,903],{"class":902},[833,8852,2562],{"class":847},[833,8854,909],{"class":843},[833,8856,2400],{"class":912},[833,8858,1364],{"class":847},[833,8860,1031],{"class":843},[833,8862,2573],{"class":847},[833,8864,1031],{"class":843},[833,8866,2578],{"class":847},[833,8868,2581],{"class":843},[833,8870,2584],{"class":2274},[833,8872,1031],{"class":843},[833,8874,2589],{"class":843},[833,8876,2592],{"class":2274},[833,8878,1031],{"class":843},[833,8880,2597],{"class":2274},[833,8882,1031],{"class":843},[833,8884,2602],{"class":2274},[833,8886,1031],{"class":843},[833,8888,2607],{"class":2274},[833,8890,1031],{"class":843},[833,8892,2612],{"class":2274},[833,8894,1031],{"class":843},[833,8896,2617],{"class":2274},[833,8898,2625],{"class":847},[833,8900,867],{"class":843},[833,8902,8903],{"class":835,"line":2760},[833,8904,896],{"emptyLinePlaceholder":223},[833,8906,8907,8909],{"class":835,"line":2779},[833,8908,903],{"class":902},[833,8910,930],{"class":843},[833,8912,8913,8915],{"class":835,"line":2797},[833,8914,2080],{"class":847},[833,8916,939],{"class":843},[833,8918,8919,8921],{"class":835,"line":2815},[833,8920,2087],{"class":847},[833,8922,939],{"class":843},[833,8924,8925,8927],{"class":835,"line":2840},[833,8926,2094],{"class":847},[833,8928,939],{"class":843},[833,8930,8931,8933],{"class":835,"line":2864},[833,8932,2101],{"class":847},[833,8934,939],{"class":843},[833,8936,8937,8939],{"class":835,"line":2888},[833,8938,2108],{"class":847},[833,8940,939],{"class":843},[833,8942,8943,8945],{"class":835,"line":2897},[833,8944,2677],{"class":847},[833,8946,939],{"class":843},[833,8948,8949,8951],{"class":835,"line":2902},[833,8950,2685],{"class":847},[833,8952,939],{"class":843},[833,8954,8955,8957,8959,8961,8963,8965,8967,8969],{"class":835,"line":7724},[833,8956,969],{"class":843},[833,8958,972],{"class":843},[833,8960,2405],{"class":912},[833,8962,1364],{"class":847},[833,8964,1031],{"class":843},[833,8966,2711],{"class":847},[833,8968,1031],{"class":843},[833,8970,930],{"class":843},[833,8972,8973,8975,8977,8979,8981,8983,8985],{"class":835,"line":7738},[833,8974,2144],{"class":1373},[833,8976,1013],{"class":843},[833,8978,2725],{"class":847},[833,8980,2581],{"class":843},[833,8982,2584],{"class":2274},[833,8984,2732],{"class":847},[833,8986,939],{"class":843},[833,8988,8989,8991,8993,8995,8997,8999,9001],{"class":835,"line":7747},[833,8990,2160],{"class":1373},[833,8992,1013],{"class":843},[833,8994,2725],{"class":847},[833,8996,2581],{"class":843},[833,8998,2592],{"class":2274},[833,9000,2732],{"class":847},[833,9002,939],{"class":843},[833,9004,9005,9007,9009,9011,9013,9015],{"class":835,"line":7752},[833,9006,2176],{"class":1373},[833,9008,1013],{"class":843},[833,9010,2725],{"class":847},[833,9012,2769],{"class":2274},[833,9014,2732],{"class":847},[833,9016,939],{"class":843},[833,9018,9019,9021,9023,9025,9027,9029],{"class":835,"line":7769},[833,9020,2192],{"class":1373},[833,9022,1013],{"class":843},[833,9024,2725],{"class":847},[833,9026,2592],{"class":2274},[833,9028,2732],{"class":847},[833,9030,939],{"class":843},[833,9032,9033,9035,9037,9039,9041,9043],{"class":835,"line":7783},[833,9034,2209],{"class":1373},[833,9036,1013],{"class":843},[833,9038,2725],{"class":847},[833,9040,2584],{"class":2274},[833,9042,2732],{"class":847},[833,9044,939],{"class":843},[833,9046,9047,9049,9051,9053,9055,9057,9059,9061],{"class":835,"line":7797},[833,9048,2818],{"class":843},[833,9050,2821],{"class":1373},[833,9052,864],{"class":843},[833,9054,1013],{"class":843},[833,9056,2725],{"class":847},[833,9058,2830],{"class":2274},[833,9060,2732],{"class":847},[833,9062,939],{"class":843},[833,9064,9065,9067,9069,9071,9073,9075,9077,9079],{"class":835,"line":7811},[833,9066,2818],{"class":843},[833,9068,2845],{"class":1373},[833,9070,864],{"class":843},[833,9072,1013],{"class":843},[833,9074,2725],{"class":847},[833,9076,2854],{"class":2274},[833,9078,2732],{"class":847},[833,9080,939],{"class":843},[833,9082,9083,9085,9087],{"class":835,"line":7820},[833,9084,969],{"class":843},[833,9086,1433],{"class":847},[833,9088,867],{"class":843},[833,9090,9091],{"class":835,"line":7825},[833,9092,896],{"emptyLinePlaceholder":223},[833,9094,9095],{"class":835,"line":8419},[833,9096,9097],{"class":2453},"\u002F\u002F Font weights\n",[833,9099,9100,9102,9104,9106,9108,9111,9113,9115,9117,9119,9121,9123,9125,9127],{"class":835,"line":8434},[833,9101,903],{"class":902},[833,9103,844],{"class":843},[833,9105,7416],{"class":847},[833,9107,1031],{"class":843},[833,9109,9110],{"class":847}," fontWeightMedium",[833,9112,1031],{"class":843},[833,9114,7421],{"class":847},[833,9116,1031],{"class":843},[833,9118,7426],{"class":847},[833,9120,969],{"class":843},[833,9122,972],{"class":843},[833,9124,3538],{"class":912},[833,9126,977],{"class":847},[833,9128,867],{"class":843},[833,9130,9131],{"class":835,"line":8439},[833,9132,896],{"emptyLinePlaceholder":223},[833,9134,9135],{"class":835,"line":8444},[833,9136,9137],{"class":2453},"\u002F\u002F Font styles\n",[833,9139,9140,9142,9144,9146,9148,9150,9152,9154,9156,9158],{"class":835,"line":8451},[833,9141,903],{"class":902},[833,9143,844],{"class":843},[833,9145,7445],{"class":847},[833,9147,1031],{"class":843},[833,9149,7450],{"class":847},[833,9151,969],{"class":843},[833,9153,972],{"class":843},[833,9155,4556],{"class":912},[833,9157,977],{"class":847},[833,9159,867],{"class":843},[833,9161,9162],{"class":835,"line":8467},[833,9163,896],{"emptyLinePlaceholder":223},[833,9165,9166],{"class":835,"line":8483},[833,9167,9168],{"class":2453},"\u002F\u002F Line heights\n",[833,9170,9171,9173,9175,9177,9179,9182,9184,9187,9189,9191,9193,9195],{"class":835,"line":8499},[833,9172,903],{"class":902},[833,9174,844],{"class":843},[833,9176,7469],{"class":847},[833,9178,1031],{"class":843},[833,9180,9181],{"class":847}," lineHeightNormal",[833,9183,1031],{"class":843},[833,9185,9186],{"class":847}," lineHeightRelaxed ",[833,9188,969],{"class":843},[833,9190,972],{"class":843},[833,9192,5538],{"class":912},[833,9194,977],{"class":847},[833,9196,867],{"class":843},[833,9198,9200],{"class":835,"line":9199},55,[833,9201,896],{"emptyLinePlaceholder":223},[833,9203,9205],{"class":835,"line":9204},56,[833,9206,9207],{"class":2453},"\u002F\u002F Letter spacing\n",[833,9209,9211,9213,9215,9217,9219,9222,9224,9226,9228,9230,9232,9234],{"class":835,"line":9210},57,[833,9212,903],{"class":902},[833,9214,844],{"class":843},[833,9216,7493],{"class":847},[833,9218,1031],{"class":843},[833,9220,9221],{"class":847}," letterSpacingNormal",[833,9223,1031],{"class":843},[833,9225,7498],{"class":847},[833,9227,969],{"class":843},[833,9229,972],{"class":843},[833,9231,6340],{"class":912},[833,9233,977],{"class":847},[833,9235,867],{"class":843},[833,9237,9239],{"class":835,"line":9238},58,[833,9240,896],{"emptyLinePlaceholder":223},[833,9242,9244],{"class":835,"line":9243},59,[833,9245,7517],{"class":2453},[833,9247,9249,9251,9253,9255,9257,9259,9261],{"class":835,"line":9248},60,[833,9250,7522],{"class":912},[833,9252,1185],{"class":847},[833,9254,864],{"class":843},[833,9256,7636],{"class":860},[833,9258,864],{"class":843},[833,9260,1031],{"class":843},[833,9262,930],{"class":843},[833,9264,9266,9268,9270,9272,9274],{"class":835,"line":9265},61,[833,9267,936],{"class":1373},[833,9269,1013],{"class":843},[833,9271,7267],{"class":912},[833,9273,7546],{"class":847},[833,9275,939],{"class":843},[833,9277,9279,9281,9283,9285,9288],{"class":835,"line":9278},62,[833,9280,2073],{"class":1373},[833,9282,1013],{"class":843},[833,9284,7267],{"class":912},[833,9286,9287],{"class":847},"(fontSizeMd)",[833,9289,939],{"class":843},[833,9291,9293,9295,9297,9299,9301],{"class":835,"line":9292},63,[833,9294,3583],{"class":1373},[833,9296,1013],{"class":843},[833,9298,7267],{"class":912},[833,9300,7665],{"class":847},[833,9302,939],{"class":843},[833,9304,9306,9308,9310,9312,9314],{"class":835,"line":9305},64,[833,9307,5583],{"class":1373},[833,9309,1013],{"class":843},[833,9311,7267],{"class":912},[833,9313,7690],{"class":847},[833,9315,939],{"class":843},[833,9317,9319,9321,9323,9325,9328],{"class":835,"line":9318},65,[833,9320,6385],{"class":1373},[833,9322,1013],{"class":843},[833,9324,7267],{"class":912},[833,9326,9327],{"class":847},"(letterSpacingNormal)",[833,9329,939],{"class":843},[833,9331,9333,9335,9337],{"class":835,"line":9332},66,[833,9334,969],{"class":843},[833,9336,1433],{"class":847},[833,9338,867],{"class":843},[833,9340,9342],{"class":835,"line":9341},67,[833,9343,896],{"emptyLinePlaceholder":223},[833,9345,9347,9349,9351,9353,9355,9357,9359],{"class":835,"line":9346},68,[833,9348,7522],{"class":912},[833,9350,1185],{"class":847},[833,9352,864],{"class":843},[833,9354,7529],{"class":860},[833,9356,864],{"class":843},[833,9358,1031],{"class":843},[833,9360,930],{"class":843},[833,9362,9364,9366,9368,9370,9373],{"class":835,"line":9363},69,[833,9365,936],{"class":1373},[833,9367,1013],{"class":843},[833,9369,7267],{"class":912},[833,9371,9372],{"class":847},"(fontFamilyDisplay)",[833,9374,939],{"class":843},[833,9376,9378,9380,9382,9384,9386],{"class":835,"line":9377},70,[833,9379,2073],{"class":1373},[833,9381,1013],{"class":843},[833,9383,7267],{"class":912},[833,9385,7559],{"class":847},[833,9387,939],{"class":843},[833,9389,9391,9393,9395,9397,9399],{"class":835,"line":9390},71,[833,9392,3583],{"class":1373},[833,9394,1013],{"class":843},[833,9396,7267],{"class":912},[833,9398,7572],{"class":847},[833,9400,939],{"class":843},[833,9402,9404,9406,9408,9410,9412],{"class":835,"line":9403},72,[833,9405,5583],{"class":1373},[833,9407,1013],{"class":843},[833,9409,7267],{"class":912},[833,9411,7598],{"class":847},[833,9413,939],{"class":843},[833,9415,9417,9419,9421,9423,9425],{"class":835,"line":9416},73,[833,9418,6385],{"class":1373},[833,9420,1013],{"class":843},[833,9422,7267],{"class":912},[833,9424,7611],{"class":847},[833,9426,939],{"class":843},[833,9428,9430,9432,9434],{"class":835,"line":9429},74,[833,9431,969],{"class":843},[833,9433,1433],{"class":847},[833,9435,867],{"class":843},[833,9437,9439],{"class":835,"line":9438},75,[833,9440,896],{"emptyLinePlaceholder":223},[833,9442,9444,9446,9448,9450,9452,9454,9456],{"class":835,"line":9443},76,[833,9445,7522],{"class":912},[833,9447,1185],{"class":847},[833,9449,864],{"class":843},[833,9451,747],{"class":860},[833,9453,864],{"class":843},[833,9455,1031],{"class":843},[833,9457,930],{"class":843},[833,9459,9461,9463,9465,9467,9469],{"class":835,"line":9460},77,[833,9462,936],{"class":1373},[833,9464,1013],{"class":843},[833,9466,7267],{"class":912},[833,9468,9372],{"class":847},[833,9470,939],{"class":843},[833,9472,9474,9476,9478,9480,9483],{"class":835,"line":9473},78,[833,9475,2073],{"class":1373},[833,9477,1013],{"class":843},[833,9479,7267],{"class":912},[833,9481,9482],{"class":847},"(fontSize2xl)",[833,9484,939],{"class":843},[833,9486,9488,9490,9492,9494,9496],{"class":835,"line":9487},79,[833,9489,3583],{"class":1373},[833,9491,1013],{"class":843},[833,9493,7267],{"class":912},[833,9495,7572],{"class":847},[833,9497,939],{"class":843},[833,9499,9501,9503,9505,9507,9509],{"class":835,"line":9500},80,[833,9502,5583],{"class":1373},[833,9504,1013],{"class":843},[833,9506,7267],{"class":912},[833,9508,7598],{"class":847},[833,9510,939],{"class":843},[833,9512,9514,9516,9518,9520,9522],{"class":835,"line":9513},81,[833,9515,6385],{"class":1373},[833,9517,1013],{"class":843},[833,9519,7267],{"class":912},[833,9521,7611],{"class":847},[833,9523,939],{"class":843},[833,9525,9527,9529,9531],{"class":835,"line":9526},82,[833,9528,969],{"class":843},[833,9530,1433],{"class":847},[833,9532,867],{"class":843},[833,9534,9536],{"class":835,"line":9535},83,[833,9537,896],{"emptyLinePlaceholder":223},[833,9539,9541,9543,9545,9547,9549,9551,9553],{"class":835,"line":9540},84,[833,9542,7522],{"class":912},[833,9544,1185],{"class":847},[833,9546,864],{"class":843},[833,9548,808],{"class":860},[833,9550,864],{"class":843},[833,9552,1031],{"class":843},[833,9554,930],{"class":843},[833,9556,9558,9560,9562,9564,9566],{"class":835,"line":9557},85,[833,9559,936],{"class":1373},[833,9561,1013],{"class":843},[833,9563,7267],{"class":912},[833,9565,9372],{"class":847},[833,9567,939],{"class":843},[833,9569,9571,9573,9575,9577,9579],{"class":835,"line":9570},86,[833,9572,2073],{"class":1373},[833,9574,1013],{"class":843},[833,9576,7267],{"class":912},[833,9578,7792],{"class":847},[833,9580,939],{"class":843},[833,9582,9584,9586,9588,9590,9593],{"class":835,"line":9583},87,[833,9585,3583],{"class":1373},[833,9587,1013],{"class":843},[833,9589,7267],{"class":912},[833,9591,9592],{"class":847},"(fontWeightSemibold)",[833,9594,939],{"class":843},[833,9596,9598,9600,9602,9604,9606],{"class":835,"line":9597},88,[833,9599,5583],{"class":1373},[833,9601,1013],{"class":843},[833,9603,7267],{"class":912},[833,9605,7598],{"class":847},[833,9607,939],{"class":843},[833,9609,9611,9613,9615],{"class":835,"line":9610},89,[833,9612,969],{"class":843},[833,9614,1433],{"class":847},[833,9616,867],{"class":843},[833,9618,9620],{"class":835,"line":9619},90,[833,9621,896],{"emptyLinePlaceholder":223},[833,9623,9625,9627,9629,9631,9633,9635,9637],{"class":835,"line":9624},91,[833,9626,7522],{"class":912},[833,9628,1185],{"class":847},[833,9630,864],{"class":843},[833,9632,751],{"class":860},[833,9634,864],{"class":843},[833,9636,1031],{"class":843},[833,9638,930],{"class":843},[833,9640,9642,9644,9646,9648,9650],{"class":835,"line":9641},92,[833,9643,2073],{"class":1373},[833,9645,1013],{"class":843},[833,9647,7267],{"class":912},[833,9649,9287],{"class":847},[833,9651,939],{"class":843},[833,9653,9655,9657,9659,9661,9664],{"class":835,"line":9654},93,[833,9656,5583],{"class":1373},[833,9658,1013],{"class":843},[833,9660,7267],{"class":912},[833,9662,9663],{"class":847},"(lineHeightRelaxed)",[833,9665,939],{"class":843},[833,9667,9669,9671,9673],{"class":835,"line":9668},94,[833,9670,969],{"class":843},[833,9672,1433],{"class":847},[833,9674,867],{"class":843},[833,9676,9678],{"class":835,"line":9677},95,[833,9679,896],{"emptyLinePlaceholder":223},[833,9681,9683,9685,9687,9689,9692,9694,9696],{"class":835,"line":9682},96,[833,9684,7522],{"class":912},[833,9686,1185],{"class":847},[833,9688,864],{"class":843},[833,9690,9691],{"class":860},"small",[833,9693,864],{"class":843},[833,9695,1031],{"class":843},[833,9697,930],{"class":843},[833,9699,9701,9703,9705,9707,9710],{"class":835,"line":9700},97,[833,9702,2073],{"class":1373},[833,9704,1013],{"class":843},[833,9706,7267],{"class":912},[833,9708,9709],{"class":847},"(fontSizeSm)",[833,9711,939],{"class":843},[833,9713,9715,9717,9719,9721,9723],{"class":835,"line":9714},98,[833,9716,5583],{"class":1373},[833,9718,1013],{"class":843},[833,9720,7267],{"class":912},[833,9722,7690],{"class":847},[833,9724,939],{"class":843},[833,9726,9728,9730,9732],{"class":835,"line":9727},99,[833,9729,969],{"class":843},[833,9731,1433],{"class":847},[833,9733,867],{"class":843},[833,9735,9737],{"class":835,"line":9736},100,[833,9738,896],{"emptyLinePlaceholder":223},[833,9740,9742,9744,9746,9748,9750,9752,9754],{"class":835,"line":9741},101,[833,9743,7522],{"class":912},[833,9745,1185],{"class":847},[833,9747,864],{"class":843},[833,9749,697],{"class":860},[833,9751,864],{"class":843},[833,9753,1031],{"class":843},[833,9755,930],{"class":843},[833,9757,9759,9761,9763,9765,9767],{"class":835,"line":9758},102,[833,9760,936],{"class":1373},[833,9762,1013],{"class":843},[833,9764,7267],{"class":912},[833,9766,7778],{"class":847},[833,9768,939],{"class":843},[833,9770,9772,9774,9776,9778,9780],{"class":835,"line":9771},103,[833,9773,2073],{"class":1373},[833,9775,1013],{"class":843},[833,9777,7267],{"class":912},[833,9779,9709],{"class":847},[833,9781,939],{"class":843},[833,9783,9785,9787,9789,9791,9793],{"class":835,"line":9784},104,[833,9786,6385],{"class":1373},[833,9788,1013],{"class":843},[833,9790,7267],{"class":912},[833,9792,7806],{"class":847},[833,9794,939],{"class":843},[833,9796,9798,9800,9802],{"class":835,"line":9797},105,[833,9799,969],{"class":843},[833,9801,1433],{"class":847},[833,9803,867],{"class":843},[833,9805,9807],{"class":835,"line":9806},106,[833,9808,896],{"emptyLinePlaceholder":223},[833,9810,9812,9814,9816,9818,9821,9823,9825],{"class":835,"line":9811},107,[833,9813,7522],{"class":912},[833,9815,1185],{"class":847},[833,9817,864],{"class":843},[833,9819,9820],{"class":860},".lead",[833,9822,864],{"class":843},[833,9824,1031],{"class":843},[833,9826,930],{"class":843},[833,9828,9830,9832,9834,9836,9839],{"class":835,"line":9829},108,[833,9831,2073],{"class":1373},[833,9833,1013],{"class":843},[833,9835,7267],{"class":912},[833,9837,9838],{"class":847},"(fontSizeLg)",[833,9840,939],{"class":843},[833,9842,9844,9846,9848,9850,9853],{"class":835,"line":9843},109,[833,9845,3583],{"class":1373},[833,9847,1013],{"class":843},[833,9849,7267],{"class":912},[833,9851,9852],{"class":847},"(fontWeightMedium)",[833,9854,939],{"class":843},[833,9856,9858,9860,9862,9864,9866],{"class":835,"line":9857},110,[833,9859,5583],{"class":1373},[833,9861,1013],{"class":843},[833,9863,7267],{"class":912},[833,9865,9663],{"class":847},[833,9867,939],{"class":843},[833,9869,9871,9873,9875],{"class":835,"line":9870},111,[833,9872,969],{"class":843},[833,9874,1433],{"class":847},[833,9876,867],{"class":843},[833,9878,9880],{"class":835,"line":9879},112,[833,9881,896],{"emptyLinePlaceholder":223},[833,9883,9885,9887,9889,9891,9894,9896,9898],{"class":835,"line":9884},113,[833,9886,7522],{"class":912},[833,9888,1185],{"class":847},[833,9890,864],{"class":843},[833,9892,9893],{"class":860},".label",[833,9895,864],{"class":843},[833,9897,1031],{"class":843},[833,9899,930],{"class":843},[833,9901,9903,9905,9907,9909,9912],{"class":835,"line":9902},114,[833,9904,2073],{"class":1373},[833,9906,1013],{"class":843},[833,9908,7267],{"class":912},[833,9910,9911],{"class":847},"(fontSizeXs)",[833,9913,939],{"class":843},[833,9915,9917,9919,9921,9923,9925],{"class":835,"line":9916},115,[833,9918,3583],{"class":1373},[833,9920,1013],{"class":843},[833,9922,7267],{"class":912},[833,9924,9852],{"class":847},[833,9926,939],{"class":843},[833,9928,9930,9933,9935,9937,9940,9942],{"class":835,"line":9929},116,[833,9931,9932],{"class":1373},"    textTransform",[833,9934,1013],{"class":843},[833,9936,857],{"class":843},[833,9938,9939],{"class":860},"uppercase",[833,9941,864],{"class":843},[833,9943,939],{"class":843},[833,9945,9947,9949,9951,9953,9955],{"class":835,"line":9946},117,[833,9948,6385],{"class":1373},[833,9950,1013],{"class":843},[833,9952,7267],{"class":912},[833,9954,7806],{"class":847},[833,9956,939],{"class":843},[833,9958,9960,9962,9964],{"class":835,"line":9959},118,[833,9961,969],{"class":843},[833,9963,1433],{"class":847},[833,9965,867],{"class":843},[833,9967,9969],{"class":835,"line":9968},119,[833,9970,896],{"emptyLinePlaceholder":223},[833,9972,9974,9976,9978,9980],{"class":835,"line":9973},120,[833,9975,990],{"class":839},[833,9977,993],{"class":839},[833,9979,996],{"class":847},[833,9981,867],{"class":843},[819,9983,9984],{"icon":154,"label":326},[823,9985,9987],{"className":1003,"code":9986,"filename":1005,"language":1006,"meta":829,"style":829},":root {\n    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n    --font-family--mono: 'JetBrains Mono', 'Fira Code', monospace;\n    --font-family--display: 'Inter', sans-serif;\n    --scale--perfect-fourth: 1.333;\n    --scale: var(--scale--perfect-fourth);\n    --font-size: 1rem;\n    --font-size--xs: calc(var(--font-size) * 1 \u002F var(--scale) \u002F var(--scale));\n    --font-size--sm: calc(var(--font-size) * 1 \u002F var(--scale));\n    --font-size--md: calc(var(--font-size) * 0);\n    --font-size--lg: calc(var(--font-size) * var(--scale));\n    --font-size--xl: calc(var(--font-size) * var(--scale) * var(--scale));\n    --font-size--2xl: calc(var(--font-size) * var(--scale) * var(--scale) * var(--scale));\n    --font-size--3xl: calc(var(--font-size) * var(--scale) * var(--scale) * var(--scale) * var(--scale));\n    --font-weight--normal: normal;\n    --font-weight--medium: 500;\n    --font-weight--semibold: 600;\n    --font-weight--bold: bold;\n    --line-height--tight: 1.2;\n    --line-height--normal: 1.5;\n    --line-height--relaxed: 1.65;\n    --letter-spacing--tight: -0.025em;\n    --letter-spacing--normal: normal;\n    --letter-spacing--wide: 0.05em;\n}\n\nbody {\n    font-family: var(--font-family);\n    font-size: var(--font-size--md);\n    font-weight: var(--font-weight--normal);\n    line-height: var(--line-height--normal);\n    letter-spacing: var(--letter-spacing--normal);\n}\n\nh1 {\n    font-family: var(--font-family--display);\n    font-size: var(--font-size--3xl);\n    font-weight: var(--font-weight--bold);\n    line-height: var(--line-height--tight);\n    letter-spacing: var(--letter-spacing--tight);\n}\n\nh2 {\n    font-family: var(--font-family--display);\n    font-size: var(--font-size--2xl);\n    font-weight: var(--font-weight--bold);\n    line-height: var(--line-height--tight);\n    letter-spacing: var(--letter-spacing--tight);\n}\n\nh3 {\n    font-family: var(--font-family--display);\n    font-size: var(--font-size--xl);\n    font-weight: var(--font-weight--semibold);\n    line-height: var(--line-height--tight);\n}\n\np {\n    font-size: var(--font-size--md);\n    line-height: var(--line-height--relaxed);\n}\n\nsmall {\n    font-size: var(--font-size--sm);\n    line-height: var(--line-height--normal);\n}\n\ncode {\n    font-family: var(--font-family--mono);\n    font-size: var(--font-size--sm);\n    letter-spacing: var(--letter-spacing--wide);\n}\n\n.lead {\n    font-size: var(--font-size--lg);\n    font-weight: var(--font-weight--medium);\n    line-height: var(--line-height--relaxed);\n}\n\n.label {\n    font-size: var(--font-size--xs);\n    font-weight: var(--font-weight--medium);\n    text-transform: uppercase;\n    letter-spacing: var(--letter-spacing--wide);\n}\n",[697,9988,9989,9997,10027,10055,10073,10083,10097,10107,10149,10181,10205,10233,10271,10319,10377,10387,10397,10407,10417,10427,10437,10447,10457,10467,10477,10481,10485,10491,10505,10520,10534,10548,10562,10566,10570,10576,10591,10605,10619,10633,10647,10651,10655,10661,10675,10690,10704,10718,10732,10736,10740,10746,10760,10774,10788,10802,10806,10810,10816,10830,10845,10849,10853,10859,10874,10888,10892,10896,10902,10916,10930,10944,10948,10952,10962,10977,10992,11006,11010,11014,11023,11038,11052,11064,11078],{"__ignoreMap":829},[833,9990,9991,9993,9995],{"class":835,"line":836},[833,9992,1013],{"class":843},[833,9994,1016],{"class":902},[833,9996,930],{"class":843},[833,9998,9999,10001,10003,10005,10007,10009,10011,10013,10015,10017,10019,10021,10023,10025],{"class":835,"line":870},[833,10000,1177],{"class":847},[833,10002,1013],{"class":843},[833,10004,1028],{"class":847},[833,10006,1031],{"class":843},[833,10008,1034],{"class":847},[833,10010,1031],{"class":843},[833,10012,857],{"class":843},[833,10014,1041],{"class":860},[833,10016,864],{"class":843},[833,10018,1031],{"class":843},[833,10020,1048],{"class":847},[833,10022,1031],{"class":843},[833,10024,1077],{"class":847},[833,10026,867],{"class":843},[833,10028,10029,10031,10033,10035,10038,10040,10042,10044,10047,10049,10051,10053],{"class":835,"line":893},[833,10030,1123],{"class":847},[833,10032,1013],{"class":843},[833,10034,857],{"class":843},[833,10036,10037],{"class":860},"JetBrains Mono",[833,10039,864],{"class":843},[833,10041,1031],{"class":843},[833,10043,857],{"class":843},[833,10045,10046],{"class":860},"Fira Code",[833,10048,864],{"class":843},[833,10050,1031],{"class":843},[833,10052,1170],{"class":847},[833,10054,867],{"class":843},[833,10056,10057,10059,10061,10063,10065,10067,10069,10071],{"class":835,"line":899},[833,10058,1938],{"class":847},[833,10060,1013],{"class":843},[833,10062,857],{"class":843},[833,10064,1945],{"class":860},[833,10066,864],{"class":843},[833,10068,1031],{"class":843},[833,10070,1077],{"class":847},[833,10072,867],{"class":843},[833,10074,10075,10077,10079,10081],{"class":835,"line":920},[833,10076,2930],{"class":847},[833,10078,1013],{"class":843},[833,10080,2935],{"class":2274},[833,10082,867],{"class":843},[833,10084,10085,10087,10089,10091,10093,10095],{"class":835,"line":925},[833,10086,2942],{"class":847},[833,10088,1013],{"class":843},[833,10090,1182],{"class":912},[833,10092,1185],{"class":843},[833,10094,2951],{"class":847},[833,10096,1191],{"class":843},[833,10098,10099,10101,10103,10105],{"class":835,"line":933},[833,10100,2269],{"class":847},[833,10102,1013],{"class":843},[833,10104,2275],{"class":2274},[833,10106,867],{"class":843},[833,10108,10109,10111,10113,10115,10117,10119,10121,10123,10125,10127,10129,10131,10133,10135,10137,10139,10141,10143,10145,10147],{"class":835,"line":942},[833,10110,2282],{"class":847},[833,10112,1013],{"class":843},[833,10114,2963],{"class":912},[833,10116,1185],{"class":843},[833,10118,3053],{"class":912},[833,10120,1185],{"class":843},[833,10122,3244],{"class":847},[833,10124,1433],{"class":843},[833,10126,3062],{"class":843},[833,10128,2602],{"class":2274},[833,10130,2970],{"class":843},[833,10132,1182],{"class":912},[833,10134,1185],{"class":843},[833,10136,2977],{"class":847},[833,10138,1433],{"class":843},[833,10140,2970],{"class":843},[833,10142,1182],{"class":912},[833,10144,1185],{"class":843},[833,10146,2977],{"class":847},[833,10148,2990],{"class":843},[833,10150,10151,10153,10155,10157,10159,10161,10163,10165,10167,10169,10171,10173,10175,10177,10179],{"class":835,"line":950},[833,10152,2294],{"class":847},[833,10154,1013],{"class":843},[833,10156,2963],{"class":912},[833,10158,1185],{"class":843},[833,10160,3053],{"class":912},[833,10162,1185],{"class":843},[833,10164,3244],{"class":847},[833,10166,1433],{"class":843},[833,10168,3062],{"class":843},[833,10170,2602],{"class":2274},[833,10172,2970],{"class":843},[833,10174,1182],{"class":912},[833,10176,1185],{"class":843},[833,10178,2977],{"class":847},[833,10180,2990],{"class":843},[833,10182,10183,10185,10187,10189,10191,10193,10195,10197,10199,10201,10203],{"class":835,"line":958},[833,10184,2306],{"class":847},[833,10186,1013],{"class":843},[833,10188,2963],{"class":912},[833,10190,1185],{"class":843},[833,10192,3053],{"class":912},[833,10194,1185],{"class":843},[833,10196,3244],{"class":847},[833,10198,1433],{"class":843},[833,10200,3062],{"class":843},[833,10202,2597],{"class":2274},[833,10204,1191],{"class":843},[833,10206,10207,10209,10211,10213,10215,10217,10219,10221,10223,10225,10227,10229,10231],{"class":835,"line":966},[833,10208,2317],{"class":847},[833,10210,1013],{"class":843},[833,10212,2963],{"class":912},[833,10214,1185],{"class":843},[833,10216,3053],{"class":912},[833,10218,1185],{"class":843},[833,10220,3244],{"class":847},[833,10222,1433],{"class":843},[833,10224,3062],{"class":843},[833,10226,1182],{"class":912},[833,10228,1185],{"class":843},[833,10230,2977],{"class":847},[833,10232,2990],{"class":843},[833,10234,10235,10237,10239,10241,10243,10245,10247,10249,10251,10253,10255,10257,10259,10261,10263,10265,10267,10269],{"class":835,"line":982},[833,10236,2329],{"class":847},[833,10238,1013],{"class":843},[833,10240,2963],{"class":912},[833,10242,1185],{"class":843},[833,10244,3053],{"class":912},[833,10246,1185],{"class":843},[833,10248,3244],{"class":847},[833,10250,1433],{"class":843},[833,10252,3062],{"class":843},[833,10254,1182],{"class":912},[833,10256,1185],{"class":843},[833,10258,2977],{"class":847},[833,10260,1433],{"class":843},[833,10262,3062],{"class":843},[833,10264,1182],{"class":912},[833,10266,1185],{"class":843},[833,10268,2977],{"class":847},[833,10270,2990],{"class":843},[833,10272,10273,10275,10277,10279,10281,10283,10285,10287,10289,10291,10293,10295,10297,10299,10301,10303,10305,10307,10309,10311,10313,10315,10317],{"class":835,"line":987},[833,10274,3378],{"class":847},[833,10276,1013],{"class":843},[833,10278,2963],{"class":912},[833,10280,1185],{"class":843},[833,10282,3053],{"class":912},[833,10284,1185],{"class":843},[833,10286,3244],{"class":847},[833,10288,1433],{"class":843},[833,10290,3062],{"class":843},[833,10292,1182],{"class":912},[833,10294,1185],{"class":843},[833,10296,2977],{"class":847},[833,10298,1433],{"class":843},[833,10300,3062],{"class":843},[833,10302,1182],{"class":912},[833,10304,1185],{"class":843},[833,10306,2977],{"class":847},[833,10308,1433],{"class":843},[833,10310,3062],{"class":843},[833,10312,1182],{"class":912},[833,10314,1185],{"class":843},[833,10316,2977],{"class":847},[833,10318,2990],{"class":843},[833,10320,10321,10323,10325,10327,10329,10331,10333,10335,10337,10339,10341,10343,10345,10347,10349,10351,10353,10355,10357,10359,10361,10363,10365,10367,10369,10371,10373,10375],{"class":835,"line":1422},[833,10322,3408],{"class":847},[833,10324,1013],{"class":843},[833,10326,2963],{"class":912},[833,10328,1185],{"class":843},[833,10330,3053],{"class":912},[833,10332,1185],{"class":843},[833,10334,3244],{"class":847},[833,10336,1433],{"class":843},[833,10338,3062],{"class":843},[833,10340,1182],{"class":912},[833,10342,1185],{"class":843},[833,10344,2977],{"class":847},[833,10346,1433],{"class":843},[833,10348,3062],{"class":843},[833,10350,1182],{"class":912},[833,10352,1185],{"class":843},[833,10354,2977],{"class":847},[833,10356,1433],{"class":843},[833,10358,3062],{"class":843},[833,10360,1182],{"class":912},[833,10362,1185],{"class":843},[833,10364,2977],{"class":847},[833,10366,1433],{"class":843},[833,10368,3062],{"class":843},[833,10370,1182],{"class":912},[833,10372,1185],{"class":843},[833,10374,2977],{"class":847},[833,10376,2990],{"class":843},[833,10378,10379,10381,10383,10385],{"class":835,"line":1438},[833,10380,3725],{"class":847},[833,10382,1013],{"class":843},[833,10384,3730],{"class":847},[833,10386,867],{"class":843},[833,10388,10389,10391,10393,10395],{"class":835,"line":1443},[833,10390,3737],{"class":847},[833,10392,1013],{"class":843},[833,10394,3742],{"class":2274},[833,10396,867],{"class":843},[833,10398,10399,10401,10403,10405],{"class":835,"line":1780},[833,10400,3749],{"class":847},[833,10402,1013],{"class":843},[833,10404,3754],{"class":2274},[833,10406,867],{"class":843},[833,10408,10409,10411,10413,10415],{"class":835,"line":2189},[833,10410,3761],{"class":847},[833,10412,1013],{"class":843},[833,10414,3766],{"class":847},[833,10416,867],{"class":843},[833,10418,10419,10421,10423,10425],{"class":835,"line":2206},[833,10420,5666],{"class":847},[833,10422,1013],{"class":843},[833,10424,5671],{"class":2274},[833,10426,867],{"class":843},[833,10428,10429,10431,10433,10435],{"class":835,"line":2223},[833,10430,5690],{"class":847},[833,10432,1013],{"class":843},[833,10434,5695],{"class":2274},[833,10436,867],{"class":843},[833,10438,10439,10441,10443,10445],{"class":835,"line":2236},[833,10440,5702],{"class":847},[833,10442,1013],{"class":843},[833,10444,5707],{"class":2274},[833,10446,867],{"class":843},[833,10448,10449,10451,10453,10455],{"class":835,"line":2241},[833,10450,6480],{"class":847},[833,10452,1013],{"class":843},[833,10454,6485],{"class":2274},[833,10456,867],{"class":843},[833,10458,10459,10461,10463,10465],{"class":835,"line":2682},[833,10460,6492],{"class":847},[833,10462,1013],{"class":843},[833,10464,3730],{"class":847},[833,10466,867],{"class":843},[833,10468,10469,10471,10473,10475],{"class":835,"line":2690},[833,10470,6503],{"class":847},[833,10472,1013],{"class":843},[833,10474,6508],{"class":2274},[833,10476,867],{"class":843},[833,10478,10479],{"class":835,"line":2698},[833,10480,1196],{"class":843},[833,10482,10483],{"class":835,"line":2718},[833,10484,896],{"emptyLinePlaceholder":223},[833,10486,10487,10489],{"class":835,"line":2740},[833,10488,7636],{"class":8230},[833,10490,930],{"class":843},[833,10492,10493,10495,10497,10499,10501,10503],{"class":835,"line":2760},[833,10494,8238],{"class":8237},[833,10496,1013],{"class":843},[833,10498,1182],{"class":912},[833,10500,1185],{"class":843},[833,10502,1249],{"class":847},[833,10504,1191],{"class":843},[833,10506,10507,10509,10511,10513,10515,10518],{"class":835,"line":2779},[833,10508,8253],{"class":8237},[833,10510,1013],{"class":843},[833,10512,1182],{"class":912},[833,10514,1185],{"class":843},[833,10516,10517],{"class":847},"--font-size--md",[833,10519,1191],{"class":843},[833,10521,10522,10524,10526,10528,10530,10532],{"class":835,"line":2797},[833,10523,8269],{"class":8237},[833,10525,1013],{"class":843},[833,10527,1182],{"class":912},[833,10529,1185],{"class":843},[833,10531,3830],{"class":847},[833,10533,1191],{"class":843},[833,10535,10536,10538,10540,10542,10544,10546],{"class":835,"line":2815},[833,10537,8300],{"class":8237},[833,10539,1013],{"class":843},[833,10541,1182],{"class":912},[833,10543,1185],{"class":843},[833,10545,5735],{"class":847},[833,10547,1191],{"class":843},[833,10549,10550,10552,10554,10556,10558,10560],{"class":835,"line":2840},[833,10551,8316],{"class":8237},[833,10553,1013],{"class":843},[833,10555,1182],{"class":912},[833,10557,1185],{"class":843},[833,10559,6536],{"class":847},[833,10561,1191],{"class":843},[833,10563,10564],{"class":835,"line":2864},[833,10565,1196],{"class":843},[833,10567,10568],{"class":835,"line":2888},[833,10569,896],{"emptyLinePlaceholder":223},[833,10571,10572,10574],{"class":835,"line":2897},[833,10573,7529],{"class":8230},[833,10575,930],{"class":843},[833,10577,10578,10580,10582,10584,10586,10589],{"class":835,"line":2902},[833,10579,8238],{"class":8237},[833,10581,1013],{"class":843},[833,10583,1182],{"class":912},[833,10585,1185],{"class":843},[833,10587,10588],{"class":847},"--font-family--display",[833,10590,1191],{"class":843},[833,10592,10593,10595,10597,10599,10601,10603],{"class":835,"line":7724},[833,10594,8253],{"class":8237},[833,10596,1013],{"class":843},[833,10598,1182],{"class":912},[833,10600,1185],{"class":843},[833,10602,8262],{"class":847},[833,10604,1191],{"class":843},[833,10606,10607,10609,10611,10613,10615,10617],{"class":835,"line":7738},[833,10608,8269],{"class":8237},[833,10610,1013],{"class":843},[833,10612,1182],{"class":912},[833,10614,1185],{"class":843},[833,10616,8278],{"class":847},[833,10618,1191],{"class":843},[833,10620,10621,10623,10625,10627,10629,10631],{"class":835,"line":7747},[833,10622,8300],{"class":8237},[833,10624,1013],{"class":843},[833,10626,1182],{"class":912},[833,10628,1185],{"class":843},[833,10630,8309],{"class":847},[833,10632,1191],{"class":843},[833,10634,10635,10637,10639,10641,10643,10645],{"class":835,"line":7752},[833,10636,8316],{"class":8237},[833,10638,1013],{"class":843},[833,10640,1182],{"class":912},[833,10642,1185],{"class":843},[833,10644,8325],{"class":847},[833,10646,1191],{"class":843},[833,10648,10649],{"class":835,"line":7769},[833,10650,1196],{"class":843},[833,10652,10653],{"class":835,"line":7783},[833,10654,896],{"emptyLinePlaceholder":223},[833,10656,10657,10659],{"class":835,"line":7797},[833,10658,747],{"class":8230},[833,10660,930],{"class":843},[833,10662,10663,10665,10667,10669,10671,10673],{"class":835,"line":7811},[833,10664,8238],{"class":8237},[833,10666,1013],{"class":843},[833,10668,1182],{"class":912},[833,10670,1185],{"class":843},[833,10672,10588],{"class":847},[833,10674,1191],{"class":843},[833,10676,10677,10679,10681,10683,10685,10688],{"class":835,"line":7820},[833,10678,8253],{"class":8237},[833,10680,1013],{"class":843},[833,10682,1182],{"class":912},[833,10684,1185],{"class":843},[833,10686,10687],{"class":847},"--font-size--2xl",[833,10689,1191],{"class":843},[833,10691,10692,10694,10696,10698,10700,10702],{"class":835,"line":7825},[833,10693,8269],{"class":8237},[833,10695,1013],{"class":843},[833,10697,1182],{"class":912},[833,10699,1185],{"class":843},[833,10701,8278],{"class":847},[833,10703,1191],{"class":843},[833,10705,10706,10708,10710,10712,10714,10716],{"class":835,"line":8419},[833,10707,8300],{"class":8237},[833,10709,1013],{"class":843},[833,10711,1182],{"class":912},[833,10713,1185],{"class":843},[833,10715,8309],{"class":847},[833,10717,1191],{"class":843},[833,10719,10720,10722,10724,10726,10728,10730],{"class":835,"line":8434},[833,10721,8316],{"class":8237},[833,10723,1013],{"class":843},[833,10725,1182],{"class":912},[833,10727,1185],{"class":843},[833,10729,8325],{"class":847},[833,10731,1191],{"class":843},[833,10733,10734],{"class":835,"line":8439},[833,10735,1196],{"class":843},[833,10737,10738],{"class":835,"line":8444},[833,10739,896],{"emptyLinePlaceholder":223},[833,10741,10742,10744],{"class":835,"line":8451},[833,10743,808],{"class":8230},[833,10745,930],{"class":843},[833,10747,10748,10750,10752,10754,10756,10758],{"class":835,"line":8467},[833,10749,8238],{"class":8237},[833,10751,1013],{"class":843},[833,10753,1182],{"class":912},[833,10755,1185],{"class":843},[833,10757,10588],{"class":847},[833,10759,1191],{"class":843},[833,10761,10762,10764,10766,10768,10770,10772],{"class":835,"line":8483},[833,10763,8253],{"class":8237},[833,10765,1013],{"class":843},[833,10767,1182],{"class":912},[833,10769,1185],{"class":843},[833,10771,8478],{"class":847},[833,10773,1191],{"class":843},[833,10775,10776,10778,10780,10782,10784,10786],{"class":835,"line":8499},[833,10777,8269],{"class":8237},[833,10779,1013],{"class":843},[833,10781,1182],{"class":912},[833,10783,1185],{"class":843},[833,10785,4498],{"class":847},[833,10787,1191],{"class":843},[833,10789,10790,10792,10794,10796,10798,10800],{"class":835,"line":9199},[833,10791,8300],{"class":8237},[833,10793,1013],{"class":843},[833,10795,1182],{"class":912},[833,10797,1185],{"class":843},[833,10799,8309],{"class":847},[833,10801,1191],{"class":843},[833,10803,10804],{"class":835,"line":9204},[833,10805,1196],{"class":843},[833,10807,10808],{"class":835,"line":9210},[833,10809,896],{"emptyLinePlaceholder":223},[833,10811,10812,10814],{"class":835,"line":9238},[833,10813,751],{"class":8230},[833,10815,930],{"class":843},[833,10817,10818,10820,10822,10824,10826,10828],{"class":835,"line":9243},[833,10819,8253],{"class":8237},[833,10821,1013],{"class":843},[833,10823,1182],{"class":912},[833,10825,1185],{"class":843},[833,10827,10517],{"class":847},[833,10829,1191],{"class":843},[833,10831,10832,10834,10836,10838,10840,10843],{"class":835,"line":9248},[833,10833,8300],{"class":8237},[833,10835,1013],{"class":843},[833,10837,1182],{"class":912},[833,10839,1185],{"class":843},[833,10841,10842],{"class":847},"--line-height--relaxed",[833,10844,1191],{"class":843},[833,10846,10847],{"class":835,"line":9265},[833,10848,1196],{"class":843},[833,10850,10851],{"class":835,"line":9278},[833,10852,896],{"emptyLinePlaceholder":223},[833,10854,10855,10857],{"class":835,"line":9292},[833,10856,9691],{"class":8230},[833,10858,930],{"class":843},[833,10860,10861,10863,10865,10867,10869,10872],{"class":835,"line":9305},[833,10862,8253],{"class":8237},[833,10864,1013],{"class":843},[833,10866,1182],{"class":912},[833,10868,1185],{"class":843},[833,10870,10871],{"class":847},"--font-size--sm",[833,10873,1191],{"class":843},[833,10875,10876,10878,10880,10882,10884,10886],{"class":835,"line":9318},[833,10877,8300],{"class":8237},[833,10879,1013],{"class":843},[833,10881,1182],{"class":912},[833,10883,1185],{"class":843},[833,10885,5735],{"class":847},[833,10887,1191],{"class":843},[833,10889,10890],{"class":835,"line":9332},[833,10891,1196],{"class":843},[833,10893,10894],{"class":835,"line":9341},[833,10895,896],{"emptyLinePlaceholder":223},[833,10897,10898,10900],{"class":835,"line":9346},[833,10899,697],{"class":8230},[833,10901,930],{"class":843},[833,10903,10904,10906,10908,10910,10912,10914],{"class":835,"line":9363},[833,10905,8238],{"class":8237},[833,10907,1013],{"class":843},[833,10909,1182],{"class":912},[833,10911,1185],{"class":843},[833,10913,8462],{"class":847},[833,10915,1191],{"class":843},[833,10917,10918,10920,10922,10924,10926,10928],{"class":835,"line":9377},[833,10919,8253],{"class":8237},[833,10921,1013],{"class":843},[833,10923,1182],{"class":912},[833,10925,1185],{"class":843},[833,10927,10871],{"class":847},[833,10929,1191],{"class":843},[833,10931,10932,10934,10936,10938,10940,10942],{"class":835,"line":9390},[833,10933,8316],{"class":8237},[833,10935,1013],{"class":843},[833,10937,1182],{"class":912},[833,10939,1185],{"class":843},[833,10941,8494],{"class":847},[833,10943,1191],{"class":843},[833,10945,10946],{"class":835,"line":9403},[833,10947,1196],{"class":843},[833,10949,10950],{"class":835,"line":9416},[833,10951,896],{"emptyLinePlaceholder":223},[833,10953,10954,10957,10960],{"class":835,"line":9429},[833,10955,10956],{"class":843},".",[833,10958,10959],{"class":8230},"lead",[833,10961,930],{"class":843},[833,10963,10964,10966,10968,10970,10972,10975],{"class":835,"line":9438},[833,10965,8253],{"class":8237},[833,10967,1013],{"class":843},[833,10969,1182],{"class":912},[833,10971,1185],{"class":843},[833,10973,10974],{"class":847},"--font-size--lg",[833,10976,1191],{"class":843},[833,10978,10979,10981,10983,10985,10987,10990],{"class":835,"line":9443},[833,10980,8269],{"class":8237},[833,10982,1013],{"class":843},[833,10984,1182],{"class":912},[833,10986,1185],{"class":843},[833,10988,10989],{"class":847},"--font-weight--medium",[833,10991,1191],{"class":843},[833,10993,10994,10996,10998,11000,11002,11004],{"class":835,"line":9460},[833,10995,8300],{"class":8237},[833,10997,1013],{"class":843},[833,10999,1182],{"class":912},[833,11001,1185],{"class":843},[833,11003,10842],{"class":847},[833,11005,1191],{"class":843},[833,11007,11008],{"class":835,"line":9473},[833,11009,1196],{"class":843},[833,11011,11012],{"class":835,"line":9487},[833,11013,896],{"emptyLinePlaceholder":223},[833,11015,11016,11018,11021],{"class":835,"line":9500},[833,11017,10956],{"class":843},[833,11019,11020],{"class":8230},"label",[833,11022,930],{"class":843},[833,11024,11025,11027,11029,11031,11033,11036],{"class":835,"line":9513},[833,11026,8253],{"class":8237},[833,11028,1013],{"class":843},[833,11030,1182],{"class":912},[833,11032,1185],{"class":843},[833,11034,11035],{"class":847},"--font-size--xs",[833,11037,1191],{"class":843},[833,11039,11040,11042,11044,11046,11048,11050],{"class":835,"line":9526},[833,11041,8269],{"class":8237},[833,11043,1013],{"class":843},[833,11045,1182],{"class":912},[833,11047,1185],{"class":843},[833,11049,10989],{"class":847},[833,11051,1191],{"class":843},[833,11053,11054,11057,11059,11062],{"class":835,"line":9535},[833,11055,11056],{"class":8237},"    text-transform",[833,11058,1013],{"class":843},[833,11060,11061],{"class":847}," uppercase",[833,11063,867],{"class":843},[833,11065,11066,11068,11070,11072,11074,11076],{"class":835,"line":9540},[833,11067,8316],{"class":8237},[833,11069,1013],{"class":843},[833,11071,1182],{"class":912},[833,11073,1185],{"class":843},[833,11075,8494],{"class":847},[833,11077,1191],{"class":843},[833,11079,11080],{"class":835,"line":9557},[833,11081,1196],{"class":843},[808,11083,11085],{"id":11084},"responsive-typography","Responsive Typography",[751,11087,11088],{},"Adjust typography variables at different breakpoints for optimal readability:",[816,11090,11091,11509],{},[819,11092,11093],{"icon":821,"label":290},[823,11094,11096],{"className":825,"code":11095,"filename":827,"language":828,"meta":829,"style":829},"import { styleframe } from 'styleframe';\nimport { useFontSizeDesignTokens, useLineHeightDesignTokens } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\nconst { ref, selector, variable, media } = s;\n\nconst { fontSize } = useFontSizeDesignTokens(s, { default: '1rem' });\nconst { lineHeight } = useLineHeightDesignTokens(s);\n\nselector('body', {\n    fontSize: ref(fontSize),\n    lineHeight: ref(lineHeight),\n});\n\n\u002F\u002F Increase base font size on larger screens\nselector('body', ({ media }) => {\n    media('(min-width: 768px)', ({ variable }) => {\n        variable(fontSize, '1.125rem');\n    });\n});\n\nselector('body', ({ media }) => {\n    media('(min-width: 1200px)', ({ variable }) => {\n        variable(fontSize, '1.25rem');\n    });\n});\n\nexport default s;\n",[697,11097,11098,11118,11142,11146,11160,11191,11195,11231,11249,11253,11269,11282,11295,11303,11307,11312,11341,11367,11389,11398,11406,11410,11434,11459,11479,11487,11495,11499],{"__ignoreMap":829},[833,11099,11100,11102,11104,11106,11108,11110,11112,11114,11116],{"class":835,"line":836},[833,11101,840],{"class":839},[833,11103,844],{"class":843},[833,11105,848],{"class":847},[833,11107,851],{"class":843},[833,11109,854],{"class":839},[833,11111,857],{"class":843},[833,11113,861],{"class":860},[833,11115,864],{"class":843},[833,11117,867],{"class":843},[833,11119,11120,11122,11124,11126,11128,11130,11132,11134,11136,11138,11140],{"class":835,"line":870},[833,11121,840],{"class":839},[833,11123,844],{"class":843},[833,11125,2028],{"class":847},[833,11127,1031],{"class":843},[833,11129,5538],{"class":847},[833,11131,851],{"class":843},[833,11133,854],{"class":839},[833,11135,857],{"class":843},[833,11137,886],{"class":860},[833,11139,864],{"class":843},[833,11141,867],{"class":843},[833,11143,11144],{"class":835,"line":893},[833,11145,896],{"emptyLinePlaceholder":223},[833,11147,11148,11150,11152,11154,11156,11158],{"class":835,"line":899},[833,11149,903],{"class":902},[833,11151,906],{"class":847},[833,11153,909],{"class":843},[833,11155,848],{"class":912},[833,11157,915],{"class":847},[833,11159,867],{"class":843},[833,11161,11162,11164,11166,11168,11170,11173,11175,11178,11180,11183,11185,11187,11189],{"class":835,"line":920},[833,11163,903],{"class":902},[833,11165,844],{"class":843},[833,11167,7267],{"class":847},[833,11169,1031],{"class":843},[833,11171,11172],{"class":847}," selector",[833,11174,1031],{"class":843},[833,11176,11177],{"class":847}," variable",[833,11179,1031],{"class":843},[833,11181,11182],{"class":847}," media ",[833,11184,969],{"class":843},[833,11186,972],{"class":843},[833,11188,996],{"class":847},[833,11190,867],{"class":843},[833,11192,11193],{"class":835,"line":925},[833,11194,896],{"emptyLinePlaceholder":223},[833,11196,11197,11199,11201,11203,11205,11207,11209,11211,11213,11215,11217,11219,11221,11223,11225,11227,11229],{"class":835,"line":933},[833,11198,903],{"class":902},[833,11200,844],{"class":843},[833,11202,2518],{"class":847},[833,11204,969],{"class":843},[833,11206,972],{"class":843},[833,11208,2028],{"class":912},[833,11210,1364],{"class":847},[833,11212,1031],{"class":843},[833,11214,844],{"class":843},[833,11216,993],{"class":1373},[833,11218,1013],{"class":843},[833,11220,857],{"class":843},[833,11222,2135],{"class":860},[833,11224,864],{"class":843},[833,11226,851],{"class":843},[833,11228,1433],{"class":847},[833,11230,867],{"class":843},[833,11232,11233,11235,11237,11239,11241,11243,11245,11247],{"class":835,"line":942},[833,11234,903],{"class":902},[833,11236,844],{"class":843},[833,11238,6161],{"class":847},[833,11240,969],{"class":843},[833,11242,972],{"class":843},[833,11244,5538],{"class":912},[833,11246,977],{"class":847},[833,11248,867],{"class":843},[833,11250,11251],{"class":835,"line":950},[833,11252,896],{"emptyLinePlaceholder":223},[833,11254,11255,11257,11259,11261,11263,11265,11267],{"class":835,"line":958},[833,11256,7522],{"class":912},[833,11258,1185],{"class":847},[833,11260,864],{"class":843},[833,11262,7636],{"class":860},[833,11264,864],{"class":843},[833,11266,1031],{"class":843},[833,11268,930],{"class":843},[833,11270,11271,11273,11275,11277,11280],{"class":835,"line":966},[833,11272,2073],{"class":1373},[833,11274,1013],{"class":843},[833,11276,7267],{"class":912},[833,11278,11279],{"class":847},"(fontSize)",[833,11281,939],{"class":843},[833,11283,11284,11286,11288,11290,11293],{"class":835,"line":982},[833,11285,5583],{"class":1373},[833,11287,1013],{"class":843},[833,11289,7267],{"class":912},[833,11291,11292],{"class":847},"(lineHeight)",[833,11294,939],{"class":843},[833,11296,11297,11299,11301],{"class":835,"line":987},[833,11298,969],{"class":843},[833,11300,1433],{"class":847},[833,11302,867],{"class":843},[833,11304,11305],{"class":835,"line":1422},[833,11306,896],{"emptyLinePlaceholder":223},[833,11308,11309],{"class":835,"line":1438},[833,11310,11311],{"class":2453},"\u002F\u002F Increase base font size on larger screens\n",[833,11313,11314,11316,11318,11320,11322,11324,11326,11329,11333,11336,11339],{"class":835,"line":1443},[833,11315,7522],{"class":912},[833,11317,1185],{"class":847},[833,11319,864],{"class":843},[833,11321,7636],{"class":860},[833,11323,864],{"class":843},[833,11325,1031],{"class":843},[833,11327,11328],{"class":843}," ({",[833,11330,11332],{"class":11331},"sHdIc"," media",[833,11334,11335],{"class":843}," })",[833,11337,11338],{"class":902}," =>",[833,11340,930],{"class":843},[833,11342,11343,11346,11348,11350,11353,11355,11357,11359,11361,11363,11365],{"class":835,"line":1780},[833,11344,11345],{"class":912},"    media",[833,11347,1185],{"class":1373},[833,11349,864],{"class":843},[833,11351,11352],{"class":860},"(min-width: 768px)",[833,11354,864],{"class":843},[833,11356,1031],{"class":843},[833,11358,11328],{"class":843},[833,11360,11177],{"class":11331},[833,11362,11335],{"class":843},[833,11364,11338],{"class":902},[833,11366,930],{"class":843},[833,11368,11369,11372,11374,11376,11378,11380,11383,11385,11387],{"class":835,"line":2189},[833,11370,11371],{"class":912},"        variable",[833,11373,1185],{"class":1373},[833,11375,732],{"class":847},[833,11377,1031],{"class":843},[833,11379,857],{"class":843},[833,11381,11382],{"class":860},"1.125rem",[833,11384,864],{"class":843},[833,11386,1433],{"class":1373},[833,11388,867],{"class":843},[833,11390,11391,11394,11396],{"class":835,"line":2206},[833,11392,11393],{"class":843},"    }",[833,11395,1433],{"class":1373},[833,11397,867],{"class":843},[833,11399,11400,11402,11404],{"class":835,"line":2223},[833,11401,969],{"class":843},[833,11403,1433],{"class":847},[833,11405,867],{"class":843},[833,11407,11408],{"class":835,"line":2236},[833,11409,896],{"emptyLinePlaceholder":223},[833,11411,11412,11414,11416,11418,11420,11422,11424,11426,11428,11430,11432],{"class":835,"line":2241},[833,11413,7522],{"class":912},[833,11415,1185],{"class":847},[833,11417,864],{"class":843},[833,11419,7636],{"class":860},[833,11421,864],{"class":843},[833,11423,1031],{"class":843},[833,11425,11328],{"class":843},[833,11427,11332],{"class":11331},[833,11429,11335],{"class":843},[833,11431,11338],{"class":902},[833,11433,930],{"class":843},[833,11435,11436,11438,11440,11442,11445,11447,11449,11451,11453,11455,11457],{"class":835,"line":2682},[833,11437,11345],{"class":912},[833,11439,1185],{"class":1373},[833,11441,864],{"class":843},[833,11443,11444],{"class":860},"(min-width: 1200px)",[833,11446,864],{"class":843},[833,11448,1031],{"class":843},[833,11450,11328],{"class":843},[833,11452,11177],{"class":11331},[833,11454,11335],{"class":843},[833,11456,11338],{"class":902},[833,11458,930],{"class":843},[833,11460,11461,11463,11465,11467,11469,11471,11473,11475,11477],{"class":835,"line":2690},[833,11462,11371],{"class":912},[833,11464,1185],{"class":1373},[833,11466,732],{"class":847},[833,11468,1031],{"class":843},[833,11470,857],{"class":843},[833,11472,2199],{"class":860},[833,11474,864],{"class":843},[833,11476,1433],{"class":1373},[833,11478,867],{"class":843},[833,11480,11481,11483,11485],{"class":835,"line":2698},[833,11482,11393],{"class":843},[833,11484,1433],{"class":1373},[833,11486,867],{"class":843},[833,11488,11489,11491,11493],{"class":835,"line":2718},[833,11490,969],{"class":843},[833,11492,1433],{"class":847},[833,11494,867],{"class":843},[833,11496,11497],{"class":835,"line":2740},[833,11498,896],{"emptyLinePlaceholder":223},[833,11500,11501,11503,11505,11507],{"class":835,"line":2760},[833,11502,990],{"class":839},[833,11504,993],{"class":839},[833,11506,996],{"class":847},[833,11508,867],{"class":843},[819,11510,11511],{"icon":154,"label":326},[823,11512,11514],{"className":1003,"code":11513,"filename":1005,"language":1006,"meta":829,"style":829},":root {\n    --font-size: 1rem;\n    --line-height--tight: 1.2;\n    --line-height--snug: 1.35;\n    --line-height--normal: 1.5;\n    --line-height--relaxed: 1.65;\n    --line-height--loose: 1.9;\n    --line-height: var(--line-height--normal);\n}\n\nbody {\n    font-size: var(--font-size);\n    line-height: var(--line-height);\n}\n\nbody {\n    @media (min-width: 768px) {\n        --font-size: 1.125rem;\n    }\n}\n\nbody {\n    @media (min-width: 1200px) {\n        --font-size: 1.25rem;\n    }\n}\n",[697,11515,11516,11524,11534,11544,11554,11564,11574,11584,11598,11602,11606,11612,11626,11641,11645,11649,11655,11671,11683,11688,11692,11696,11702,11715,11725,11729],{"__ignoreMap":829},[833,11517,11518,11520,11522],{"class":835,"line":836},[833,11519,1013],{"class":843},[833,11521,1016],{"class":902},[833,11523,930],{"class":843},[833,11525,11526,11528,11530,11532],{"class":835,"line":870},[833,11527,2269],{"class":847},[833,11529,1013],{"class":843},[833,11531,2275],{"class":2274},[833,11533,867],{"class":843},[833,11535,11536,11538,11540,11542],{"class":835,"line":893},[833,11537,5666],{"class":847},[833,11539,1013],{"class":843},[833,11541,5671],{"class":2274},[833,11543,867],{"class":843},[833,11545,11546,11548,11550,11552],{"class":835,"line":899},[833,11547,5678],{"class":847},[833,11549,1013],{"class":843},[833,11551,5683],{"class":2274},[833,11553,867],{"class":843},[833,11555,11556,11558,11560,11562],{"class":835,"line":920},[833,11557,5690],{"class":847},[833,11559,1013],{"class":843},[833,11561,5695],{"class":2274},[833,11563,867],{"class":843},[833,11565,11566,11568,11570,11572],{"class":835,"line":925},[833,11567,5702],{"class":847},[833,11569,1013],{"class":843},[833,11571,5707],{"class":2274},[833,11573,867],{"class":843},[833,11575,11576,11578,11580,11582],{"class":835,"line":933},[833,11577,5714],{"class":847},[833,11579,1013],{"class":843},[833,11581,5719],{"class":2274},[833,11583,867],{"class":843},[833,11585,11586,11588,11590,11592,11594,11596],{"class":835,"line":942},[833,11587,5726],{"class":847},[833,11589,1013],{"class":843},[833,11591,1182],{"class":912},[833,11593,1185],{"class":843},[833,11595,5735],{"class":847},[833,11597,1191],{"class":843},[833,11599,11600],{"class":835,"line":950},[833,11601,1196],{"class":843},[833,11603,11604],{"class":835,"line":958},[833,11605,896],{"emptyLinePlaceholder":223},[833,11607,11608,11610],{"class":835,"line":966},[833,11609,7636],{"class":8230},[833,11611,930],{"class":843},[833,11613,11614,11616,11618,11620,11622,11624],{"class":835,"line":982},[833,11615,8253],{"class":8237},[833,11617,1013],{"class":843},[833,11619,1182],{"class":912},[833,11621,1185],{"class":843},[833,11623,3244],{"class":847},[833,11625,1191],{"class":843},[833,11627,11628,11630,11632,11634,11636,11639],{"class":835,"line":987},[833,11629,8300],{"class":8237},[833,11631,1013],{"class":843},[833,11633,1182],{"class":912},[833,11635,1185],{"class":843},[833,11637,11638],{"class":847},"--line-height",[833,11640,1191],{"class":843},[833,11642,11643],{"class":835,"line":1422},[833,11644,1196],{"class":843},[833,11646,11647],{"class":835,"line":1438},[833,11648,896],{"emptyLinePlaceholder":223},[833,11650,11651,11653],{"class":835,"line":1443},[833,11652,7636],{"class":8230},[833,11654,930],{"class":843},[833,11656,11657,11660,11663,11665,11668],{"class":835,"line":1780},[833,11658,11659],{"class":847},"    @media (",[833,11661,11662],{"class":8237},"min-width",[833,11664,1013],{"class":843},[833,11666,11667],{"class":2274}," 768px",[833,11669,11670],{"class":847},") {\n",[833,11672,11673,11676,11678,11681],{"class":835,"line":2189},[833,11674,11675],{"class":847},"        --font-size",[833,11677,1013],{"class":843},[833,11679,11680],{"class":2274}," 1.125rem",[833,11682,867],{"class":843},[833,11684,11685],{"class":835,"line":2206},[833,11686,11687],{"class":843},"    }\n",[833,11689,11690],{"class":835,"line":2223},[833,11691,1196],{"class":847},[833,11693,11694],{"class":835,"line":2236},[833,11695,896],{"emptyLinePlaceholder":223},[833,11697,11698,11700],{"class":835,"line":2241},[833,11699,7636],{"class":8230},[833,11701,930],{"class":843},[833,11703,11704,11706,11708,11710,11713],{"class":835,"line":2682},[833,11705,11659],{"class":847},[833,11707,11662],{"class":8237},[833,11709,1013],{"class":843},[833,11711,11712],{"class":2274}," 1200px",[833,11714,11670],{"class":847},[833,11716,11717,11719,11721,11723],{"class":835,"line":2690},[833,11718,11675],{"class":847},[833,11720,1013],{"class":843},[833,11722,2322],{"class":2274},[833,11724,867],{"class":843},[833,11726,11727],{"class":835,"line":2698},[833,11728,11687],{"class":843},[833,11730,11731],{"class":835,"line":2718},[833,11732,1196],{"class":847},[747,11734,11736],{"id":11735},"best-practices","Best Practices",[762,11738,11739,11751,11757,11763,11773,11787,11831,11844,11887,11893,11899,11905],{},[765,11740,11741,11744,11745,11747,11748,11750],{},[692,11742,11743],{},"Use modular scales for font sizes",": Combine ",[697,11746,1989],{}," with ",[697,11749,2356],{}," for mathematically harmonious type scales.",[765,11752,11753,11756],{},[692,11754,11755],{},"Limit your type scale",": Aim for 6-8 font sizes. Too many options lead to inconsistency.",[765,11758,11759,11762],{},[692,11760,11761],{},"Match line height to font size",": Larger text needs tighter line height (1.2), body text works well at 1.5, and small text may need looser spacing (1.75).",[765,11764,11765,11768,11769,11772],{},[692,11766,11767],{},"Use negative letter spacing for large headings",": Display text benefits from tighter tracking (e.g., ",[697,11770,11771],{},"-0.025em",").",[765,11774,11775,11778,11779,11782,11783,11786],{},[692,11776,11777],{},"Use positive letter spacing for uppercase or small text",": All-caps text and small UI text need extra tracking (e.g., ",[697,11780,11781],{},"0.05em"," to ",[697,11784,11785],{},"0.1em",") for readability.",[765,11788,11789,11792,11793],{},[692,11790,11791],{},"Always include font stack fallbacks",": List fonts from most specific to most generic, ending with a generic family.\n",[823,11794,11796],{"className":1003,"code":11795,"language":1006,"meta":829,"style":829},"font-family: \"Inter\", \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n",[697,11797,11798],{"__ignoreMap":829},[833,11799,11800,11803,11806,11808,11811,11813,11815,11817,11820,11822,11825,11827,11829],{"class":835,"line":836},[833,11801,11802],{"class":8230},"font-family",[833,11804,11805],{"class":847},": \"Inter\"",[833,11807,1031],{"class":843},[833,11809,11810],{"class":847}," \"Segoe UI\"",[833,11812,1031],{"class":843},[833,11814,1048],{"class":847},[833,11816,1031],{"class":843},[833,11818,11819],{"class":847}," Helvetica",[833,11821,1031],{"class":843},[833,11823,11824],{"class":847}," Arial",[833,11826,1031],{"class":843},[833,11828,1077],{"class":8230},[833,11830,867],{"class":847},[765,11832,11833,11840,11841,11843],{},[692,11834,11835,11836,11839],{},"Use ",[697,11837,11838],{},"local()"," in @font-face",": Include ",[697,11842,11838],{}," sources to reuse installed fonts when available, reducing bandwidth.",[765,11845,11846,11849,11850],{},[692,11847,11848],{},"Consider performance",":\n",[762,11851,11852,11858,11864,11873],{},[765,11853,11854,11855,10956],{},"System fonts load instantly; web fonts may cause layout shifts. Use ",[697,11856,11857],{},"font-display: swap",[765,11859,11860,11861],{},"Preload critical web fonts: ",[697,11862,11863],{},"\u003Clink rel=\"preload\" href=\"font.woff2\" as=\"font\" type=\"font\u002Fwoff2\" crossorigin>",[765,11865,11835,11866,11869,11870],{},[697,11867,11868],{},"preconnect"," for external font services: ",[697,11871,11872],{},"\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">",[765,11874,11835,11875,11878,11879,11882,11883,11886],{},[697,11876,11877],{},"font-size-adjust"," or ",[697,11880,11881],{},"size-adjust"," (in ",[697,11884,11885],{},"@font-face",") to reduce reflow when fallback fonts render.",[765,11888,11889,11892],{},[692,11890,11891],{},"Use unitless line heights",": This ensures line height scales proportionally with font size changes.",[765,11894,11895,11898],{},[692,11896,11897],{},"Consider variable fonts",": Variable fonts offer multiple weights and styles in a single file, improving performance and enabling optical size adjustments.",[765,11900,11901,11904],{},[692,11902,11903],{},"Test across devices",": Ensure your typography is readable at all viewport sizes and on different devices.",[765,11906,11907,11910],{},[692,11908,11909],{},"Use em units for letter spacing",": This ensures tracking scales proportionally with font size.",[689,11912,11913,11915,11916,11919],{},[692,11914,4784],{}," We use ",[697,11917,11918],{},"as const"," to ensure the object is treated as a constant type. This helps TypeScript infer the return type of the composables and provides better type safety and autocomplete support.",[747,11921,11923],{"id":11922},"faq","FAQ",[11925,11926,11927,11933,11958,11962,11972,11989,11993,11997,12001,12005],"accordion",{},[11928,11929,11932],"accordion-item",{"icon":11930,"label":11931},"i-lucide-circle-help","Should I use the same scale for typography and spacing?","Not necessarily. Typography often benefits from a larger scale ratio (like Perfect Fourth: 1.333 or Major Third: 1.25) to create clear visual hierarchy, while spacing works better with subtle progressions (like Major Second: 1.125). Choose scales based on the specific needs of each system.",[11928,11934,802,11936,11938,11939,11878,11941,11943,11944,11878,11946,11949,11950,11878,11952,11954,11955,11957],{"icon":11930,"label":11935},"What's the difference between using 'default' and a custom key?",[697,11937,1232],{}," key creates a variable without a suffix (like ",[697,11940,1249],{},[697,11942,3244],{},"), which is perfect for your primary values. Any other key like ",[697,11945,1224],{},[697,11947,11948],{},"lg"," creates variables with suffixes (like ",[697,11951,8462],{},[697,11953,10974],{},"). Use ",[697,11956,1232],{}," for your main body text styles.",[11928,11959,11961],{"icon":11930,"label":11960},"Should I use web fonts or system fonts?","Both have their place. System fonts offer instant loading and great performance, while web fonts provide brand consistency and design flexibility. Consider using system fonts for body text and web fonts for headings, or use system fonts exclusively for the best performance. If using web fonts, always include system font fallbacks.",[11928,11963,11965,11966,11968,11969,11971],{"icon":11930,"label":11964},"How do I handle font loading?","Font loading is handled separately from defining font families. Use the CSS ",[697,11967,11885],{}," rule or a font loading service like Google Fonts or Adobe Fonts. The typography composables only create CSS variables—they don't load fonts. Use ",[697,11970,11857],{}," to prevent invisible text while fonts load.",[11928,11973,11835,11975,11978,11979,11981,11982,11984,11985,11988],{"icon":11930,"label":11974},"Should I use pixels, rems, or ems for font sizes?",[697,11976,11977],{},"rem"," for font sizes to respect user font size preferences and maintain consistent scaling across your site. ",[697,11980,11977],{}," is relative to the root element, making it predictable. Use ",[697,11983,6602],{}," only when you need font sizes relative to their parent element. Avoid ",[697,11986,11987],{},"px"," as it doesn't scale with user preferences.",[11928,11990,11992],{"icon":11930,"label":11991},"How many font weights should I use?","Aim for 2-4 font weights in most projects: one for body text (400), one for emphasis (600-700), and optionally one for light text (300) and one for heavy headings (800-900). More weights increase file size and rarely add value. Choose weights that your chosen font family supports.",[11928,11994,11996],{"icon":11930,"label":11995},"Can I update typography variables dynamically?","Yes! Since typography properties are stored as CSS variables, you can override them at runtime or in different scopes (like theme variants or media queries). Just update the CSS variable value and all elements using that variable will update automatically.",[11928,11998,12000],{"icon":11930,"label":11999},"What line height should I use?","For body text, use 1.5-1.65 for optimal readability. For headings, use tighter line heights like 1.2-1.3. For small text or dense UI elements, you might need 1.4. For long-form reading, go looser at 1.75-1.9. Always test with your actual content and font choice.",[11928,12002,12004],{"icon":11930,"label":12003},"When should I use letter spacing?","Use negative letter spacing (-0.02em to -0.05em) for large display text to improve visual balance. Use positive letter spacing (0.05em to 0.15em) for uppercase text, small text, and UI labels to improve readability. Body text usually works best with normal letter spacing.",[11928,12006,12008,12010,12011,12013,12014,12016,12017,12019],{"icon":11930,"label":12007},"What's the difference between italic and oblique?",[697,12009,4749],{}," uses a true italic font variant if available—a specially designed slanted version with unique letterforms. ",[697,12012,4757],{}," artificially slants the normal font. Most fonts provide italic variants, making ",[697,12015,4749],{}," the preferred choice for emphasis. Use ",[697,12018,4757],{}," only when the font lacks a true italic or for specific design effects.",[12021,12022,12023],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}",{"title":829,"searchDepth":870,"depth":870,"links":12025},[12026,12027,12028,12033,12037,12041,12046,12050,12054,12055,12059,12060],{"id":749,"depth":870,"text":78},{"id":756,"depth":870,"text":757},{"id":797,"depth":870,"text":699,"children":12029},[12030,12031,12032],{"id":810,"depth":893,"text":811},{"id":1253,"depth":893,"text":1254},{"id":1604,"depth":893,"text":1605},{"id":1982,"depth":870,"text":703,"children":12034},[12035],{"id":2343,"depth":893,"text":12036},"Integration with useMultiplierDesignTokens",{"id":3489,"depth":870,"text":706,"children":12038},[12039,12040],{"id":3939,"depth":893,"text":3940},{"id":4220,"depth":893,"text":4221},{"id":4507,"depth":870,"text":709,"children":12042},[12043,12044,12045],{"id":4796,"depth":893,"text":4797},{"id":5038,"depth":893,"text":5039},{"id":5264,"depth":893,"text":5265},{"id":5489,"depth":870,"text":712,"children":12047},[12048,12049],{"id":5804,"depth":893,"text":5805},{"id":6061,"depth":893,"text":6062},{"id":6291,"depth":870,"text":716,"children":12051},[12052,12053],{"id":6606,"depth":893,"text":6607},{"id":6880,"depth":893,"text":6881},{"id":7171,"depth":870,"text":7172},{"id":8504,"depth":870,"text":8505,"children":12056},[12057,12058],{"id":8508,"depth":893,"text":8509},{"id":11084,"depth":893,"text":11085},{"id":11735,"depth":870,"text":11736},{"id":11922,"depth":870,"text":11923},"Create and manage typography design tokens with CSS variables for consistent text styling across your application.","md",null,{},{"title":234,"icon":237},{"title":684,"description":12061},"g9Na_MnRTx7v5F3jin5BtDiLE3Fl2r3Y0Z_YokktEJU",[12069,12071],{"title":229,"path":230,"stem":231,"description":12070,"icon":232,"children":-1},"Create and manage spacing design tokens with CSS variables for consistent layout spacing, padding, margins, and gaps across your application.",{"title":239,"path":240,"stem":241,"description":12072,"icon":242,"children":-1},"Create and manage z-index design tokens with CSS variables for consistent stacking order across your application.",1781596324516]