[{"data":1,"prerenderedAt":11755},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-design-tokens-composables-typography":407,"-docs-theme-design-tokens-composables-typography-surround":11750},{"gettingStarted":4,"api":57,"theme":148},[5],{"title":6,"icon":7,"path":8,"stem":9,"children":10,"page":7},"Getting Started",false,"/docs/getting-started","docs/getting-started",[11,16,21,26,31,52],{"title":12,"path":13,"stem":14,"icon":15},"Introduction","/docs/getting-started/introduction","docs/getting-started/01.introduction","i-lucide-house",{"title":17,"path":18,"stem":19,"icon":20},"Installation","/docs/getting-started/installation","docs/getting-started/02.installation","i-lucide-download",{"title":22,"path":23,"stem":24,"icon":25},"Guides","/docs/getting-started/guides","docs/getting-started/03.guides","i-lucide-book-open",{"title":27,"path":28,"stem":29,"icon":30},"Comparisons","/docs/getting-started/comparisons","docs/getting-started/04.comparisons","i-lucide-file-diff",{"title":32,"icon":33,"path":34,"stem":35,"children":36,"page":7},"Tooling","i-lucide-hammer","/docs/getting-started/tooling","docs/getting-started/05.tooling",[37,42,47],{"title":38,"path":39,"stem":40,"icon":41},"CLI Reference","/docs/getting-started/tooling/cli","docs/getting-started/05.tooling/01.cli","i-lucide-square-terminal",{"title":43,"path":44,"stem":45,"icon":46},"Utility Scanner","/docs/getting-started/tooling/scanner","docs/getting-started/05.tooling/02.scanner","i-lucide-view",{"title":48,"path":49,"stem":50,"icon":51},"Figma Plugin","/docs/getting-started/tooling/figma-plugin","docs/getting-started/05.tooling/03.figma-plugin","i-simple-icons-figma",{"title":53,"path":54,"stem":55,"icon":56},"Licensing","/docs/getting-started/licensing","docs/getting-started/06.licensing","i-lucide-scale",[58],{"title":59,"path":60,"stem":61,"children":62,"icon":7},"API Reference","/docs/api","docs/api/00.index",[63,66,71,76,81,86,91,96,101,106,111,116,131,136,141,146],{"title":64,"path":60,"stem":61,"icon":65},"Overview","i-lucide-book-text",{"title":67,"path":68,"stem":69,"icon":70},"Instance","/docs/api/instance","docs/api/01.instance","i-lucide-cloud-lightning",{"title":72,"path":73,"stem":74,"icon":75},"Variables","/docs/api/variables","docs/api/02.variables","i-lucide-variable",{"title":77,"path":78,"stem":79,"icon":80},"Selectors","/docs/api/selectors","docs/api/03.selectors","i-lucide-scan-text",{"title":82,"path":83,"stem":84,"icon":85},"At-Rules","/docs/api/at-rules","docs/api/04.at-rules","i-lucide-at-sign",{"title":87,"path":88,"stem":89,"icon":90},"Media Queries","/docs/api/media-queries","docs/api/05.media-queries","i-lucide-image-upscale",{"title":92,"path":93,"stem":94,"icon":95},"Keyframes","/docs/api/keyframes","docs/api/06.keyframes","i-lucide-square-play",{"title":97,"path":98,"stem":99,"icon":100},"Interpolation","/docs/api/interpolation","docs/api/07.interpolation","i-lucide-wrap-text",{"title":102,"path":103,"stem":104,"icon":105},"Utilities","/docs/api/utilities","docs/api/08.utilities","i-lucide-sparkles",{"title":107,"path":108,"stem":109,"icon":110},"Utility Modifiers","/docs/api/utility-modifiers","docs/api/09.utility-modifiers","i-lucide-align-horizontal-justify-center",{"title":112,"path":113,"stem":114,"icon":115},"Themes","/docs/api/themes","docs/api/10.themes","i-lucide-paintbrush",{"title":117,"path":118,"stem":119,"children":120,"icon":130},"Recipes","/docs/api/recipes","docs/api/11.recipes/00.index",[121,122,126],{"title":64,"path":118,"stem":119},{"title":123,"path":124,"stem":125},"Runtime","/docs/api/recipes/runtime","docs/api/11.recipes/01.runtime",{"title":127,"path":128,"stem":129},"Output Format","/docs/api/recipes/output-format","docs/api/11.recipes/02.output-format","i-lucide-chef-hat",{"title":132,"path":133,"stem":134,"icon":135},"Composables","/docs/api/composables","docs/api/12.composables","i-lucide-component",{"title":137,"path":138,"stem":139,"icon":140},"Imports","/docs/api/imports","docs/api/13.imports","i-lucide-file-input",{"title":142,"path":143,"stem":144,"icon":145},"Merging","/docs/api/merging","docs/api/13.merging","i-lucide-squares-intersect",{"title":137,"path":138,"stem":147,"icon":140},"docs/api/14.imports",[149,223,289,362],{"title":150,"path":151,"stem":152,"children":153,"icon":7},"Design Tokens","/docs/theme/design-tokens","docs/theme/design-tokens/00.index",[154,155,160],{"title":64,"path":151,"stem":152,"icon":65},{"title":156,"path":157,"stem":158,"icon":159},"Presets","/docs/theme/design-tokens/presets","docs/theme/design-tokens/01.presets","i-lucide-package",{"title":132,"icon":135,"defaultOpen":7,"path":161,"stem":162,"children":163,"page":7},"/docs/theme/design-tokens/composables","docs/theme/design-tokens/02.composables",[164,168,172,176,180,184,188,192,207,211,215,219],{"title":165,"path":166,"stem":167,"icon":7},"Border Radiuses","/docs/theme/design-tokens/composables/border-radiuses","docs/theme/design-tokens/02.composables/00.border-radiuses",{"title":169,"path":170,"stem":171,"icon":7},"Borders","/docs/theme/design-tokens/composables/borders","docs/theme/design-tokens/02.composables/01.borders",{"title":173,"path":174,"stem":175,"icon":7},"Box Shadows","/docs/theme/design-tokens/composables/box-shadows","docs/theme/design-tokens/02.composables/02.box-shadows",{"title":177,"path":178,"stem":179,"icon":7},"Breakpoints","/docs/theme/design-tokens/composables/breakpoints","docs/theme/design-tokens/02.composables/03.breakpoints",{"title":181,"path":182,"stem":183,"icon":7},"Colors","/docs/theme/design-tokens/composables/colors","docs/theme/design-tokens/02.composables/04.colors",{"title":185,"path":186,"stem":187,"icon":7},"Duration","/docs/theme/design-tokens/composables/duration","docs/theme/design-tokens/02.composables/05.duration",{"title":189,"path":190,"stem":191,"icon":7},"Easing","/docs/theme/design-tokens/composables/easing","docs/theme/design-tokens/02.composables/06.easing",{"title":193,"path":194,"stem":195,"children":196,"icon":7,"pro":206,"defaultOpen":7},"Fluid Design","/docs/theme/design-tokens/composables/fluid-design","docs/theme/design-tokens/02.composables/07.fluid-design/01.index",[197,198,202],{"title":64,"path":194,"stem":195},{"title":199,"path":200,"stem":201},"Fluid Viewport","/docs/theme/design-tokens/composables/fluid-design/viewport","docs/theme/design-tokens/02.composables/07.fluid-design/02.viewport",{"title":203,"path":204,"stem":205},"Fluid Typography","/docs/theme/design-tokens/composables/fluid-design/typography","docs/theme/design-tokens/02.composables/07.fluid-design/03.typography",true,{"title":208,"path":209,"stem":210,"icon":7},"Scales","/docs/theme/design-tokens/composables/scales","docs/theme/design-tokens/02.composables/08.scales",{"title":212,"path":213,"stem":214,"icon":7},"Spacing","/docs/theme/design-tokens/composables/spacing","docs/theme/design-tokens/02.composables/09.spacing",{"title":216,"path":217,"stem":218,"icon":7},"Typography","/docs/theme/design-tokens/composables/typography","docs/theme/design-tokens/02.composables/10.typography",{"title":220,"path":221,"stem":222,"icon":7},"Z-Index","/docs/theme/design-tokens/composables/z-index","docs/theme/design-tokens/02.composables/11.z-index",{"title":224,"path":225,"stem":226,"children":227,"icon":7},"Components","/docs/theme/components","docs/theme/components/00.index",[228,229],{"title":64,"path":225,"stem":226,"icon":65},{"title":132,"icon":135,"defaultOpen":206,"path":230,"stem":231,"children":232,"page":7},"/docs/theme/components/composables","docs/theme/components/02.composables",[233,237,241,245,249,253,257,261,265,269,273,277,281,285],{"title":234,"path":235,"stem":236},"Badge","/docs/theme/components/composables/badge","docs/theme/components/02.composables/01.badge",{"title":238,"path":239,"stem":240},"Button","/docs/theme/components/composables/button","docs/theme/components/02.composables/02.button",{"title":242,"path":243,"stem":244},"Button Group","/docs/theme/components/composables/button-group","docs/theme/components/02.composables/03.button-group",{"title":246,"path":247,"stem":248},"Callout","/docs/theme/components/composables/callout","docs/theme/components/02.composables/04.callout",{"title":250,"path":251,"stem":252},"Card","/docs/theme/components/composables/card","docs/theme/components/02.composables/05.card",{"title":254,"path":255,"stem":256},"Nav","/docs/theme/components/composables/nav","docs/theme/components/02.composables/06.nav",{"title":258,"path":259,"stem":260},"Modal","/docs/theme/components/composables/modal","docs/theme/components/02.composables/07.modal",{"title":262,"path":263,"stem":264},"Skeleton","/docs/theme/components/composables/skeleton","docs/theme/components/02.composables/08.skeleton",{"title":266,"path":267,"stem":268},"Tooltip","/docs/theme/components/composables/tooltip","docs/theme/components/02.composables/08.tooltip",{"title":270,"path":271,"stem":272},"Placeholder","/docs/theme/components/composables/placeholder","docs/theme/components/02.composables/09.placeholder",{"title":274,"path":275,"stem":276},"Progress","/docs/theme/components/composables/progress","docs/theme/components/02.composables/10.progress",{"title":278,"path":279,"stem":280},"Popover","/docs/theme/components/composables/popover","docs/theme/components/02.composables/11.popover",{"title":282,"path":283,"stem":284},"Chip","/docs/theme/components/composables/chip","docs/theme/components/02.composables/12.chip",{"title":286,"path":287,"stem":288},"Spinner","/docs/theme/components/composables/spinner","docs/theme/components/02.composables/13.spinner",{"title":102,"path":290,"stem":291,"children":292,"icon":7},"/docs/theme/utilities","docs/theme/utilities/00.index",[293,294,297],{"title":64,"path":290,"stem":291,"icon":65},{"title":156,"path":295,"stem":296,"icon":159},"/docs/theme/utilities/presets","docs/theme/utilities/01.presets",{"title":132,"icon":135,"defaultOpen":7,"path":298,"stem":299,"children":300,"page":7},"/docs/theme/utilities/composables","docs/theme/utilities/02.composables",[301,305,309,313,316,320,324,328,332,336,340,343,347,351,355,359],{"title":302,"path":303,"stem":304,"icon":7},"Accessibility","/docs/theme/utilities/composables/accessibility","docs/theme/utilities/02.composables/00.accessibility",{"title":306,"path":307,"stem":308,"icon":7},"Animations","/docs/theme/utilities/composables/animations","docs/theme/utilities/02.composables/01.animations",{"title":310,"path":311,"stem":312,"icon":7},"Backgrounds","/docs/theme/utilities/composables/backgrounds","docs/theme/utilities/02.composables/02.backgrounds",{"title":169,"path":314,"stem":315,"icon":7},"/docs/theme/utilities/composables/borders","docs/theme/utilities/02.composables/03.borders",{"title":317,"path":318,"stem":319,"icon":7},"Effects","/docs/theme/utilities/composables/effects","docs/theme/utilities/02.composables/04.effects",{"title":321,"path":322,"stem":323,"icon":7},"Filters","/docs/theme/utilities/composables/filters","docs/theme/utilities/02.composables/05.filters",{"title":325,"path":326,"stem":327,"icon":7},"Flexbox & Grid","/docs/theme/utilities/composables/flexbox-grid","docs/theme/utilities/02.composables/06.flexbox-grid",{"title":329,"path":330,"stem":331,"icon":7},"Interactivity","/docs/theme/utilities/composables/interactivity","docs/theme/utilities/02.composables/07.interactivity",{"title":333,"path":334,"stem":335,"icon":7},"Layout","/docs/theme/utilities/composables/layout","docs/theme/utilities/02.composables/08.layout",{"title":337,"path":338,"stem":339,"icon":7},"Sizing","/docs/theme/utilities/composables/sizing","docs/theme/utilities/02.composables/09.sizing",{"title":212,"path":341,"stem":342,"icon":7},"/docs/theme/utilities/composables/spacing","docs/theme/utilities/02.composables/10.spacing",{"title":344,"path":345,"stem":346,"icon":7},"SVG","/docs/theme/utilities/composables/svg","docs/theme/utilities/02.composables/11.svg",{"title":348,"path":349,"stem":350,"icon":7},"Tables","/docs/theme/utilities/composables/tables","docs/theme/utilities/02.composables/12.tables",{"title":352,"path":353,"stem":354,"icon":7},"Transforms","/docs/theme/utilities/composables/transforms","docs/theme/utilities/02.composables/13.transforms",{"title":356,"path":357,"stem":358,"icon":7},"Transitions","/docs/theme/utilities/composables/transitions","docs/theme/utilities/02.composables/14.transitions",{"title":216,"path":360,"stem":361,"icon":7},"/docs/theme/utilities/composables/typography","docs/theme/utilities/02.composables/15.typography",{"title":363,"path":364,"stem":365,"children":366,"icon":7},"Modifiers","/docs/theme/modifiers","docs/theme/modifiers/00.index",[367,368,371],{"title":64,"path":364,"stem":365,"icon":65},{"title":156,"path":369,"stem":370,"icon":159},"/docs/theme/modifiers/presets","docs/theme/modifiers/01.presets",{"title":132,"icon":135,"defaultOpen":7,"path":372,"stem":373,"children":374,"page":7},"/docs/theme/modifiers/composables","docs/theme/modifiers/02.composables",[375,379,383,387,391,395,399,403],{"title":376,"path":377,"stem":378,"icon":7},"ARIA State","/docs/theme/modifiers/composables/aria-state","docs/theme/modifiers/02.composables/00.aria-state",{"title":380,"path":381,"stem":382,"icon":7},"Directional","/docs/theme/modifiers/composables/directional","docs/theme/modifiers/02.composables/01.directional",{"title":384,"path":385,"stem":386,"icon":7},"Form State","/docs/theme/modifiers/composables/form-state","docs/theme/modifiers/02.composables/02.form-state",{"title":388,"path":389,"stem":390,"icon":7},"Media & Preferences","/docs/theme/modifiers/composables/media-preferences","docs/theme/modifiers/02.composables/03.media-preferences",{"title":392,"path":393,"stem":394,"icon":7},"Other State","/docs/theme/modifiers/composables/other-state","docs/theme/modifiers/02.composables/04.other-state",{"title":396,"path":397,"stem":398,"icon":7},"Pseudo-Elements","/docs/theme/modifiers/composables/pseudo-elements","docs/theme/modifiers/02.composables/05.pseudo-elements",{"title":400,"path":401,"stem":402,"icon":7},"Pseudo-State","/docs/theme/modifiers/composables/pseudo-state","docs/theme/modifiers/02.composables/06.pseudo-state",{"title":404,"path":405,"stem":406,"icon":7},"Structural","/docs/theme/modifiers/composables/structural","docs/theme/modifiers/02.composables/07.structural",{"id":408,"title":409,"body":410,"description":11742,"extension":11743,"links":11744,"meta":11745,"navigation":11746,"path":217,"seo":11747,"sitemap":11748,"stem":218,"__hash__":11749},"docs_theme/docs/theme/design-tokens/02.composables/10.typography.md","Typography Design Tokens",{"type":411,"value":412,"toc":11705},"minimark",[413,417,421,425,428,463,470,477,482,485,869,872,909,923,927,930,1274,1278,1281,1652,1658,1664,2014,2021,2031,3141,3146,3153,3161,3167,3173,3176,3512,3514,3612,3616,3619,3893,3897,3900,4180,4186,4192,4195,4415,4417,4456,4472,4476,4479,4714,4718,4721,4940,4944,4947,5165,5171,5177,5180,5421,5423,5472,5481,5485,5488,5738,5742,5745,5968,5974,5980,5983,6223,6225,6275,6284,6288,6291,6558,6562,6564,6849,6853,6856,8182,8186,8190,8193,10762,10766,10769,11414,11418,11592,11601,11605,11701],[414,415,64],"h2",{"id":416},"overview",[418,419,420],"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.",[414,422,424],{"id":423},"why-use-typography-composables","Why use typography composables?",[418,426,427],{},"Typography composables help you:",[429,430,431,439,445,451,457],"ul",{},[432,433,434,438],"li",{},[435,436,437],"strong",{},"Centralize typography definitions",": Define all your font families, sizes, weights, line heights, and letter spacing in one place.",[432,440,441,444],{},[435,442,443],{},"Enable flexible theming",": Override typography values to instantly update text styles across your application.",[432,446,447,450],{},[435,448,449],{},"Maintain consistency",": Use semantic names to ensure consistent typography usage throughout your design system.",[432,452,453,456],{},[435,454,455],{},"Create harmonious scales",": Integrate with modular scales to generate mathematically proportional type systems.",[432,458,459,462],{},[435,460,461],{},"Simplify maintenance",": Update typography values in one place instead of searching through your codebase.",[414,464,466],{"id":465},"usefontfamilydesigntokens",[467,468,469],"code",{},"useFontFamilyDesignTokens",[418,471,472,473,476],{},"The ",[467,474,475],{},"useFontFamilyDesignTokens()"," function creates a set of font family variables from a simple object of font stack definitions.",[478,479,481],"h3",{"id":480},"default-font-family-values","Default Font Family Values",[418,483,484],{},"Styleframe provides carefully chosen default font family values that you can use out of the box:",[486,487,488,670],"tabs",{},[489,490,493],"tabs-item",{"icon":491,"label":492},"i-lucide-code","Code",[494,495,501],"pre",{"className":496,"code":497,"filename":498,"language":499,"meta":500,"style":500},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from 'styleframe';\nimport { useFontFamilyDesignTokens } from '@styleframe/theme';\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","",[467,502,503,539,562,568,589,594,602,611,619,627,635,651,656],{"__ignoreMap":500},[504,505,508,512,516,520,523,526,529,533,536],"span",{"class":506,"line":507},"line",1,[504,509,511],{"class":510},"s7zQu","import",[504,513,515],{"class":514},"sMK4o"," {",[504,517,519],{"class":518},"sTEyZ"," styleframe",[504,521,522],{"class":514}," }",[504,524,525],{"class":510}," from",[504,527,528],{"class":514}," '",[504,530,532],{"class":531},"sfazB","styleframe",[504,534,535],{"class":514},"'",[504,537,538],{"class":514},";\n",[504,540,542,544,546,549,551,553,555,558,560],{"class":506,"line":541},2,[504,543,511],{"class":510},[504,545,515],{"class":514},[504,547,548],{"class":518}," useFontFamilyDesignTokens",[504,550,522],{"class":514},[504,552,525],{"class":510},[504,554,528],{"class":514},[504,556,557],{"class":531},"@styleframe/theme",[504,559,535],{"class":514},[504,561,538],{"class":514},[504,563,565],{"class":506,"line":564},3,[504,566,567],{"emptyLinePlaceholder":206},"\n",[504,569,571,575,578,581,584,587],{"class":506,"line":570},4,[504,572,574],{"class":573},"spNyl","const",[504,576,577],{"class":518}," s ",[504,579,580],{"class":514},"=",[504,582,519],{"class":583},"s2Zo4",[504,585,586],{"class":518},"()",[504,588,538],{"class":514},[504,590,592],{"class":506,"line":591},5,[504,593,567],{"emptyLinePlaceholder":206},[504,595,597,599],{"class":506,"line":596},6,[504,598,574],{"class":573},[504,600,601],{"class":514}," {\n",[504,603,605,608],{"class":506,"line":604},7,[504,606,607],{"class":518},"    fontFamily",[504,609,610],{"class":514},",\n",[504,612,614,617],{"class":506,"line":613},8,[504,615,616],{"class":518},"    fontFamilyBase",[504,618,610],{"class":514},[504,620,622,625],{"class":506,"line":621},9,[504,623,624],{"class":518},"    fontFamilyPrint",[504,626,610],{"class":514},[504,628,630,633],{"class":506,"line":629},10,[504,631,632],{"class":518},"    fontFamilyMono",[504,634,610],{"class":514},[504,636,638,641,644,646,649],{"class":506,"line":637},11,[504,639,640],{"class":514},"}",[504,642,643],{"class":514}," =",[504,645,548],{"class":583},[504,647,648],{"class":518},"(s)",[504,650,538],{"class":514},[504,652,654],{"class":506,"line":653},12,[504,655,567],{"emptyLinePlaceholder":206},[504,657,659,662,665,668],{"class":506,"line":658},13,[504,660,661],{"class":510},"export",[504,663,664],{"class":510}," default",[504,666,667],{"class":518}," s",[504,669,538],{"class":514},[489,671,673],{"icon":140,"label":672},"Output",[494,674,679],{"className":675,"code":676,"filename":677,"language":678,"meta":500,"style":500},"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/index.css","css",[467,680,681,691,752,791,845,864],{"__ignoreMap":500},[504,682,683,686,689],{"class":506,"line":507},[504,684,685],{"class":514},":",[504,687,688],{"class":573},"root",[504,690,601],{"class":514},[504,692,693,696,698,701,704,707,709,711,714,716,718,721,723,726,728,731,733,736,738,740,743,745,747,750],{"class":506,"line":541},[504,694,695],{"class":518},"    --font-family--base",[504,697,685],{"class":514},[504,699,700],{"class":518}," -apple-system",[504,702,703],{"class":514},",",[504,705,706],{"class":518}," BlinkMacSystemFont",[504,708,703],{"class":514},[504,710,528],{"class":514},[504,712,713],{"class":531},"Segoe UI",[504,715,535],{"class":514},[504,717,703],{"class":514},[504,719,720],{"class":518}," Roboto",[504,722,703],{"class":514},[504,724,725],{"class":518}," Oxygen-Sans",[504,727,703],{"class":514},[504,729,730],{"class":518}," Ubuntu",[504,732,703],{"class":514},[504,734,735],{"class":518}," Cantarell",[504,737,703],{"class":514},[504,739,528],{"class":514},[504,741,742],{"class":531},"Helvetica Neue",[504,744,535],{"class":514},[504,746,703],{"class":514},[504,748,749],{"class":518}," sans-serif",[504,751,538],{"class":514},[504,753,754,757,759,761,764,766,768,770,773,775,777,779,782,784,786,789],{"class":506,"line":564},[504,755,756],{"class":518},"    --font-family--print",[504,758,685],{"class":514},[504,760,528],{"class":514},[504,762,763],{"class":531},"Georgia",[504,765,535],{"class":514},[504,767,703],{"class":514},[504,769,528],{"class":514},[504,771,772],{"class":531},"Times New Roman",[504,774,535],{"class":514},[504,776,703],{"class":514},[504,778,528],{"class":514},[504,780,781],{"class":531},"Times",[504,783,535],{"class":514},[504,785,703],{"class":514},[504,787,788],{"class":518}," serif",[504,790,538],{"class":514},[504,792,793,796,798,800,803,805,807,810,812,815,817,820,822,824,827,829,831,833,836,838,840,843],{"class":506,"line":570},[504,794,795],{"class":518},"    --font-family--mono",[504,797,685],{"class":514},[504,799,528],{"class":514},[504,801,802],{"class":531},"SFMono-Regular",[504,804,535],{"class":514},[504,806,703],{"class":514},[504,808,809],{"class":518}," Menlo",[504,811,703],{"class":514},[504,813,814],{"class":518}," Monaco",[504,816,703],{"class":514},[504,818,819],{"class":518}," Consolas",[504,821,703],{"class":514},[504,823,528],{"class":514},[504,825,826],{"class":531},"Liberation Mono",[504,828,535],{"class":514},[504,830,703],{"class":514},[504,832,528],{"class":514},[504,834,835],{"class":531},"Courier New",[504,837,535],{"class":514},[504,839,703],{"class":514},[504,841,842],{"class":518}," monospace",[504,844,538],{"class":514},[504,846,847,850,852,855,858,861],{"class":506,"line":591},[504,848,849],{"class":518},"    --font-family",[504,851,685],{"class":514},[504,853,854],{"class":583}," var",[504,856,857],{"class":514},"(",[504,859,860],{"class":518},"--font-family--base",[504,862,863],{"class":514},");\n",[504,865,866],{"class":506,"line":596},[504,867,868],{"class":514},"}\n",[418,870,871],{},"The default values include:",[429,873,874,882,890,898],{},[432,875,876,881],{},[435,877,878],{},[467,879,880],{},"base",": System font stack for optimal performance and native appearance",[432,883,884,889],{},[435,885,886],{},[467,887,888],{},"print",": Serif font stack for print media and article content",[432,891,892,897],{},[435,893,894],{},[467,895,896],{},"mono",": Monospace font stack for code and technical content",[432,899,900,905,906,908],{},[435,901,902],{},[467,903,904],{},"default",": References ",[467,907,880],{}," by default",[910,911,912,915,916,918,919,922],"tip",{},[435,913,914],{},"Pro tip:"," Use the ",[467,917,904],{}," key for your primary font family. It will create a variable named ",[467,920,921],{},"--font-family"," without any suffix, making it the natural choice for body text and general use.",[478,924,926],{"id":925},"creating-custom-font-family-variables","Creating Custom Font Family Variables",[418,928,929],{},"You can provide completely custom font family values:",[486,931,932,1124],{},[489,933,934],{"icon":491,"label":492},[494,935,937],{"className":496,"code":936,"filename":498,"language":499,"meta":500,"style":500},"import { styleframe } from 'styleframe';\nimport { useFontFamilyDesignTokens } from '@styleframe/theme';\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",[467,938,939,959,979,983,997,1001,1007,1013,1019,1026,1041,1060,1076,1092,1108,1113],{"__ignoreMap":500},[504,940,941,943,945,947,949,951,953,955,957],{"class":506,"line":507},[504,942,511],{"class":510},[504,944,515],{"class":514},[504,946,519],{"class":518},[504,948,522],{"class":514},[504,950,525],{"class":510},[504,952,528],{"class":514},[504,954,532],{"class":531},[504,956,535],{"class":514},[504,958,538],{"class":514},[504,960,961,963,965,967,969,971,973,975,977],{"class":506,"line":541},[504,962,511],{"class":510},[504,964,515],{"class":514},[504,966,548],{"class":518},[504,968,522],{"class":514},[504,970,525],{"class":510},[504,972,528],{"class":514},[504,974,557],{"class":531},[504,976,535],{"class":514},[504,978,538],{"class":514},[504,980,981],{"class":506,"line":564},[504,982,567],{"emptyLinePlaceholder":206},[504,984,985,987,989,991,993,995],{"class":506,"line":570},[504,986,574],{"class":573},[504,988,577],{"class":518},[504,990,580],{"class":514},[504,992,519],{"class":583},[504,994,586],{"class":518},[504,996,538],{"class":514},[504,998,999],{"class":506,"line":591},[504,1000,567],{"emptyLinePlaceholder":206},[504,1002,1003,1005],{"class":506,"line":596},[504,1004,574],{"class":573},[504,1006,601],{"class":514},[504,1008,1009,1011],{"class":506,"line":604},[504,1010,607],{"class":518},[504,1012,610],{"class":514},[504,1014,1015,1017],{"class":506,"line":613},[504,1016,632],{"class":518},[504,1018,610],{"class":514},[504,1020,1021,1024],{"class":506,"line":621},[504,1022,1023],{"class":518},"    fontFamilySerif",[504,1025,610],{"class":514},[504,1027,1028,1030,1032,1034,1037,1039],{"class":506,"line":629},[504,1029,640],{"class":514},[504,1031,643],{"class":514},[504,1033,548],{"class":583},[504,1035,1036],{"class":518},"(s",[504,1038,703],{"class":514},[504,1040,601],{"class":514},[504,1042,1043,1047,1049,1052,1055,1058],{"class":506,"line":637},[504,1044,1046],{"class":1045},"swJcz","    default",[504,1048,685],{"class":514},[504,1050,1051],{"class":514}," \"",[504,1053,1054],{"class":531},"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",[504,1056,1057],{"class":514},"\"",[504,1059,610],{"class":514},[504,1061,1062,1065,1067,1069,1072,1074],{"class":506,"line":653},[504,1063,1064],{"class":1045},"    mono",[504,1066,685],{"class":514},[504,1068,1051],{"class":514},[504,1070,1071],{"class":531},"'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",[504,1073,1057],{"class":514},[504,1075,610],{"class":514},[504,1077,1078,1081,1083,1085,1088,1090],{"class":506,"line":658},[504,1079,1080],{"class":1045},"    serif",[504,1082,685],{"class":514},[504,1084,1051],{"class":514},[504,1086,1087],{"class":531},"'Georgia', 'Times New Roman', 'Times', serif",[504,1089,1057],{"class":514},[504,1091,610],{"class":514},[504,1093,1095,1097,1100,1103,1106],{"class":506,"line":1094},14,[504,1096,640],{"class":514},[504,1098,1099],{"class":510}," as",[504,1101,1102],{"class":573}," const",[504,1104,1105],{"class":518},")",[504,1107,538],{"class":514},[504,1109,1111],{"class":506,"line":1110},15,[504,1112,567],{"emptyLinePlaceholder":206},[504,1114,1116,1118,1120,1122],{"class":506,"line":1115},16,[504,1117,661],{"class":510},[504,1119,664],{"class":510},[504,1121,667],{"class":518},[504,1123,538],{"class":514},[489,1125,1126],{"icon":140,"label":672},[494,1127,1129],{"className":675,"code":1128,"filename":677,"language":678,"meta":500,"style":500},":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",[467,1130,1131,1139,1189,1235,1270],{"__ignoreMap":500},[504,1132,1133,1135,1137],{"class":506,"line":507},[504,1134,685],{"class":514},[504,1136,688],{"class":573},[504,1138,601],{"class":514},[504,1140,1141,1143,1145,1147,1149,1151,1153,1155,1157,1159,1161,1163,1165,1167,1169,1171,1173,1175,1177,1179,1181,1183,1185,1187],{"class":506,"line":541},[504,1142,849],{"class":518},[504,1144,685],{"class":514},[504,1146,700],{"class":518},[504,1148,703],{"class":514},[504,1150,706],{"class":518},[504,1152,703],{"class":514},[504,1154,528],{"class":514},[504,1156,713],{"class":531},[504,1158,535],{"class":514},[504,1160,703],{"class":514},[504,1162,720],{"class":518},[504,1164,703],{"class":514},[504,1166,725],{"class":518},[504,1168,703],{"class":514},[504,1170,730],{"class":518},[504,1172,703],{"class":514},[504,1174,735],{"class":518},[504,1176,703],{"class":514},[504,1178,528],{"class":514},[504,1180,742],{"class":531},[504,1182,535],{"class":514},[504,1184,703],{"class":514},[504,1186,749],{"class":518},[504,1188,538],{"class":514},[504,1190,1191,1193,1195,1197,1199,1201,1203,1205,1207,1209,1211,1213,1215,1217,1219,1221,1223,1225,1227,1229,1231,1233],{"class":506,"line":564},[504,1192,795],{"class":518},[504,1194,685],{"class":514},[504,1196,528],{"class":514},[504,1198,802],{"class":531},[504,1200,535],{"class":514},[504,1202,703],{"class":514},[504,1204,809],{"class":518},[504,1206,703],{"class":514},[504,1208,814],{"class":518},[504,1210,703],{"class":514},[504,1212,819],{"class":518},[504,1214,703],{"class":514},[504,1216,528],{"class":514},[504,1218,826],{"class":531},[504,1220,535],{"class":514},[504,1222,703],{"class":514},[504,1224,528],{"class":514},[504,1226,835],{"class":531},[504,1228,535],{"class":514},[504,1230,703],{"class":514},[504,1232,842],{"class":518},[504,1234,538],{"class":514},[504,1236,1237,1240,1242,1244,1246,1248,1250,1252,1254,1256,1258,1260,1262,1264,1266,1268],{"class":506,"line":570},[504,1238,1239],{"class":518},"    --font-family--serif",[504,1241,685],{"class":514},[504,1243,528],{"class":514},[504,1245,763],{"class":531},[504,1247,535],{"class":514},[504,1249,703],{"class":514},[504,1251,528],{"class":514},[504,1253,772],{"class":531},[504,1255,535],{"class":514},[504,1257,703],{"class":514},[504,1259,528],{"class":514},[504,1261,781],{"class":531},[504,1263,535],{"class":514},[504,1265,703],{"class":514},[504,1267,788],{"class":518},[504,1269,538],{"class":514},[504,1271,1272],{"class":506,"line":591},[504,1273,868],{"class":514},[478,1275,1277],{"id":1276},"extending-the-default-font-family-values","Extending the Default Font Family Values",[418,1279,1280],{},"You can extend the defaults with additional custom font families:",[486,1282,1283,1461],{},[489,1284,1285],{"icon":491,"label":492},[494,1286,1288],{"className":496,"code":1287,"filename":498,"language":499,"meta":500,"style":500},"import { styleframe } from 'styleframe';\nimport { useFontFamilyDesignTokens, defaultFontFamilyValues } from '@styleframe/theme';\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",[467,1289,1290,1310,1335,1339,1353,1357,1363,1369,1375,1381,1387,1394,1408,1418,1434,1446,1450],{"__ignoreMap":500},[504,1291,1292,1294,1296,1298,1300,1302,1304,1306,1308],{"class":506,"line":507},[504,1293,511],{"class":510},[504,1295,515],{"class":514},[504,1297,519],{"class":518},[504,1299,522],{"class":514},[504,1301,525],{"class":510},[504,1303,528],{"class":514},[504,1305,532],{"class":531},[504,1307,535],{"class":514},[504,1309,538],{"class":514},[504,1311,1312,1314,1316,1318,1320,1323,1325,1327,1329,1331,1333],{"class":506,"line":541},[504,1313,511],{"class":510},[504,1315,515],{"class":514},[504,1317,548],{"class":518},[504,1319,703],{"class":514},[504,1321,1322],{"class":518}," defaultFontFamilyValues",[504,1324,522],{"class":514},[504,1326,525],{"class":510},[504,1328,528],{"class":514},[504,1330,557],{"class":531},[504,1332,535],{"class":514},[504,1334,538],{"class":514},[504,1336,1337],{"class":506,"line":564},[504,1338,567],{"emptyLinePlaceholder":206},[504,1340,1341,1343,1345,1347,1349,1351],{"class":506,"line":570},[504,1342,574],{"class":573},[504,1344,577],{"class":518},[504,1346,580],{"class":514},[504,1348,519],{"class":583},[504,1350,586],{"class":518},[504,1352,538],{"class":514},[504,1354,1355],{"class":506,"line":591},[504,1356,567],{"emptyLinePlaceholder":206},[504,1358,1359,1361],{"class":506,"line":596},[504,1360,574],{"class":573},[504,1362,601],{"class":514},[504,1364,1365,1367],{"class":506,"line":604},[504,1366,607],{"class":518},[504,1368,610],{"class":514},[504,1370,1371,1373],{"class":506,"line":613},[504,1372,616],{"class":518},[504,1374,610],{"class":514},[504,1376,1377,1379],{"class":506,"line":621},[504,1378,624],{"class":518},[504,1380,610],{"class":514},[504,1382,1383,1385],{"class":506,"line":629},[504,1384,632],{"class":518},[504,1386,610],{"class":514},[504,1388,1389,1392],{"class":506,"line":637},[504,1390,1391],{"class":518},"    fontFamilyDisplay",[504,1393,610],{"class":514},[504,1395,1396,1398,1400,1402,1404,1406],{"class":506,"line":653},[504,1397,640],{"class":514},[504,1399,643],{"class":514},[504,1401,548],{"class":583},[504,1403,1036],{"class":518},[504,1405,703],{"class":514},[504,1407,601],{"class":514},[504,1409,1410,1413,1416],{"class":506,"line":658},[504,1411,1412],{"class":514},"    ...",[504,1414,1415],{"class":518},"defaultFontFamilyValues",[504,1417,610],{"class":514},[504,1419,1420,1423,1425,1427,1430,1432],{"class":506,"line":1094},[504,1421,1422],{"class":1045},"    display",[504,1424,685],{"class":514},[504,1426,1051],{"class":514},[504,1428,1429],{"class":531},"'Inter', -apple-system, BlinkMacSystemFont, sans-serif",[504,1431,1057],{"class":514},[504,1433,610],{"class":514},[504,1435,1436,1438,1440,1442,1444],{"class":506,"line":1110},[504,1437,640],{"class":514},[504,1439,1099],{"class":510},[504,1441,1102],{"class":573},[504,1443,1105],{"class":518},[504,1445,538],{"class":514},[504,1447,1448],{"class":506,"line":1115},[504,1449,567],{"emptyLinePlaceholder":206},[504,1451,1453,1455,1457,1459],{"class":506,"line":1452},17,[504,1454,661],{"class":510},[504,1456,664],{"class":510},[504,1458,667],{"class":518},[504,1460,538],{"class":514},[489,1462,1463],{"icon":140,"label":672},[494,1464,1466],{"className":675,"code":1465,"filename":677,"language":678,"meta":500,"style":500},":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",[467,1467,1468,1476,1526,1560,1606,1634,1648],{"__ignoreMap":500},[504,1469,1470,1472,1474],{"class":506,"line":507},[504,1471,685],{"class":514},[504,1473,688],{"class":573},[504,1475,601],{"class":514},[504,1477,1478,1480,1482,1484,1486,1488,1490,1492,1494,1496,1498,1500,1502,1504,1506,1508,1510,1512,1514,1516,1518,1520,1522,1524],{"class":506,"line":541},[504,1479,695],{"class":518},[504,1481,685],{"class":514},[504,1483,700],{"class":518},[504,1485,703],{"class":514},[504,1487,706],{"class":518},[504,1489,703],{"class":514},[504,1491,528],{"class":514},[504,1493,713],{"class":531},[504,1495,535],{"class":514},[504,1497,703],{"class":514},[504,1499,720],{"class":518},[504,1501,703],{"class":514},[504,1503,725],{"class":518},[504,1505,703],{"class":514},[504,1507,730],{"class":518},[504,1509,703],{"class":514},[504,1511,735],{"class":518},[504,1513,703],{"class":514},[504,1515,528],{"class":514},[504,1517,742],{"class":531},[504,1519,535],{"class":514},[504,1521,703],{"class":514},[504,1523,749],{"class":518},[504,1525,538],{"class":514},[504,1527,1528,1530,1532,1534,1536,1538,1540,1542,1544,1546,1548,1550,1552,1554,1556,1558],{"class":506,"line":564},[504,1529,756],{"class":518},[504,1531,685],{"class":514},[504,1533,528],{"class":514},[504,1535,763],{"class":531},[504,1537,535],{"class":514},[504,1539,703],{"class":514},[504,1541,528],{"class":514},[504,1543,772],{"class":531},[504,1545,535],{"class":514},[504,1547,703],{"class":514},[504,1549,528],{"class":514},[504,1551,781],{"class":531},[504,1553,535],{"class":514},[504,1555,703],{"class":514},[504,1557,788],{"class":518},[504,1559,538],{"class":514},[504,1561,1562,1564,1566,1568,1570,1572,1574,1576,1578,1580,1582,1584,1586,1588,1590,1592,1594,1596,1598,1600,1602,1604],{"class":506,"line":570},[504,1563,795],{"class":518},[504,1565,685],{"class":514},[504,1567,528],{"class":514},[504,1569,802],{"class":531},[504,1571,535],{"class":514},[504,1573,703],{"class":514},[504,1575,809],{"class":518},[504,1577,703],{"class":514},[504,1579,814],{"class":518},[504,1581,703],{"class":514},[504,1583,819],{"class":518},[504,1585,703],{"class":514},[504,1587,528],{"class":514},[504,1589,826],{"class":531},[504,1591,535],{"class":514},[504,1593,703],{"class":514},[504,1595,528],{"class":514},[504,1597,835],{"class":531},[504,1599,535],{"class":514},[504,1601,703],{"class":514},[504,1603,842],{"class":518},[504,1605,538],{"class":514},[504,1607,1608,1611,1613,1615,1618,1620,1622,1624,1626,1628,1630,1632],{"class":506,"line":591},[504,1609,1610],{"class":518},"    --font-family--display",[504,1612,685],{"class":514},[504,1614,528],{"class":514},[504,1616,1617],{"class":531},"Inter",[504,1619,535],{"class":514},[504,1621,703],{"class":514},[504,1623,700],{"class":518},[504,1625,703],{"class":514},[504,1627,706],{"class":518},[504,1629,703],{"class":514},[504,1631,749],{"class":518},[504,1633,538],{"class":514},[504,1635,1636,1638,1640,1642,1644,1646],{"class":506,"line":596},[504,1637,849],{"class":518},[504,1639,685],{"class":514},[504,1641,854],{"class":583},[504,1643,857],{"class":514},[504,1645,860],{"class":518},[504,1647,863],{"class":514},[504,1649,1650],{"class":506,"line":604},[504,1651,868],{"class":514},[414,1653,1655],{"id":1654},"usefontsizedesigntokens",[467,1656,1657],{},"useFontSizeDesignTokens",[418,1659,472,1660,1663],{},[467,1661,1662],{},"useFontSizeDesignTokens()"," function creates a set of font size variables.",[486,1665,1666,1923],{},[489,1667,1668],{"icon":491,"label":492},[494,1669,1671],{"className":496,"code":1670,"filename":498,"language":499,"meta":500,"style":500},"import { styleframe } from 'styleframe';\nimport { useFontSizeDesignTokens } from '@styleframe/theme';\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",[467,1672,1673,1693,1714,1718,1732,1736,1742,1749,1756,1763,1770,1777,1784,1798,1813,1829,1845,1860,1877,1894,1907,1912],{"__ignoreMap":500},[504,1674,1675,1677,1679,1681,1683,1685,1687,1689,1691],{"class":506,"line":507},[504,1676,511],{"class":510},[504,1678,515],{"class":514},[504,1680,519],{"class":518},[504,1682,522],{"class":514},[504,1684,525],{"class":510},[504,1686,528],{"class":514},[504,1688,532],{"class":531},[504,1690,535],{"class":514},[504,1692,538],{"class":514},[504,1694,1695,1697,1699,1702,1704,1706,1708,1710,1712],{"class":506,"line":541},[504,1696,511],{"class":510},[504,1698,515],{"class":514},[504,1700,1701],{"class":518}," useFontSizeDesignTokens",[504,1703,522],{"class":514},[504,1705,525],{"class":510},[504,1707,528],{"class":514},[504,1709,557],{"class":531},[504,1711,535],{"class":514},[504,1713,538],{"class":514},[504,1715,1716],{"class":506,"line":564},[504,1717,567],{"emptyLinePlaceholder":206},[504,1719,1720,1722,1724,1726,1728,1730],{"class":506,"line":570},[504,1721,574],{"class":573},[504,1723,577],{"class":518},[504,1725,580],{"class":514},[504,1727,519],{"class":583},[504,1729,586],{"class":518},[504,1731,538],{"class":514},[504,1733,1734],{"class":506,"line":591},[504,1735,567],{"emptyLinePlaceholder":206},[504,1737,1738,1740],{"class":506,"line":596},[504,1739,574],{"class":573},[504,1741,601],{"class":514},[504,1743,1744,1747],{"class":506,"line":604},[504,1745,1746],{"class":518},"    fontSize",[504,1748,610],{"class":514},[504,1750,1751,1754],{"class":506,"line":613},[504,1752,1753],{"class":518},"    fontSizeXs",[504,1755,610],{"class":514},[504,1757,1758,1761],{"class":506,"line":621},[504,1759,1760],{"class":518},"    fontSizeSm",[504,1762,610],{"class":514},[504,1764,1765,1768],{"class":506,"line":629},[504,1766,1767],{"class":518},"    fontSizeMd",[504,1769,610],{"class":514},[504,1771,1772,1775],{"class":506,"line":637},[504,1773,1774],{"class":518},"    fontSizeLg",[504,1776,610],{"class":514},[504,1778,1779,1782],{"class":506,"line":653},[504,1780,1781],{"class":518},"    fontSizeXl",[504,1783,610],{"class":514},[504,1785,1786,1788,1790,1792,1794,1796],{"class":506,"line":658},[504,1787,640],{"class":514},[504,1789,643],{"class":514},[504,1791,1701],{"class":583},[504,1793,1036],{"class":518},[504,1795,703],{"class":514},[504,1797,601],{"class":514},[504,1799,1800,1802,1804,1806,1809,1811],{"class":506,"line":1094},[504,1801,1046],{"class":1045},[504,1803,685],{"class":514},[504,1805,528],{"class":514},[504,1807,1808],{"class":531},"1rem",[504,1810,535],{"class":514},[504,1812,610],{"class":514},[504,1814,1815,1818,1820,1822,1825,1827],{"class":506,"line":1110},[504,1816,1817],{"class":1045},"    xs",[504,1819,685],{"class":514},[504,1821,528],{"class":514},[504,1823,1824],{"class":531},"0.75rem",[504,1826,535],{"class":514},[504,1828,610],{"class":514},[504,1830,1831,1834,1836,1838,1841,1843],{"class":506,"line":1115},[504,1832,1833],{"class":1045},"    sm",[504,1835,685],{"class":514},[504,1837,528],{"class":514},[504,1839,1840],{"class":531},"0.875rem",[504,1842,535],{"class":514},[504,1844,610],{"class":514},[504,1846,1847,1850,1852,1854,1856,1858],{"class":506,"line":1452},[504,1848,1849],{"class":1045},"    md",[504,1851,685],{"class":514},[504,1853,528],{"class":514},[504,1855,1808],{"class":531},[504,1857,535],{"class":514},[504,1859,610],{"class":514},[504,1861,1863,1866,1868,1870,1873,1875],{"class":506,"line":1862},18,[504,1864,1865],{"class":1045},"    lg",[504,1867,685],{"class":514},[504,1869,528],{"class":514},[504,1871,1872],{"class":531},"1.25rem",[504,1874,535],{"class":514},[504,1876,610],{"class":514},[504,1878,1880,1883,1885,1887,1890,1892],{"class":506,"line":1879},19,[504,1881,1882],{"class":1045},"    xl",[504,1884,685],{"class":514},[504,1886,528],{"class":514},[504,1888,1889],{"class":531},"1.5rem",[504,1891,535],{"class":514},[504,1893,610],{"class":514},[504,1895,1897,1899,1901,1903,1905],{"class":506,"line":1896},20,[504,1898,640],{"class":514},[504,1900,1099],{"class":510},[504,1902,1102],{"class":573},[504,1904,1105],{"class":518},[504,1906,538],{"class":514},[504,1908,1910],{"class":506,"line":1909},21,[504,1911,567],{"emptyLinePlaceholder":206},[504,1913,1915,1917,1919,1921],{"class":506,"line":1914},22,[504,1916,661],{"class":510},[504,1918,664],{"class":510},[504,1920,667],{"class":518},[504,1922,538],{"class":514},[489,1924,1925],{"icon":140,"label":672},[494,1926,1928],{"className":675,"code":1927,"filename":677,"language":678,"meta":500,"style":500},":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",[467,1929,1930,1938,1951,1963,1975,1986,1998,2010],{"__ignoreMap":500},[504,1931,1932,1934,1936],{"class":506,"line":507},[504,1933,685],{"class":514},[504,1935,688],{"class":573},[504,1937,601],{"class":514},[504,1939,1940,1943,1945,1949],{"class":506,"line":541},[504,1941,1942],{"class":518},"    --font-size",[504,1944,685],{"class":514},[504,1946,1948],{"class":1947},"sbssI"," 1rem",[504,1950,538],{"class":514},[504,1952,1953,1956,1958,1961],{"class":506,"line":564},[504,1954,1955],{"class":518},"    --font-size--xs",[504,1957,685],{"class":514},[504,1959,1960],{"class":1947}," 0.75rem",[504,1962,538],{"class":514},[504,1964,1965,1968,1970,1973],{"class":506,"line":570},[504,1966,1967],{"class":518},"    --font-size--sm",[504,1969,685],{"class":514},[504,1971,1972],{"class":1947}," 0.875rem",[504,1974,538],{"class":514},[504,1976,1977,1980,1982,1984],{"class":506,"line":591},[504,1978,1979],{"class":518},"    --font-size--md",[504,1981,685],{"class":514},[504,1983,1948],{"class":1947},[504,1985,538],{"class":514},[504,1987,1988,1991,1993,1996],{"class":506,"line":596},[504,1989,1990],{"class":518},"    --font-size--lg",[504,1992,685],{"class":514},[504,1994,1995],{"class":1947}," 1.25rem",[504,1997,538],{"class":514},[504,1999,2000,2003,2005,2008],{"class":506,"line":604},[504,2001,2002],{"class":518},"    --font-size--xl",[504,2004,685],{"class":514},[504,2006,2007],{"class":1947}," 1.5rem",[504,2009,538],{"class":514},[504,2011,2012],{"class":506,"line":613},[504,2013,868],{"class":514},[478,2015,2017,2018],{"id":2016},"integration-with-usemultiplierdesigntokens","Integration with ",[467,2019,2020],{},"useMultiplierDesignTokens",[418,2022,2023,2024,2026,2027,2030],{},"The real power of ",[467,2025,1657],{}," comes when combined with ",[467,2028,2029],{},"useMultiplierDesignTokens()"," and modular scales. This allows you to create mathematically harmonious type systems:",[486,2032,2033,2584],{},[489,2034,2035],{"icon":491,"label":492},[494,2036,2038],{"className":496,"code":2037,"filename":498,"language":499,"meta":500,"style":500},"import { styleframe } from 'styleframe';\nimport { useScaleDesignTokens, useScalePowersDesignTokens, useMultiplierDesignTokens, useFontSizeDesignTokens, defaultScaleValues } from '@styleframe/theme';\n\nconst s = styleframe();\n\n// Use Perfect Fourth scale (1.333) for clear typographic hierarchy\nconst { scale } = useScaleDesignTokens(s, { ...defaultScaleValues, default: '@scale.perfect-fourth' });\n\n// Define base font size\nconst { fontSize } = useFontSizeDesignTokens(s, { default: '1rem' });\n\n// Create scale powers\nconst scalePowers = useScalePowersDesignTokens(s, scale, [-2, -1, 0, 1, 2, 3, 4, 5]);\n\n// 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],   // ~0.56rem\n    sm: scalePowers[-1],   // ~0.75rem\n    md: scalePowers[0],    // 1rem (base)\n    lg: scalePowers[1],    // ~1.33rem\n    xl: scalePowers[2],    // ~1.78rem\n    '2xl': scalePowers[3], // ~2.37rem\n    '3xl': scalePowers[4], // ~3.16rem\n    '4xl': scalePowers[5], // ~4.21rem\n});\n\nexport default s;\n",[467,2039,2040,2060,2100,2104,2118,2122,2128,2174,2178,2183,2220,2224,2229,2301,2305,2310,2316,2322,2328,2334,2340,2346,2353,2361,2369,2389,2411,2431,2450,2468,2486,2511,2535,2559,2568,2573],{"__ignoreMap":500},[504,2041,2042,2044,2046,2048,2050,2052,2054,2056,2058],{"class":506,"line":507},[504,2043,511],{"class":510},[504,2045,515],{"class":514},[504,2047,519],{"class":518},[504,2049,522],{"class":514},[504,2051,525],{"class":510},[504,2053,528],{"class":514},[504,2055,532],{"class":531},[504,2057,535],{"class":514},[504,2059,538],{"class":514},[504,2061,2062,2064,2066,2069,2071,2074,2076,2079,2081,2083,2085,2088,2090,2092,2094,2096,2098],{"class":506,"line":541},[504,2063,511],{"class":510},[504,2065,515],{"class":514},[504,2067,2068],{"class":518}," useScaleDesignTokens",[504,2070,703],{"class":514},[504,2072,2073],{"class":518}," useScalePowersDesignTokens",[504,2075,703],{"class":514},[504,2077,2078],{"class":518}," useMultiplierDesignTokens",[504,2080,703],{"class":514},[504,2082,1701],{"class":518},[504,2084,703],{"class":514},[504,2086,2087],{"class":518}," defaultScaleValues",[504,2089,522],{"class":514},[504,2091,525],{"class":510},[504,2093,528],{"class":514},[504,2095,557],{"class":531},[504,2097,535],{"class":514},[504,2099,538],{"class":514},[504,2101,2102],{"class":506,"line":564},[504,2103,567],{"emptyLinePlaceholder":206},[504,2105,2106,2108,2110,2112,2114,2116],{"class":506,"line":570},[504,2107,574],{"class":573},[504,2109,577],{"class":518},[504,2111,580],{"class":514},[504,2113,519],{"class":583},[504,2115,586],{"class":518},[504,2117,538],{"class":514},[504,2119,2120],{"class":506,"line":591},[504,2121,567],{"emptyLinePlaceholder":206},[504,2123,2124],{"class":506,"line":596},[504,2125,2127],{"class":2126},"sHwdD","// Use Perfect Fourth scale (1.333) for clear typographic hierarchy\n",[504,2129,2130,2132,2134,2137,2139,2141,2143,2145,2147,2149,2152,2155,2157,2159,2161,2163,2166,2168,2170,2172],{"class":506,"line":604},[504,2131,574],{"class":573},[504,2133,515],{"class":514},[504,2135,2136],{"class":518}," scale ",[504,2138,640],{"class":514},[504,2140,643],{"class":514},[504,2142,2068],{"class":583},[504,2144,1036],{"class":518},[504,2146,703],{"class":514},[504,2148,515],{"class":514},[504,2150,2151],{"class":514}," ...",[504,2153,2154],{"class":518},"defaultScaleValues",[504,2156,703],{"class":514},[504,2158,664],{"class":1045},[504,2160,685],{"class":514},[504,2162,528],{"class":514},[504,2164,2165],{"class":531},"@scale.perfect-fourth",[504,2167,535],{"class":514},[504,2169,522],{"class":514},[504,2171,1105],{"class":518},[504,2173,538],{"class":514},[504,2175,2176],{"class":506,"line":613},[504,2177,567],{"emptyLinePlaceholder":206},[504,2179,2180],{"class":506,"line":621},[504,2181,2182],{"class":2126},"// Define base font size\n",[504,2184,2185,2187,2189,2192,2194,2196,2198,2200,2202,2204,2206,2208,2210,2212,2214,2216,2218],{"class":506,"line":629},[504,2186,574],{"class":573},[504,2188,515],{"class":514},[504,2190,2191],{"class":518}," fontSize ",[504,2193,640],{"class":514},[504,2195,643],{"class":514},[504,2197,1701],{"class":583},[504,2199,1036],{"class":518},[504,2201,703],{"class":514},[504,2203,515],{"class":514},[504,2205,664],{"class":1045},[504,2207,685],{"class":514},[504,2209,528],{"class":514},[504,2211,1808],{"class":531},[504,2213,535],{"class":514},[504,2215,522],{"class":514},[504,2217,1105],{"class":518},[504,2219,538],{"class":514},[504,2221,2222],{"class":506,"line":637},[504,2223,567],{"emptyLinePlaceholder":206},[504,2225,2226],{"class":506,"line":653},[504,2227,2228],{"class":2126},"// Create scale powers\n",[504,2230,2231,2233,2236,2238,2240,2242,2244,2247,2249,2252,2255,2258,2260,2263,2266,2268,2271,2273,2276,2278,2281,2283,2286,2288,2291,2293,2296,2299],{"class":506,"line":658},[504,2232,574],{"class":573},[504,2234,2235],{"class":518}," scalePowers ",[504,2237,580],{"class":514},[504,2239,2073],{"class":583},[504,2241,1036],{"class":518},[504,2243,703],{"class":514},[504,2245,2246],{"class":518}," scale",[504,2248,703],{"class":514},[504,2250,2251],{"class":518}," [",[504,2253,2254],{"class":514},"-",[504,2256,2257],{"class":1947},"2",[504,2259,703],{"class":514},[504,2261,2262],{"class":514}," -",[504,2264,2265],{"class":1947},"1",[504,2267,703],{"class":514},[504,2269,2270],{"class":1947}," 0",[504,2272,703],{"class":514},[504,2274,2275],{"class":1947}," 1",[504,2277,703],{"class":514},[504,2279,2280],{"class":1947}," 2",[504,2282,703],{"class":514},[504,2284,2285],{"class":1947}," 3",[504,2287,703],{"class":514},[504,2289,2290],{"class":1947}," 4",[504,2292,703],{"class":514},[504,2294,2295],{"class":1947}," 5",[504,2297,2298],{"class":518},"])",[504,2300,538],{"class":514},[504,2302,2303],{"class":506,"line":1094},[504,2304,567],{"emptyLinePlaceholder":206},[504,2306,2307],{"class":506,"line":1110},[504,2308,2309],{"class":2126},"// Generate font size scale automatically\n",[504,2311,2312,2314],{"class":506,"line":1115},[504,2313,574],{"class":573},[504,2315,601],{"class":514},[504,2317,2318,2320],{"class":506,"line":1452},[504,2319,1753],{"class":518},[504,2321,610],{"class":514},[504,2323,2324,2326],{"class":506,"line":1862},[504,2325,1760],{"class":518},[504,2327,610],{"class":514},[504,2329,2330,2332],{"class":506,"line":1879},[504,2331,1767],{"class":518},[504,2333,610],{"class":514},[504,2335,2336,2338],{"class":506,"line":1896},[504,2337,1774],{"class":518},[504,2339,610],{"class":514},[504,2341,2342,2344],{"class":506,"line":1909},[504,2343,1781],{"class":518},[504,2345,610],{"class":514},[504,2347,2348,2351],{"class":506,"line":1914},[504,2349,2350],{"class":518},"    fontSize2xl",[504,2352,610],{"class":514},[504,2354,2356,2359],{"class":506,"line":2355},23,[504,2357,2358],{"class":518},"    fontSize3xl",[504,2360,610],{"class":514},[504,2362,2364,2367],{"class":506,"line":2363},24,[504,2365,2366],{"class":518},"    fontSize4xl",[504,2368,610],{"class":514},[504,2370,2372,2374,2376,2378,2380,2382,2385,2387],{"class":506,"line":2371},25,[504,2373,640],{"class":514},[504,2375,643],{"class":514},[504,2377,2078],{"class":583},[504,2379,1036],{"class":518},[504,2381,703],{"class":514},[504,2383,2384],{"class":518}," fontSize",[504,2386,703],{"class":514},[504,2388,601],{"class":514},[504,2390,2392,2394,2396,2399,2401,2403,2406,2408],{"class":506,"line":2391},26,[504,2393,1817],{"class":1045},[504,2395,685],{"class":514},[504,2397,2398],{"class":518}," scalePowers[",[504,2400,2254],{"class":514},[504,2402,2257],{"class":1947},[504,2404,2405],{"class":518},"]",[504,2407,703],{"class":514},[504,2409,2410],{"class":2126},"   // ~0.56rem\n",[504,2412,2414,2416,2418,2420,2422,2424,2426,2428],{"class":506,"line":2413},27,[504,2415,1833],{"class":1045},[504,2417,685],{"class":514},[504,2419,2398],{"class":518},[504,2421,2254],{"class":514},[504,2423,2265],{"class":1947},[504,2425,2405],{"class":518},[504,2427,703],{"class":514},[504,2429,2430],{"class":2126},"   // ~0.75rem\n",[504,2432,2434,2436,2438,2440,2443,2445,2447],{"class":506,"line":2433},28,[504,2435,1849],{"class":1045},[504,2437,685],{"class":514},[504,2439,2398],{"class":518},[504,2441,2442],{"class":1947},"0",[504,2444,2405],{"class":518},[504,2446,703],{"class":514},[504,2448,2449],{"class":2126},"    // 1rem (base)\n",[504,2451,2453,2455,2457,2459,2461,2463,2465],{"class":506,"line":2452},29,[504,2454,1865],{"class":1045},[504,2456,685],{"class":514},[504,2458,2398],{"class":518},[504,2460,2265],{"class":1947},[504,2462,2405],{"class":518},[504,2464,703],{"class":514},[504,2466,2467],{"class":2126},"    // ~1.33rem\n",[504,2469,2471,2473,2475,2477,2479,2481,2483],{"class":506,"line":2470},30,[504,2472,1882],{"class":1045},[504,2474,685],{"class":514},[504,2476,2398],{"class":518},[504,2478,2257],{"class":1947},[504,2480,2405],{"class":518},[504,2482,703],{"class":514},[504,2484,2485],{"class":2126},"    // ~1.78rem\n",[504,2487,2489,2492,2495,2497,2499,2501,2504,2506,2508],{"class":506,"line":2488},31,[504,2490,2491],{"class":514},"    '",[504,2493,2494],{"class":1045},"2xl",[504,2496,535],{"class":514},[504,2498,685],{"class":514},[504,2500,2398],{"class":518},[504,2502,2503],{"class":1947},"3",[504,2505,2405],{"class":518},[504,2507,703],{"class":514},[504,2509,2510],{"class":2126}," // ~2.37rem\n",[504,2512,2514,2516,2519,2521,2523,2525,2528,2530,2532],{"class":506,"line":2513},32,[504,2515,2491],{"class":514},[504,2517,2518],{"class":1045},"3xl",[504,2520,535],{"class":514},[504,2522,685],{"class":514},[504,2524,2398],{"class":518},[504,2526,2527],{"class":1947},"4",[504,2529,2405],{"class":518},[504,2531,703],{"class":514},[504,2533,2534],{"class":2126}," // ~3.16rem\n",[504,2536,2538,2540,2543,2545,2547,2549,2552,2554,2556],{"class":506,"line":2537},33,[504,2539,2491],{"class":514},[504,2541,2542],{"class":1045},"4xl",[504,2544,535],{"class":514},[504,2546,685],{"class":514},[504,2548,2398],{"class":518},[504,2550,2551],{"class":1947},"5",[504,2553,2405],{"class":518},[504,2555,703],{"class":514},[504,2557,2558],{"class":2126}," // ~4.21rem\n",[504,2560,2562,2564,2566],{"class":506,"line":2561},34,[504,2563,640],{"class":514},[504,2565,1105],{"class":518},[504,2567,538],{"class":514},[504,2569,2571],{"class":506,"line":2570},35,[504,2572,567],{"emptyLinePlaceholder":206},[504,2574,2576,2578,2580,2582],{"class":506,"line":2575},36,[504,2577,661],{"class":510},[504,2579,664],{"class":510},[504,2581,667],{"class":518},[504,2583,538],{"class":514},[489,2585,2586],{"icon":140,"label":672},[494,2587,2589],{"className":675,"code":2588,"filename":677,"language":678,"meta":500,"style":500},":root {\n    --scale--perfect-fourth: 1.333;\n    --scale: var(--scale--perfect-fourth);\n    --scale-power---2: calc(1 / var(--scale) / var(--scale));\n    --scale-power---1: calc(1 / 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",[467,2590,2591,2599,2611,2627,2664,2687,2698,2713,2744,2783,2832,2891,2901,2931,2960,2989,3018,3047,3077,3107,3137],{"__ignoreMap":500},[504,2592,2593,2595,2597],{"class":506,"line":507},[504,2594,685],{"class":514},[504,2596,688],{"class":573},[504,2598,601],{"class":514},[504,2600,2601,2604,2606,2609],{"class":506,"line":541},[504,2602,2603],{"class":518},"    --scale--perfect-fourth",[504,2605,685],{"class":514},[504,2607,2608],{"class":1947}," 1.333",[504,2610,538],{"class":514},[504,2612,2613,2616,2618,2620,2622,2625],{"class":506,"line":564},[504,2614,2615],{"class":518},"    --scale",[504,2617,685],{"class":514},[504,2619,854],{"class":583},[504,2621,857],{"class":514},[504,2623,2624],{"class":518},"--scale--perfect-fourth",[504,2626,863],{"class":514},[504,2628,2629,2632,2634,2637,2639,2641,2644,2646,2648,2651,2653,2655,2657,2659,2661],{"class":506,"line":570},[504,2630,2631],{"class":518},"    --scale-power---2",[504,2633,685],{"class":514},[504,2635,2636],{"class":583}," calc",[504,2638,857],{"class":514},[504,2640,2265],{"class":1947},[504,2642,2643],{"class":514}," /",[504,2645,854],{"class":583},[504,2647,857],{"class":514},[504,2649,2650],{"class":518},"--scale",[504,2652,1105],{"class":514},[504,2654,2643],{"class":514},[504,2656,854],{"class":583},[504,2658,857],{"class":514},[504,2660,2650],{"class":518},[504,2662,2663],{"class":514},"));\n",[504,2665,2666,2669,2671,2673,2675,2677,2679,2681,2683,2685],{"class":506,"line":591},[504,2667,2668],{"class":518},"    --scale-power---1",[504,2670,685],{"class":514},[504,2672,2636],{"class":583},[504,2674,857],{"class":514},[504,2676,2265],{"class":1947},[504,2678,2643],{"class":514},[504,2680,854],{"class":583},[504,2682,857],{"class":514},[504,2684,2650],{"class":518},[504,2686,2663],{"class":514},[504,2688,2689,2692,2694,2696],{"class":506,"line":596},[504,2690,2691],{"class":518},"    --scale-power--0",[504,2693,685],{"class":514},[504,2695,2275],{"class":1947},[504,2697,538],{"class":514},[504,2699,2700,2703,2705,2707,2709,2711],{"class":506,"line":604},[504,2701,2702],{"class":518},"    --scale-power--1",[504,2704,685],{"class":514},[504,2706,854],{"class":583},[504,2708,857],{"class":514},[504,2710,2650],{"class":518},[504,2712,863],{"class":514},[504,2714,2715,2718,2720,2722,2724,2727,2729,2731,2733,2736,2738,2740,2742],{"class":506,"line":613},[504,2716,2717],{"class":518},"    --scale-power--2",[504,2719,685],{"class":514},[504,2721,2636],{"class":583},[504,2723,857],{"class":514},[504,2725,2726],{"class":583},"var",[504,2728,857],{"class":514},[504,2730,2650],{"class":518},[504,2732,1105],{"class":514},[504,2734,2735],{"class":514}," *",[504,2737,854],{"class":583},[504,2739,857],{"class":514},[504,2741,2650],{"class":518},[504,2743,2663],{"class":514},[504,2745,2746,2749,2751,2753,2755,2757,2759,2761,2763,2765,2767,2769,2771,2773,2775,2777,2779,2781],{"class":506,"line":621},[504,2747,2748],{"class":518},"    --scale-power--3",[504,2750,685],{"class":514},[504,2752,2636],{"class":583},[504,2754,857],{"class":514},[504,2756,2726],{"class":583},[504,2758,857],{"class":514},[504,2760,2650],{"class":518},[504,2762,1105],{"class":514},[504,2764,2735],{"class":514},[504,2766,854],{"class":583},[504,2768,857],{"class":514},[504,2770,2650],{"class":518},[504,2772,1105],{"class":514},[504,2774,2735],{"class":514},[504,2776,854],{"class":583},[504,2778,857],{"class":514},[504,2780,2650],{"class":518},[504,2782,2663],{"class":514},[504,2784,2785,2788,2790,2792,2794,2796,2798,2800,2802,2804,2806,2808,2810,2812,2814,2816,2818,2820,2822,2824,2826,2828,2830],{"class":506,"line":629},[504,2786,2787],{"class":518},"    --scale-power--4",[504,2789,685],{"class":514},[504,2791,2636],{"class":583},[504,2793,857],{"class":514},[504,2795,2726],{"class":583},[504,2797,857],{"class":514},[504,2799,2650],{"class":518},[504,2801,1105],{"class":514},[504,2803,2735],{"class":514},[504,2805,854],{"class":583},[504,2807,857],{"class":514},[504,2809,2650],{"class":518},[504,2811,1105],{"class":514},[504,2813,2735],{"class":514},[504,2815,854],{"class":583},[504,2817,857],{"class":514},[504,2819,2650],{"class":518},[504,2821,1105],{"class":514},[504,2823,2735],{"class":514},[504,2825,854],{"class":583},[504,2827,857],{"class":514},[504,2829,2650],{"class":518},[504,2831,2663],{"class":514},[504,2833,2834,2837,2839,2841,2843,2845,2847,2849,2851,2853,2855,2857,2859,2861,2863,2865,2867,2869,2871,2873,2875,2877,2879,2881,2883,2885,2887,2889],{"class":506,"line":637},[504,2835,2836],{"class":518},"    --scale-power--5",[504,2838,685],{"class":514},[504,2840,2636],{"class":583},[504,2842,857],{"class":514},[504,2844,2726],{"class":583},[504,2846,857],{"class":514},[504,2848,2650],{"class":518},[504,2850,1105],{"class":514},[504,2852,2735],{"class":514},[504,2854,854],{"class":583},[504,2856,857],{"class":514},[504,2858,2650],{"class":518},[504,2860,1105],{"class":514},[504,2862,2735],{"class":514},[504,2864,854],{"class":583},[504,2866,857],{"class":514},[504,2868,2650],{"class":518},[504,2870,1105],{"class":514},[504,2872,2735],{"class":514},[504,2874,854],{"class":583},[504,2876,857],{"class":514},[504,2878,2650],{"class":518},[504,2880,1105],{"class":514},[504,2882,2735],{"class":514},[504,2884,854],{"class":583},[504,2886,857],{"class":514},[504,2888,2650],{"class":518},[504,2890,2663],{"class":514},[504,2892,2893,2895,2897,2899],{"class":506,"line":653},[504,2894,1942],{"class":518},[504,2896,685],{"class":514},[504,2898,1948],{"class":1947},[504,2900,538],{"class":514},[504,2902,2903,2905,2907,2909,2911,2913,2915,2918,2920,2922,2924,2926,2929],{"class":506,"line":658},[504,2904,1955],{"class":518},[504,2906,685],{"class":514},[504,2908,2636],{"class":583},[504,2910,857],{"class":514},[504,2912,2726],{"class":583},[504,2914,857],{"class":514},[504,2916,2917],{"class":518},"--font-size",[504,2919,1105],{"class":514},[504,2921,2735],{"class":514},[504,2923,854],{"class":583},[504,2925,857],{"class":514},[504,2927,2928],{"class":518},"--scale-power---2",[504,2930,2663],{"class":514},[504,2932,2933,2935,2937,2939,2941,2943,2945,2947,2949,2951,2953,2955,2958],{"class":506,"line":1094},[504,2934,1967],{"class":518},[504,2936,685],{"class":514},[504,2938,2636],{"class":583},[504,2940,857],{"class":514},[504,2942,2726],{"class":583},[504,2944,857],{"class":514},[504,2946,2917],{"class":518},[504,2948,1105],{"class":514},[504,2950,2735],{"class":514},[504,2952,854],{"class":583},[504,2954,857],{"class":514},[504,2956,2957],{"class":518},"--scale-power---1",[504,2959,2663],{"class":514},[504,2961,2962,2964,2966,2968,2970,2972,2974,2976,2978,2980,2982,2984,2987],{"class":506,"line":1110},[504,2963,1979],{"class":518},[504,2965,685],{"class":514},[504,2967,2636],{"class":583},[504,2969,857],{"class":514},[504,2971,2726],{"class":583},[504,2973,857],{"class":514},[504,2975,2917],{"class":518},[504,2977,1105],{"class":514},[504,2979,2735],{"class":514},[504,2981,854],{"class":583},[504,2983,857],{"class":514},[504,2985,2986],{"class":518},"--scale-power--0",[504,2988,2663],{"class":514},[504,2990,2991,2993,2995,2997,2999,3001,3003,3005,3007,3009,3011,3013,3016],{"class":506,"line":1115},[504,2992,1990],{"class":518},[504,2994,685],{"class":514},[504,2996,2636],{"class":583},[504,2998,857],{"class":514},[504,3000,2726],{"class":583},[504,3002,857],{"class":514},[504,3004,2917],{"class":518},[504,3006,1105],{"class":514},[504,3008,2735],{"class":514},[504,3010,854],{"class":583},[504,3012,857],{"class":514},[504,3014,3015],{"class":518},"--scale-power--1",[504,3017,2663],{"class":514},[504,3019,3020,3022,3024,3026,3028,3030,3032,3034,3036,3038,3040,3042,3045],{"class":506,"line":1452},[504,3021,2002],{"class":518},[504,3023,685],{"class":514},[504,3025,2636],{"class":583},[504,3027,857],{"class":514},[504,3029,2726],{"class":583},[504,3031,857],{"class":514},[504,3033,2917],{"class":518},[504,3035,1105],{"class":514},[504,3037,2735],{"class":514},[504,3039,854],{"class":583},[504,3041,857],{"class":514},[504,3043,3044],{"class":518},"--scale-power--2",[504,3046,2663],{"class":514},[504,3048,3049,3052,3054,3056,3058,3060,3062,3064,3066,3068,3070,3072,3075],{"class":506,"line":1862},[504,3050,3051],{"class":518},"    --font-size--2xl",[504,3053,685],{"class":514},[504,3055,2636],{"class":583},[504,3057,857],{"class":514},[504,3059,2726],{"class":583},[504,3061,857],{"class":514},[504,3063,2917],{"class":518},[504,3065,1105],{"class":514},[504,3067,2735],{"class":514},[504,3069,854],{"class":583},[504,3071,857],{"class":514},[504,3073,3074],{"class":518},"--scale-power--3",[504,3076,2663],{"class":514},[504,3078,3079,3082,3084,3086,3088,3090,3092,3094,3096,3098,3100,3102,3105],{"class":506,"line":1879},[504,3080,3081],{"class":518},"    --font-size--3xl",[504,3083,685],{"class":514},[504,3085,2636],{"class":583},[504,3087,857],{"class":514},[504,3089,2726],{"class":583},[504,3091,857],{"class":514},[504,3093,2917],{"class":518},[504,3095,1105],{"class":514},[504,3097,2735],{"class":514},[504,3099,854],{"class":583},[504,3101,857],{"class":514},[504,3103,3104],{"class":518},"--scale-power--4",[504,3106,2663],{"class":514},[504,3108,3109,3112,3114,3116,3118,3120,3122,3124,3126,3128,3130,3132,3135],{"class":506,"line":1896},[504,3110,3111],{"class":518},"    --font-size--4xl",[504,3113,685],{"class":514},[504,3115,2636],{"class":583},[504,3117,857],{"class":514},[504,3119,2726],{"class":583},[504,3121,857],{"class":514},[504,3123,2917],{"class":518},[504,3125,1105],{"class":514},[504,3127,2735],{"class":514},[504,3129,854],{"class":583},[504,3131,857],{"class":514},[504,3133,3134],{"class":518},"--scale-power--5",[504,3136,2663],{"class":514},[504,3138,3139],{"class":506,"line":1909},[504,3140,868],{"class":514},[418,3142,472,3143,3145],{},[467,3144,2029],{}," function multiplies your base font size by the scale powers, creating a harmonious progression of sizes that maintain consistent proportional relationships.",[418,3147,3148,3152],{},[3149,3150,3151],"a",{"href":209},"Read more about design scales"," and take advantage of the flexibility they offer.",[910,3154,3155,3157,3158,3160],{},[435,3156,914],{}," Using ",[467,3159,2029],{}," 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.",[414,3162,3164],{"id":3163},"usefontweightdesigntokens",[467,3165,3166],{},"useFontWeightDesignTokens",[418,3168,472,3169,3172],{},[467,3170,3171],{},"useFontWeightDesignTokens()"," function creates a set of font weight variables covering the standard range of weights.",[418,3174,3175],{},"Styleframe provides a comprehensive set of default font weight values:",[486,3177,3178,3357],{},[489,3179,3180],{"icon":491,"label":492},[494,3181,3183],{"className":496,"code":3182,"filename":498,"language":499,"meta":500,"style":500},"import { styleframe } from 'styleframe';\nimport { useFontWeightDesignTokens } from '@styleframe/theme';\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",[467,3184,3185,3205,3226,3230,3244,3248,3254,3261,3268,3275,3282,3289,3296,3303,3310,3317,3324,3331,3343,3347],{"__ignoreMap":500},[504,3186,3187,3189,3191,3193,3195,3197,3199,3201,3203],{"class":506,"line":507},[504,3188,511],{"class":510},[504,3190,515],{"class":514},[504,3192,519],{"class":518},[504,3194,522],{"class":514},[504,3196,525],{"class":510},[504,3198,528],{"class":514},[504,3200,532],{"class":531},[504,3202,535],{"class":514},[504,3204,538],{"class":514},[504,3206,3207,3209,3211,3214,3216,3218,3220,3222,3224],{"class":506,"line":541},[504,3208,511],{"class":510},[504,3210,515],{"class":514},[504,3212,3213],{"class":518}," useFontWeightDesignTokens",[504,3215,522],{"class":514},[504,3217,525],{"class":510},[504,3219,528],{"class":514},[504,3221,557],{"class":531},[504,3223,535],{"class":514},[504,3225,538],{"class":514},[504,3227,3228],{"class":506,"line":564},[504,3229,567],{"emptyLinePlaceholder":206},[504,3231,3232,3234,3236,3238,3240,3242],{"class":506,"line":570},[504,3233,574],{"class":573},[504,3235,577],{"class":518},[504,3237,580],{"class":514},[504,3239,519],{"class":583},[504,3241,586],{"class":518},[504,3243,538],{"class":514},[504,3245,3246],{"class":506,"line":591},[504,3247,567],{"emptyLinePlaceholder":206},[504,3249,3250,3252],{"class":506,"line":596},[504,3251,574],{"class":573},[504,3253,601],{"class":514},[504,3255,3256,3259],{"class":506,"line":604},[504,3257,3258],{"class":518},"    fontWeight",[504,3260,610],{"class":514},[504,3262,3263,3266],{"class":506,"line":613},[504,3264,3265],{"class":518},"    fontWeightExtralight",[504,3267,610],{"class":514},[504,3269,3270,3273],{"class":506,"line":621},[504,3271,3272],{"class":518},"    fontWeightLight",[504,3274,610],{"class":514},[504,3276,3277,3280],{"class":506,"line":629},[504,3278,3279],{"class":518},"    fontWeightNormal",[504,3281,610],{"class":514},[504,3283,3284,3287],{"class":506,"line":637},[504,3285,3286],{"class":518},"    fontWeightMedium",[504,3288,610],{"class":514},[504,3290,3291,3294],{"class":506,"line":653},[504,3292,3293],{"class":518},"    fontWeightSemibold",[504,3295,610],{"class":514},[504,3297,3298,3301],{"class":506,"line":658},[504,3299,3300],{"class":518},"    fontWeightBold",[504,3302,610],{"class":514},[504,3304,3305,3308],{"class":506,"line":1094},[504,3306,3307],{"class":518},"    fontWeightBlack",[504,3309,610],{"class":514},[504,3311,3312,3315],{"class":506,"line":1110},[504,3313,3314],{"class":518},"    fontWeightLighter",[504,3316,610],{"class":514},[504,3318,3319,3322],{"class":506,"line":1115},[504,3320,3321],{"class":518},"    fontWeightBolder",[504,3323,610],{"class":514},[504,3325,3326,3329],{"class":506,"line":1452},[504,3327,3328],{"class":518},"    fontWeightInherit",[504,3330,610],{"class":514},[504,3332,3333,3335,3337,3339,3341],{"class":506,"line":1862},[504,3334,640],{"class":514},[504,3336,643],{"class":514},[504,3338,3213],{"class":583},[504,3340,648],{"class":518},[504,3342,538],{"class":514},[504,3344,3345],{"class":506,"line":1879},[504,3346,567],{"emptyLinePlaceholder":206},[504,3348,3349,3351,3353,3355],{"class":506,"line":1896},[504,3350,661],{"class":510},[504,3352,664],{"class":510},[504,3354,667],{"class":518},[504,3356,538],{"class":514},[489,3358,3359],{"icon":140,"label":672},[494,3360,3362],{"className":675,"code":3361,"filename":677,"language":678,"meta":500,"style":500},":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",[467,3363,3364,3372,3384,3396,3408,3420,3432,3444,3456,3468,3480,3492,3508],{"__ignoreMap":500},[504,3365,3366,3368,3370],{"class":506,"line":507},[504,3367,685],{"class":514},[504,3369,688],{"class":573},[504,3371,601],{"class":514},[504,3373,3374,3377,3379,3382],{"class":506,"line":541},[504,3375,3376],{"class":518},"    --font-weight--extralight",[504,3378,685],{"class":514},[504,3380,3381],{"class":1947}," 200",[504,3383,538],{"class":514},[504,3385,3386,3389,3391,3394],{"class":506,"line":564},[504,3387,3388],{"class":518},"    --font-weight--light",[504,3390,685],{"class":514},[504,3392,3393],{"class":1947}," 300",[504,3395,538],{"class":514},[504,3397,3398,3401,3403,3406],{"class":506,"line":570},[504,3399,3400],{"class":518},"    --font-weight--normal",[504,3402,685],{"class":514},[504,3404,3405],{"class":518}," normal",[504,3407,538],{"class":514},[504,3409,3410,3413,3415,3418],{"class":506,"line":591},[504,3411,3412],{"class":518},"    --font-weight--medium",[504,3414,685],{"class":514},[504,3416,3417],{"class":1947}," 500",[504,3419,538],{"class":514},[504,3421,3422,3425,3427,3430],{"class":506,"line":596},[504,3423,3424],{"class":518},"    --font-weight--semibold",[504,3426,685],{"class":514},[504,3428,3429],{"class":1947}," 600",[504,3431,538],{"class":514},[504,3433,3434,3437,3439,3442],{"class":506,"line":604},[504,3435,3436],{"class":518},"    --font-weight--bold",[504,3438,685],{"class":514},[504,3440,3441],{"class":518}," bold",[504,3443,538],{"class":514},[504,3445,3446,3449,3451,3454],{"class":506,"line":613},[504,3447,3448],{"class":518},"    --font-weight--black",[504,3450,685],{"class":514},[504,3452,3453],{"class":1947}," 900",[504,3455,538],{"class":514},[504,3457,3458,3461,3463,3466],{"class":506,"line":621},[504,3459,3460],{"class":518},"    --font-weight--lighter",[504,3462,685],{"class":514},[504,3464,3465],{"class":518}," lighter",[504,3467,538],{"class":514},[504,3469,3470,3473,3475,3478],{"class":506,"line":629},[504,3471,3472],{"class":518},"    --font-weight--bolder",[504,3474,685],{"class":514},[504,3476,3477],{"class":518}," bolder",[504,3479,538],{"class":514},[504,3481,3482,3485,3487,3490],{"class":506,"line":637},[504,3483,3484],{"class":518},"    --font-weight--inherit",[504,3486,685],{"class":514},[504,3488,3489],{"class":518}," inherit",[504,3491,538],{"class":514},[504,3493,3494,3497,3499,3501,3503,3506],{"class":506,"line":653},[504,3495,3496],{"class":518},"    --font-weight",[504,3498,685],{"class":514},[504,3500,854],{"class":583},[504,3502,857],{"class":514},[504,3504,3505],{"class":518},"--font-weight--normal",[504,3507,863],{"class":514},[504,3509,3510],{"class":506,"line":658},[504,3511,868],{"class":514},[418,3513,871],{},[429,3515,3516,3524,3532,3543,3551,3559,3569,3577,3587,3596,3604],{},[432,3517,3518,3523],{},[435,3519,3520],{},[467,3521,3522],{},"extralight",": 200 - Ultra thin weight",[432,3525,3526,3531],{},[435,3527,3528],{},[467,3529,3530],{},"light",": 300 - Light weight",[432,3533,3534,3539,3540,3542],{},[435,3535,3536],{},[467,3537,3538],{},"normal",": ",[467,3541,3538],{}," keyword (typically 400)",[432,3544,3545,3550],{},[435,3546,3547],{},[467,3548,3549],{},"medium",": 500 - Medium weight",[432,3552,3553,3558],{},[435,3554,3555],{},[467,3556,3557],{},"semibold",": 600 - Semibold weight",[432,3560,3561,3539,3566,3568],{},[435,3562,3563],{},[467,3564,3565],{},"bold",[467,3567,3565],{}," keyword (typically 700)",[432,3570,3571,3576],{},[435,3572,3573],{},[467,3574,3575],{},"black",": 900 - Heaviest weight",[432,3578,3579,3539,3584,3586],{},[435,3580,3581],{},[467,3582,3583],{},"lighter",[467,3585,3583],{}," keyword (relative to parent)",[432,3588,3589,3539,3594,3586],{},[435,3590,3591],{},[467,3592,3593],{},"bolder",[467,3595,3593],{},[432,3597,3598,3603],{},[435,3599,3600],{},[467,3601,3602],{},"inherit",": Inherits from parent",[432,3605,3606,905,3610,908],{},[435,3607,3608],{},[467,3609,904],{},[467,3611,3538],{},[478,3613,3615],{"id":3614},"creating-custom-font-weight-variables","Creating Custom Font Weight Variables",[418,3617,3618],{},"Override font weights to match your font's available weights:",[486,3620,3621,3823],{},[489,3622,3623],{"icon":491,"label":492},[494,3624,3626],{"className":496,"code":3625,"filename":498,"language":499,"meta":500,"style":500},"import { styleframe } from 'styleframe';\nimport { useFontWeightDesignTokens } from '@styleframe/theme';\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",[467,3627,3628,3648,3668,3672,3686,3690,3696,3702,3708,3715,3721,3727,3741,3752,3763,3774,3785,3797,3809,3813],{"__ignoreMap":500},[504,3629,3630,3632,3634,3636,3638,3640,3642,3644,3646],{"class":506,"line":507},[504,3631,511],{"class":510},[504,3633,515],{"class":514},[504,3635,519],{"class":518},[504,3637,522],{"class":514},[504,3639,525],{"class":510},[504,3641,528],{"class":514},[504,3643,532],{"class":531},[504,3645,535],{"class":514},[504,3647,538],{"class":514},[504,3649,3650,3652,3654,3656,3658,3660,3662,3664,3666],{"class":506,"line":541},[504,3651,511],{"class":510},[504,3653,515],{"class":514},[504,3655,3213],{"class":518},[504,3657,522],{"class":514},[504,3659,525],{"class":510},[504,3661,528],{"class":514},[504,3663,557],{"class":531},[504,3665,535],{"class":514},[504,3667,538],{"class":514},[504,3669,3670],{"class":506,"line":564},[504,3671,567],{"emptyLinePlaceholder":206},[504,3673,3674,3676,3678,3680,3682,3684],{"class":506,"line":570},[504,3675,574],{"class":573},[504,3677,577],{"class":518},[504,3679,580],{"class":514},[504,3681,519],{"class":583},[504,3683,586],{"class":518},[504,3685,538],{"class":514},[504,3687,3688],{"class":506,"line":591},[504,3689,567],{"emptyLinePlaceholder":206},[504,3691,3692,3694],{"class":506,"line":596},[504,3693,574],{"class":573},[504,3695,601],{"class":514},[504,3697,3698,3700],{"class":506,"line":604},[504,3699,3258],{"class":518},[504,3701,610],{"class":514},[504,3703,3704,3706],{"class":506,"line":613},[504,3705,3272],{"class":518},[504,3707,610],{"class":514},[504,3709,3710,3713],{"class":506,"line":621},[504,3711,3712],{"class":518},"    fontWeightRegular",[504,3714,610],{"class":514},[504,3716,3717,3719],{"class":506,"line":629},[504,3718,3286],{"class":518},[504,3720,610],{"class":514},[504,3722,3723,3725],{"class":506,"line":637},[504,3724,3300],{"class":518},[504,3726,610],{"class":514},[504,3728,3729,3731,3733,3735,3737,3739],{"class":506,"line":653},[504,3730,640],{"class":514},[504,3732,643],{"class":514},[504,3734,3213],{"class":583},[504,3736,1036],{"class":518},[504,3738,703],{"class":514},[504,3740,601],{"class":514},[504,3742,3743,3745,3747,3750],{"class":506,"line":658},[504,3744,1046],{"class":1045},[504,3746,685],{"class":514},[504,3748,3749],{"class":1947}," 400",[504,3751,610],{"class":514},[504,3753,3754,3757,3759,3761],{"class":506,"line":1094},[504,3755,3756],{"class":1045},"    light",[504,3758,685],{"class":514},[504,3760,3393],{"class":1947},[504,3762,610],{"class":514},[504,3764,3765,3768,3770,3772],{"class":506,"line":1110},[504,3766,3767],{"class":1045},"    regular",[504,3769,685],{"class":514},[504,3771,3749],{"class":1947},[504,3773,610],{"class":514},[504,3775,3776,3779,3781,3783],{"class":506,"line":1115},[504,3777,3778],{"class":1045},"    medium",[504,3780,685],{"class":514},[504,3782,3417],{"class":1947},[504,3784,610],{"class":514},[504,3786,3787,3790,3792,3795],{"class":506,"line":1452},[504,3788,3789],{"class":1045},"    bold",[504,3791,685],{"class":514},[504,3793,3794],{"class":1947}," 700",[504,3796,610],{"class":514},[504,3798,3799,3801,3803,3805,3807],{"class":506,"line":1862},[504,3800,640],{"class":514},[504,3802,1099],{"class":510},[504,3804,1102],{"class":573},[504,3806,1105],{"class":518},[504,3808,538],{"class":514},[504,3810,3811],{"class":506,"line":1879},[504,3812,567],{"emptyLinePlaceholder":206},[504,3814,3815,3817,3819,3821],{"class":506,"line":1896},[504,3816,661],{"class":510},[504,3818,664],{"class":510},[504,3820,667],{"class":518},[504,3822,538],{"class":514},[489,3824,3825],{"icon":140,"label":672},[494,3826,3828],{"className":675,"code":3827,"filename":677,"language":678,"meta":500,"style":500},":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",[467,3829,3830,3838,3848,3858,3869,3879,3889],{"__ignoreMap":500},[504,3831,3832,3834,3836],{"class":506,"line":507},[504,3833,685],{"class":514},[504,3835,688],{"class":573},[504,3837,601],{"class":514},[504,3839,3840,3842,3844,3846],{"class":506,"line":541},[504,3841,3496],{"class":518},[504,3843,685],{"class":514},[504,3845,3749],{"class":1947},[504,3847,538],{"class":514},[504,3849,3850,3852,3854,3856],{"class":506,"line":564},[504,3851,3388],{"class":518},[504,3853,685],{"class":514},[504,3855,3393],{"class":1947},[504,3857,538],{"class":514},[504,3859,3860,3863,3865,3867],{"class":506,"line":570},[504,3861,3862],{"class":518},"    --font-weight--regular",[504,3864,685],{"class":514},[504,3866,3749],{"class":1947},[504,3868,538],{"class":514},[504,3870,3871,3873,3875,3877],{"class":506,"line":591},[504,3872,3412],{"class":518},[504,3874,685],{"class":514},[504,3876,3417],{"class":1947},[504,3878,538],{"class":514},[504,3880,3881,3883,3885,3887],{"class":506,"line":596},[504,3882,3436],{"class":518},[504,3884,685],{"class":514},[504,3886,3794],{"class":1947},[504,3888,538],{"class":514},[504,3890,3891],{"class":506,"line":604},[504,3892,868],{"class":514},[478,3894,3896],{"id":3895},"extending-the-default-font-weight-values","Extending the Default Font Weight Values",[418,3898,3899],{},"You can keep the defaults and override specific values:",[486,3901,3902,4046],{},[489,3903,3904],{"icon":491,"label":492},[494,3905,3907],{"className":496,"code":3906,"filename":498,"language":499,"meta":500,"style":500},"import { styleframe } from 'styleframe';\nimport { useFontWeightDesignTokens, defaultFontWeightValues } from '@styleframe/theme';\n\nconst s = styleframe();\n\nconst { fontWeight } = useFontWeightDesignTokens(s, {\n    ...defaultFontWeightValues,\n    default: '@font-weight.semibold'\n} as const);\n\nexport default s;\n",[467,3908,3909,3929,3954,3958,3972,3976,3997,4006,4020,4032,4036],{"__ignoreMap":500},[504,3910,3911,3913,3915,3917,3919,3921,3923,3925,3927],{"class":506,"line":507},[504,3912,511],{"class":510},[504,3914,515],{"class":514},[504,3916,519],{"class":518},[504,3918,522],{"class":514},[504,3920,525],{"class":510},[504,3922,528],{"class":514},[504,3924,532],{"class":531},[504,3926,535],{"class":514},[504,3928,538],{"class":514},[504,3930,3931,3933,3935,3937,3939,3942,3944,3946,3948,3950,3952],{"class":506,"line":541},[504,3932,511],{"class":510},[504,3934,515],{"class":514},[504,3936,3213],{"class":518},[504,3938,703],{"class":514},[504,3940,3941],{"class":518}," defaultFontWeightValues",[504,3943,522],{"class":514},[504,3945,525],{"class":510},[504,3947,528],{"class":514},[504,3949,557],{"class":531},[504,3951,535],{"class":514},[504,3953,538],{"class":514},[504,3955,3956],{"class":506,"line":564},[504,3957,567],{"emptyLinePlaceholder":206},[504,3959,3960,3962,3964,3966,3968,3970],{"class":506,"line":570},[504,3961,574],{"class":573},[504,3963,577],{"class":518},[504,3965,580],{"class":514},[504,3967,519],{"class":583},[504,3969,586],{"class":518},[504,3971,538],{"class":514},[504,3973,3974],{"class":506,"line":591},[504,3975,567],{"emptyLinePlaceholder":206},[504,3977,3978,3980,3982,3985,3987,3989,3991,3993,3995],{"class":506,"line":596},[504,3979,574],{"class":573},[504,3981,515],{"class":514},[504,3983,3984],{"class":518}," fontWeight ",[504,3986,640],{"class":514},[504,3988,643],{"class":514},[504,3990,3213],{"class":583},[504,3992,1036],{"class":518},[504,3994,703],{"class":514},[504,3996,601],{"class":514},[504,3998,3999,4001,4004],{"class":506,"line":604},[504,4000,1412],{"class":514},[504,4002,4003],{"class":518},"defaultFontWeightValues",[504,4005,610],{"class":514},[504,4007,4008,4010,4012,4014,4017],{"class":506,"line":613},[504,4009,1046],{"class":1045},[504,4011,685],{"class":514},[504,4013,528],{"class":514},[504,4015,4016],{"class":531},"@font-weight.semibold",[504,4018,4019],{"class":514},"'\n",[504,4021,4022,4024,4026,4028,4030],{"class":506,"line":621},[504,4023,640],{"class":514},[504,4025,1099],{"class":510},[504,4027,1102],{"class":573},[504,4029,1105],{"class":518},[504,4031,538],{"class":514},[504,4033,4034],{"class":506,"line":629},[504,4035,567],{"emptyLinePlaceholder":206},[504,4037,4038,4040,4042,4044],{"class":506,"line":637},[504,4039,661],{"class":510},[504,4041,664],{"class":510},[504,4043,667],{"class":518},[504,4045,538],{"class":514},[489,4047,4048],{"icon":140,"label":672},[494,4049,4051],{"className":675,"code":4050,"filename":677,"language":678,"meta":500,"style":500},":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",[467,4052,4053,4061,4071,4081,4091,4101,4111,4121,4131,4141,4151,4161,4176],{"__ignoreMap":500},[504,4054,4055,4057,4059],{"class":506,"line":507},[504,4056,685],{"class":514},[504,4058,688],{"class":573},[504,4060,601],{"class":514},[504,4062,4063,4065,4067,4069],{"class":506,"line":541},[504,4064,3376],{"class":518},[504,4066,685],{"class":514},[504,4068,3381],{"class":1947},[504,4070,538],{"class":514},[504,4072,4073,4075,4077,4079],{"class":506,"line":564},[504,4074,3388],{"class":518},[504,4076,685],{"class":514},[504,4078,3393],{"class":1947},[504,4080,538],{"class":514},[504,4082,4083,4085,4087,4089],{"class":506,"line":570},[504,4084,3400],{"class":518},[504,4086,685],{"class":514},[504,4088,3405],{"class":518},[504,4090,538],{"class":514},[504,4092,4093,4095,4097,4099],{"class":506,"line":591},[504,4094,3412],{"class":518},[504,4096,685],{"class":514},[504,4098,3417],{"class":1947},[504,4100,538],{"class":514},[504,4102,4103,4105,4107,4109],{"class":506,"line":596},[504,4104,3424],{"class":518},[504,4106,685],{"class":514},[504,4108,3429],{"class":1947},[504,4110,538],{"class":514},[504,4112,4113,4115,4117,4119],{"class":506,"line":604},[504,4114,3436],{"class":518},[504,4116,685],{"class":514},[504,4118,3441],{"class":518},[504,4120,538],{"class":514},[504,4122,4123,4125,4127,4129],{"class":506,"line":613},[504,4124,3448],{"class":518},[504,4126,685],{"class":514},[504,4128,3453],{"class":1947},[504,4130,538],{"class":514},[504,4132,4133,4135,4137,4139],{"class":506,"line":621},[504,4134,3460],{"class":518},[504,4136,685],{"class":514},[504,4138,3465],{"class":518},[504,4140,538],{"class":514},[504,4142,4143,4145,4147,4149],{"class":506,"line":629},[504,4144,3472],{"class":518},[504,4146,685],{"class":514},[504,4148,3477],{"class":518},[504,4150,538],{"class":514},[504,4152,4153,4155,4157,4159],{"class":506,"line":637},[504,4154,3484],{"class":518},[504,4156,685],{"class":514},[504,4158,3489],{"class":518},[504,4160,538],{"class":514},[504,4162,4163,4165,4167,4169,4171,4174],{"class":506,"line":653},[504,4164,3496],{"class":518},[504,4166,685],{"class":514},[504,4168,854],{"class":583},[504,4170,857],{"class":514},[504,4172,4173],{"class":518},"--font-weight--semibold",[504,4175,863],{"class":514},[504,4177,4178],{"class":506,"line":658},[504,4179,868],{"class":514},[414,4181,4183],{"id":4182},"usefontstyledesigntokens",[467,4184,4185],{},"useFontStyleDesignTokens",[418,4187,472,4188,4191],{},[467,4189,4190],{},"useFontStyleDesignTokens()"," function creates a set of font style variables for controlling text styling like italic and oblique.",[418,4193,4194],{},"Styleframe provides all standard CSS font style values:",[486,4196,4197,4334],{},[489,4198,4199],{"icon":491,"label":492},[494,4200,4202],{"className":496,"code":4201,"filename":498,"language":499,"meta":500,"style":500},"import { styleframe } from 'styleframe';\nimport { useFontStyleDesignTokens } from '@styleframe/theme';\n\nconst s = styleframe();\n\nconst {\n    fontStyle,\n    fontStyleItalic,\n    fontStyleOblique,\n    fontStyleNormal,\n    fontStyleInherit,\n} = useFontStyleDesignTokens(s);\n\nexport default s;\n",[467,4203,4204,4224,4245,4249,4263,4267,4273,4280,4287,4294,4301,4308,4320,4324],{"__ignoreMap":500},[504,4205,4206,4208,4210,4212,4214,4216,4218,4220,4222],{"class":506,"line":507},[504,4207,511],{"class":510},[504,4209,515],{"class":514},[504,4211,519],{"class":518},[504,4213,522],{"class":514},[504,4215,525],{"class":510},[504,4217,528],{"class":514},[504,4219,532],{"class":531},[504,4221,535],{"class":514},[504,4223,538],{"class":514},[504,4225,4226,4228,4230,4233,4235,4237,4239,4241,4243],{"class":506,"line":541},[504,4227,511],{"class":510},[504,4229,515],{"class":514},[504,4231,4232],{"class":518}," useFontStyleDesignTokens",[504,4234,522],{"class":514},[504,4236,525],{"class":510},[504,4238,528],{"class":514},[504,4240,557],{"class":531},[504,4242,535],{"class":514},[504,4244,538],{"class":514},[504,4246,4247],{"class":506,"line":564},[504,4248,567],{"emptyLinePlaceholder":206},[504,4250,4251,4253,4255,4257,4259,4261],{"class":506,"line":570},[504,4252,574],{"class":573},[504,4254,577],{"class":518},[504,4256,580],{"class":514},[504,4258,519],{"class":583},[504,4260,586],{"class":518},[504,4262,538],{"class":514},[504,4264,4265],{"class":506,"line":591},[504,4266,567],{"emptyLinePlaceholder":206},[504,4268,4269,4271],{"class":506,"line":596},[504,4270,574],{"class":573},[504,4272,601],{"class":514},[504,4274,4275,4278],{"class":506,"line":604},[504,4276,4277],{"class":518},"    fontStyle",[504,4279,610],{"class":514},[504,4281,4282,4285],{"class":506,"line":613},[504,4283,4284],{"class":518},"    fontStyleItalic",[504,4286,610],{"class":514},[504,4288,4289,4292],{"class":506,"line":621},[504,4290,4291],{"class":518},"    fontStyleOblique",[504,4293,610],{"class":514},[504,4295,4296,4299],{"class":506,"line":629},[504,4297,4298],{"class":518},"    fontStyleNormal",[504,4300,610],{"class":514},[504,4302,4303,4306],{"class":506,"line":637},[504,4304,4305],{"class":518},"    fontStyleInherit",[504,4307,610],{"class":514},[504,4309,4310,4312,4314,4316,4318],{"class":506,"line":653},[504,4311,640],{"class":514},[504,4313,643],{"class":514},[504,4315,4232],{"class":583},[504,4317,648],{"class":518},[504,4319,538],{"class":514},[504,4321,4322],{"class":506,"line":658},[504,4323,567],{"emptyLinePlaceholder":206},[504,4325,4326,4328,4330,4332],{"class":506,"line":1094},[504,4327,661],{"class":510},[504,4329,664],{"class":510},[504,4331,667],{"class":518},[504,4333,538],{"class":514},[489,4335,4336],{"icon":140,"label":672},[494,4337,4339],{"className":675,"code":4338,"filename":677,"language":678,"meta":500,"style":500},":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",[467,4340,4341,4349,4361,4373,4384,4395,4411],{"__ignoreMap":500},[504,4342,4343,4345,4347],{"class":506,"line":507},[504,4344,685],{"class":514},[504,4346,688],{"class":573},[504,4348,601],{"class":514},[504,4350,4351,4354,4356,4359],{"class":506,"line":541},[504,4352,4353],{"class":518},"    --font-style--italic",[504,4355,685],{"class":514},[504,4357,4358],{"class":518}," italic",[504,4360,538],{"class":514},[504,4362,4363,4366,4368,4371],{"class":506,"line":564},[504,4364,4365],{"class":518},"    --font-style--oblique",[504,4367,685],{"class":514},[504,4369,4370],{"class":518}," oblique",[504,4372,538],{"class":514},[504,4374,4375,4378,4380,4382],{"class":506,"line":570},[504,4376,4377],{"class":518},"    --font-style--normal",[504,4379,685],{"class":514},[504,4381,3405],{"class":518},[504,4383,538],{"class":514},[504,4385,4386,4389,4391,4393],{"class":506,"line":591},[504,4387,4388],{"class":518},"    --font-style--inherit",[504,4390,685],{"class":514},[504,4392,3489],{"class":518},[504,4394,538],{"class":514},[504,4396,4397,4400,4402,4404,4406,4409],{"class":506,"line":596},[504,4398,4399],{"class":518},"    --font-style",[504,4401,685],{"class":514},[504,4403,854],{"class":583},[504,4405,857],{"class":514},[504,4407,4408],{"class":518},"--font-style--normal",[504,4410,863],{"class":514},[504,4412,4413],{"class":506,"line":604},[504,4414,868],{"class":514},[418,4416,871],{},[429,4418,4419,4427,4435,4442,4448],{},[432,4420,4421,4426],{},[435,4422,4423],{},[467,4424,4425],{},"italic",": Italic style (uses true italic font if available)",[432,4428,4429,4434],{},[435,4430,4431],{},[467,4432,4433],{},"oblique",": Oblique style (slanted version of normal font)",[432,4436,4437,4441],{},[435,4438,4439],{},[467,4440,3538],{},": Normal upright style",[432,4443,4444,3603],{},[435,4445,4446],{},[467,4447,3602],{},[432,4449,4450,905,4454,908],{},[435,4451,4452],{},[467,4453,904],{},[467,4455,3538],{},[4457,4458,4459,4462,4463,4465,4466,4468,4469,4471],"note",{},[435,4460,4461],{},"Good to know:"," ",[467,4464,4425],{}," uses a true italic font variant if available, while ",[467,4467,4433],{}," artificially slants the font. Most fonts provide italic variants, making ",[467,4470,4425],{}," the preferred choice for emphasis.",[478,4473,4475],{"id":4474},"creating-custom-font-style-variables","Creating Custom Font Style Variables",[418,4477,4478],{},"Define custom font style values for specific needs:",[486,4480,4481,4660],{},[489,4482,4483],{"icon":491,"label":492},[494,4484,4486],{"className":496,"code":4485,"filename":498,"language":499,"meta":500,"style":500},"import { styleframe } from 'styleframe';\nimport { useFontStyleDesignTokens } from '@styleframe/theme';\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",[467,4487,4488,4508,4528,4532,4546,4550,4556,4562,4568,4575,4589,4603,4618,4634,4646,4650],{"__ignoreMap":500},[504,4489,4490,4492,4494,4496,4498,4500,4502,4504,4506],{"class":506,"line":507},[504,4491,511],{"class":510},[504,4493,515],{"class":514},[504,4495,519],{"class":518},[504,4497,522],{"class":514},[504,4499,525],{"class":510},[504,4501,528],{"class":514},[504,4503,532],{"class":531},[504,4505,535],{"class":514},[504,4507,538],{"class":514},[504,4509,4510,4512,4514,4516,4518,4520,4522,4524,4526],{"class":506,"line":541},[504,4511,511],{"class":510},[504,4513,515],{"class":514},[504,4515,4232],{"class":518},[504,4517,522],{"class":514},[504,4519,525],{"class":510},[504,4521,528],{"class":514},[504,4523,557],{"class":531},[504,4525,535],{"class":514},[504,4527,538],{"class":514},[504,4529,4530],{"class":506,"line":564},[504,4531,567],{"emptyLinePlaceholder":206},[504,4533,4534,4536,4538,4540,4542,4544],{"class":506,"line":570},[504,4535,574],{"class":573},[504,4537,577],{"class":518},[504,4539,580],{"class":514},[504,4541,519],{"class":583},[504,4543,586],{"class":518},[504,4545,538],{"class":514},[504,4547,4548],{"class":506,"line":591},[504,4549,567],{"emptyLinePlaceholder":206},[504,4551,4552,4554],{"class":506,"line":596},[504,4553,574],{"class":573},[504,4555,601],{"class":514},[504,4557,4558,4560],{"class":506,"line":604},[504,4559,4277],{"class":518},[504,4561,610],{"class":514},[504,4563,4564,4566],{"class":506,"line":613},[504,4565,4284],{"class":518},[504,4567,610],{"class":514},[504,4569,4570,4573],{"class":506,"line":621},[504,4571,4572],{"class":518},"    fontStyleSlanted",[504,4574,610],{"class":514},[504,4576,4577,4579,4581,4583,4585,4587],{"class":506,"line":629},[504,4578,640],{"class":514},[504,4580,643],{"class":514},[504,4582,4232],{"class":583},[504,4584,1036],{"class":518},[504,4586,703],{"class":514},[504,4588,601],{"class":514},[504,4590,4591,4593,4595,4597,4599,4601],{"class":506,"line":637},[504,4592,1046],{"class":1045},[504,4594,685],{"class":514},[504,4596,528],{"class":514},[504,4598,3538],{"class":531},[504,4600,535],{"class":514},[504,4602,610],{"class":514},[504,4604,4605,4608,4610,4612,4614,4616],{"class":506,"line":653},[504,4606,4607],{"class":1045},"    italic",[504,4609,685],{"class":514},[504,4611,528],{"class":514},[504,4613,4425],{"class":531},[504,4615,535],{"class":514},[504,4617,610],{"class":514},[504,4619,4620,4623,4625,4627,4630,4632],{"class":506,"line":658},[504,4621,4622],{"class":1045},"    slanted",[504,4624,685],{"class":514},[504,4626,528],{"class":514},[504,4628,4629],{"class":531},"oblique 15deg",[504,4631,535],{"class":514},[504,4633,610],{"class":514},[504,4635,4636,4638,4640,4642,4644],{"class":506,"line":1094},[504,4637,640],{"class":514},[504,4639,1099],{"class":510},[504,4641,1102],{"class":573},[504,4643,1105],{"class":518},[504,4645,538],{"class":514},[504,4647,4648],{"class":506,"line":1110},[504,4649,567],{"emptyLinePlaceholder":206},[504,4651,4652,4654,4656,4658],{"class":506,"line":1115},[504,4653,661],{"class":510},[504,4655,664],{"class":510},[504,4657,667],{"class":518},[504,4659,538],{"class":514},[489,4661,4662],{"icon":140,"label":672},[494,4663,4665],{"className":675,"code":4664,"filename":677,"language":678,"meta":500,"style":500},":root {\n    --font-style--italic: italic;\n    --font-style--slanted: oblique 15deg;\n    --font-style: normal;\n}\n",[467,4666,4667,4675,4685,4700,4710],{"__ignoreMap":500},[504,4668,4669,4671,4673],{"class":506,"line":507},[504,4670,685],{"class":514},[504,4672,688],{"class":573},[504,4674,601],{"class":514},[504,4676,4677,4679,4681,4683],{"class":506,"line":541},[504,4678,4353],{"class":518},[504,4680,685],{"class":514},[504,4682,4358],{"class":518},[504,4684,538],{"class":514},[504,4686,4687,4690,4692,4695,4698],{"class":506,"line":564},[504,4688,4689],{"class":518},"    --font-style--slanted",[504,4691,685],{"class":514},[504,4693,4694],{"class":518}," oblique ",[504,4696,4697],{"class":1947},"15deg",[504,4699,538],{"class":514},[504,4701,4702,4704,4706,4708],{"class":506,"line":570},[504,4703,4399],{"class":518},[504,4705,685],{"class":514},[504,4707,3405],{"class":518},[504,4709,538],{"class":514},[504,4711,4712],{"class":506,"line":591},[504,4713,868],{"class":514},[478,4715,4717],{"id":4716},"extending-the-default-font-style-values","Extending the Default Font Style Values",[418,4719,4720],{},"You can extend the defaults with additional custom values:",[486,4722,4723,4866],{},[489,4724,4725],{"icon":491,"label":492},[494,4726,4728],{"className":496,"code":4727,"filename":498,"language":499,"meta":500,"style":500},"import { styleframe } from 'styleframe';\nimport { useFontStyleDesignTokens, defaultFontStyleValues } from '@styleframe/theme';\n\nconst s = styleframe();\n\nconst { fontStyle } = useFontStyleDesignTokens(s, {\n    ...defaultFontStyleValues,\n    default: '@font-style.italic'\n} as const);\n\nexport default s;\n",[467,4729,4730,4750,4775,4779,4793,4797,4818,4827,4840,4852,4856],{"__ignoreMap":500},[504,4731,4732,4734,4736,4738,4740,4742,4744,4746,4748],{"class":506,"line":507},[504,4733,511],{"class":510},[504,4735,515],{"class":514},[504,4737,519],{"class":518},[504,4739,522],{"class":514},[504,4741,525],{"class":510},[504,4743,528],{"class":514},[504,4745,532],{"class":531},[504,4747,535],{"class":514},[504,4749,538],{"class":514},[504,4751,4752,4754,4756,4758,4760,4763,4765,4767,4769,4771,4773],{"class":506,"line":541},[504,4753,511],{"class":510},[504,4755,515],{"class":514},[504,4757,4232],{"class":518},[504,4759,703],{"class":514},[504,4761,4762],{"class":518}," defaultFontStyleValues",[504,4764,522],{"class":514},[504,4766,525],{"class":510},[504,4768,528],{"class":514},[504,4770,557],{"class":531},[504,4772,535],{"class":514},[504,4774,538],{"class":514},[504,4776,4777],{"class":506,"line":564},[504,4778,567],{"emptyLinePlaceholder":206},[504,4780,4781,4783,4785,4787,4789,4791],{"class":506,"line":570},[504,4782,574],{"class":573},[504,4784,577],{"class":518},[504,4786,580],{"class":514},[504,4788,519],{"class":583},[504,4790,586],{"class":518},[504,4792,538],{"class":514},[504,4794,4795],{"class":506,"line":591},[504,4796,567],{"emptyLinePlaceholder":206},[504,4798,4799,4801,4803,4806,4808,4810,4812,4814,4816],{"class":506,"line":596},[504,4800,574],{"class":573},[504,4802,515],{"class":514},[504,4804,4805],{"class":518}," fontStyle ",[504,4807,640],{"class":514},[504,4809,643],{"class":514},[504,4811,4232],{"class":583},[504,4813,1036],{"class":518},[504,4815,703],{"class":514},[504,4817,601],{"class":514},[504,4819,4820,4822,4825],{"class":506,"line":604},[504,4821,1412],{"class":514},[504,4823,4824],{"class":518},"defaultFontStyleValues",[504,4826,610],{"class":514},[504,4828,4829,4831,4833,4835,4838],{"class":506,"line":613},[504,4830,1046],{"class":1045},[504,4832,685],{"class":514},[504,4834,528],{"class":514},[504,4836,4837],{"class":531},"@font-style.italic",[504,4839,4019],{"class":514},[504,4841,4842,4844,4846,4848,4850],{"class":506,"line":621},[504,4843,640],{"class":514},[504,4845,1099],{"class":510},[504,4847,1102],{"class":573},[504,4849,1105],{"class":518},[504,4851,538],{"class":514},[504,4853,4854],{"class":506,"line":629},[504,4855,567],{"emptyLinePlaceholder":206},[504,4857,4858,4860,4862,4864],{"class":506,"line":637},[504,4859,661],{"class":510},[504,4861,664],{"class":510},[504,4863,667],{"class":518},[504,4865,538],{"class":514},[489,4867,4868],{"icon":140,"label":672},[494,4869,4871],{"className":675,"code":4870,"filename":677,"language":678,"meta":500,"style":500},":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",[467,4872,4873,4881,4891,4901,4911,4921,4936],{"__ignoreMap":500},[504,4874,4875,4877,4879],{"class":506,"line":507},[504,4876,685],{"class":514},[504,4878,688],{"class":573},[504,4880,601],{"class":514},[504,4882,4883,4885,4887,4889],{"class":506,"line":541},[504,4884,4353],{"class":518},[504,4886,685],{"class":514},[504,4888,4358],{"class":518},[504,4890,538],{"class":514},[504,4892,4893,4895,4897,4899],{"class":506,"line":564},[504,4894,4365],{"class":518},[504,4896,685],{"class":514},[504,4898,4370],{"class":518},[504,4900,538],{"class":514},[504,4902,4903,4905,4907,4909],{"class":506,"line":570},[504,4904,4377],{"class":518},[504,4906,685],{"class":514},[504,4908,3405],{"class":518},[504,4910,538],{"class":514},[504,4912,4913,4915,4917,4919],{"class":506,"line":591},[504,4914,4388],{"class":518},[504,4916,685],{"class":514},[504,4918,3489],{"class":518},[504,4920,538],{"class":514},[504,4922,4923,4925,4927,4929,4931,4934],{"class":506,"line":596},[504,4924,4399],{"class":518},[504,4926,685],{"class":514},[504,4928,854],{"class":583},[504,4930,857],{"class":514},[504,4932,4933],{"class":518},"--font-style--italic",[504,4935,863],{"class":514},[504,4937,4938],{"class":506,"line":604},[504,4939,868],{"class":514},[478,4941,4943],{"id":4942},"updating-the-default-font-style-variable","Updating the Default Font Style Variable",[418,4945,4946],{},"You can override the default font style value after creating it:",[486,4948,4949,5096],{},[489,4950,4951],{"icon":491,"label":492},[494,4952,4954],{"className":496,"code":4953,"filename":498,"language":499,"meta":500,"style":500},"import { styleframe } from 'styleframe';\nimport { useFontStyleDesignTokens } from '@styleframe/theme';\n\nconst s = styleframe();\nconst { variable } = s;\n\nconst { fontStyle } = useFontStyleDesignTokens(s);\n\n// Override the default font style\nvariable(fontStyle, 'italic');\n\nexport default s;\n",[467,4955,4956,4976,4996,5000,5014,5031,5035,5053,5057,5062,5082,5086],{"__ignoreMap":500},[504,4957,4958,4960,4962,4964,4966,4968,4970,4972,4974],{"class":506,"line":507},[504,4959,511],{"class":510},[504,4961,515],{"class":514},[504,4963,519],{"class":518},[504,4965,522],{"class":514},[504,4967,525],{"class":510},[504,4969,528],{"class":514},[504,4971,532],{"class":531},[504,4973,535],{"class":514},[504,4975,538],{"class":514},[504,4977,4978,4980,4982,4984,4986,4988,4990,4992,4994],{"class":506,"line":541},[504,4979,511],{"class":510},[504,4981,515],{"class":514},[504,4983,4232],{"class":518},[504,4985,522],{"class":514},[504,4987,525],{"class":510},[504,4989,528],{"class":514},[504,4991,557],{"class":531},[504,4993,535],{"class":514},[504,4995,538],{"class":514},[504,4997,4998],{"class":506,"line":564},[504,4999,567],{"emptyLinePlaceholder":206},[504,5001,5002,5004,5006,5008,5010,5012],{"class":506,"line":570},[504,5003,574],{"class":573},[504,5005,577],{"class":518},[504,5007,580],{"class":514},[504,5009,519],{"class":583},[504,5011,586],{"class":518},[504,5013,538],{"class":514},[504,5015,5016,5018,5020,5023,5025,5027,5029],{"class":506,"line":591},[504,5017,574],{"class":573},[504,5019,515],{"class":514},[504,5021,5022],{"class":518}," variable ",[504,5024,640],{"class":514},[504,5026,643],{"class":514},[504,5028,667],{"class":518},[504,5030,538],{"class":514},[504,5032,5033],{"class":506,"line":596},[504,5034,567],{"emptyLinePlaceholder":206},[504,5036,5037,5039,5041,5043,5045,5047,5049,5051],{"class":506,"line":604},[504,5038,574],{"class":573},[504,5040,515],{"class":514},[504,5042,4805],{"class":518},[504,5044,640],{"class":514},[504,5046,643],{"class":514},[504,5048,4232],{"class":583},[504,5050,648],{"class":518},[504,5052,538],{"class":514},[504,5054,5055],{"class":506,"line":613},[504,5056,567],{"emptyLinePlaceholder":206},[504,5058,5059],{"class":506,"line":621},[504,5060,5061],{"class":2126},"// Override the default font style\n",[504,5063,5064,5067,5070,5072,5074,5076,5078,5080],{"class":506,"line":629},[504,5065,5066],{"class":583},"variable",[504,5068,5069],{"class":518},"(fontStyle",[504,5071,703],{"class":514},[504,5073,528],{"class":514},[504,5075,4425],{"class":531},[504,5077,535],{"class":514},[504,5079,1105],{"class":518},[504,5081,538],{"class":514},[504,5083,5084],{"class":506,"line":637},[504,5085,567],{"emptyLinePlaceholder":206},[504,5087,5088,5090,5092,5094],{"class":506,"line":653},[504,5089,661],{"class":510},[504,5091,664],{"class":510},[504,5093,667],{"class":518},[504,5095,538],{"class":514},[489,5097,5098],{"icon":140,"label":672},[494,5099,5101],{"className":675,"code":5100,"filename":677,"language":678,"meta":500,"style":500},":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",[467,5102,5103,5111,5121,5131,5141,5151,5161],{"__ignoreMap":500},[504,5104,5105,5107,5109],{"class":506,"line":507},[504,5106,685],{"class":514},[504,5108,688],{"class":573},[504,5110,601],{"class":514},[504,5112,5113,5115,5117,5119],{"class":506,"line":541},[504,5114,4353],{"class":518},[504,5116,685],{"class":514},[504,5118,4358],{"class":518},[504,5120,538],{"class":514},[504,5122,5123,5125,5127,5129],{"class":506,"line":564},[504,5124,4365],{"class":518},[504,5126,685],{"class":514},[504,5128,4370],{"class":518},[504,5130,538],{"class":514},[504,5132,5133,5135,5137,5139],{"class":506,"line":570},[504,5134,4377],{"class":518},[504,5136,685],{"class":514},[504,5138,3405],{"class":518},[504,5140,538],{"class":514},[504,5142,5143,5145,5147,5149],{"class":506,"line":591},[504,5144,4388],{"class":518},[504,5146,685],{"class":514},[504,5148,3489],{"class":518},[504,5150,538],{"class":514},[504,5152,5153,5155,5157,5159],{"class":506,"line":596},[504,5154,4399],{"class":518},[504,5156,685],{"class":514},[504,5158,4358],{"class":518},[504,5160,538],{"class":514},[504,5162,5163],{"class":506,"line":604},[504,5164,868],{"class":514},[414,5166,5168],{"id":5167},"uselineheightdesigntokens",[467,5169,5170],{},"useLineHeightDesignTokens",[418,5172,472,5173,5176],{},[467,5174,5175],{},"useLineHeightDesignTokens()"," function creates a set of line height variables for controlling vertical rhythm and text readability.",[418,5178,5179],{},"Styleframe provides carefully balanced default line height values:",[486,5181,5182,5326],{},[489,5183,5184],{"icon":491,"label":492},[494,5185,5187],{"className":496,"code":5186,"filename":498,"language":499,"meta":500,"style":500},"import { styleframe } from 'styleframe';\nimport { useLineHeightDesignTokens } from '@styleframe/theme';\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",[467,5188,5189,5209,5230,5234,5248,5252,5258,5265,5272,5279,5286,5293,5300,5312,5316],{"__ignoreMap":500},[504,5190,5191,5193,5195,5197,5199,5201,5203,5205,5207],{"class":506,"line":507},[504,5192,511],{"class":510},[504,5194,515],{"class":514},[504,5196,519],{"class":518},[504,5198,522],{"class":514},[504,5200,525],{"class":510},[504,5202,528],{"class":514},[504,5204,532],{"class":531},[504,5206,535],{"class":514},[504,5208,538],{"class":514},[504,5210,5211,5213,5215,5218,5220,5222,5224,5226,5228],{"class":506,"line":541},[504,5212,511],{"class":510},[504,5214,515],{"class":514},[504,5216,5217],{"class":518}," useLineHeightDesignTokens",[504,5219,522],{"class":514},[504,5221,525],{"class":510},[504,5223,528],{"class":514},[504,5225,557],{"class":531},[504,5227,535],{"class":514},[504,5229,538],{"class":514},[504,5231,5232],{"class":506,"line":564},[504,5233,567],{"emptyLinePlaceholder":206},[504,5235,5236,5238,5240,5242,5244,5246],{"class":506,"line":570},[504,5237,574],{"class":573},[504,5239,577],{"class":518},[504,5241,580],{"class":514},[504,5243,519],{"class":583},[504,5245,586],{"class":518},[504,5247,538],{"class":514},[504,5249,5250],{"class":506,"line":591},[504,5251,567],{"emptyLinePlaceholder":206},[504,5253,5254,5256],{"class":506,"line":596},[504,5255,574],{"class":573},[504,5257,601],{"class":514},[504,5259,5260,5263],{"class":506,"line":604},[504,5261,5262],{"class":518},"    lineHeight",[504,5264,610],{"class":514},[504,5266,5267,5270],{"class":506,"line":613},[504,5268,5269],{"class":518},"    lineHeightTight",[504,5271,610],{"class":514},[504,5273,5274,5277],{"class":506,"line":621},[504,5275,5276],{"class":518},"    lineHeightSnug",[504,5278,610],{"class":514},[504,5280,5281,5284],{"class":506,"line":629},[504,5282,5283],{"class":518},"    lineHeightNormal",[504,5285,610],{"class":514},[504,5287,5288,5291],{"class":506,"line":637},[504,5289,5290],{"class":518},"    lineHeightRelaxed",[504,5292,610],{"class":514},[504,5294,5295,5298],{"class":506,"line":653},[504,5296,5297],{"class":518},"    lineHeightLoose",[504,5299,610],{"class":514},[504,5301,5302,5304,5306,5308,5310],{"class":506,"line":658},[504,5303,640],{"class":514},[504,5305,643],{"class":514},[504,5307,5217],{"class":583},[504,5309,648],{"class":518},[504,5311,538],{"class":514},[504,5313,5314],{"class":506,"line":1094},[504,5315,567],{"emptyLinePlaceholder":206},[504,5317,5318,5320,5322,5324],{"class":506,"line":1110},[504,5319,661],{"class":510},[504,5321,664],{"class":510},[504,5323,667],{"class":518},[504,5325,538],{"class":514},[489,5327,5328],{"icon":140,"label":672},[494,5329,5331],{"className":675,"code":5330,"filename":677,"language":678,"meta":500,"style":500},":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",[467,5332,5333,5341,5353,5365,5377,5389,5401,5417],{"__ignoreMap":500},[504,5334,5335,5337,5339],{"class":506,"line":507},[504,5336,685],{"class":514},[504,5338,688],{"class":573},[504,5340,601],{"class":514},[504,5342,5343,5346,5348,5351],{"class":506,"line":541},[504,5344,5345],{"class":518},"    --line-height--tight",[504,5347,685],{"class":514},[504,5349,5350],{"class":1947}," 1.2",[504,5352,538],{"class":514},[504,5354,5355,5358,5360,5363],{"class":506,"line":564},[504,5356,5357],{"class":518},"    --line-height--snug",[504,5359,685],{"class":514},[504,5361,5362],{"class":1947}," 1.35",[504,5364,538],{"class":514},[504,5366,5367,5370,5372,5375],{"class":506,"line":570},[504,5368,5369],{"class":518},"    --line-height--normal",[504,5371,685],{"class":514},[504,5373,5374],{"class":1947}," 1.5",[504,5376,538],{"class":514},[504,5378,5379,5382,5384,5387],{"class":506,"line":591},[504,5380,5381],{"class":518},"    --line-height--relaxed",[504,5383,685],{"class":514},[504,5385,5386],{"class":1947}," 1.65",[504,5388,538],{"class":514},[504,5390,5391,5394,5396,5399],{"class":506,"line":596},[504,5392,5393],{"class":518},"    --line-height--loose",[504,5395,685],{"class":514},[504,5397,5398],{"class":1947}," 1.9",[504,5400,538],{"class":514},[504,5402,5403,5406,5408,5410,5412,5415],{"class":506,"line":604},[504,5404,5405],{"class":518},"    --line-height",[504,5407,685],{"class":514},[504,5409,854],{"class":583},[504,5411,857],{"class":514},[504,5413,5414],{"class":518},"--line-height--normal",[504,5416,863],{"class":514},[504,5418,5419],{"class":506,"line":613},[504,5420,868],{"class":514},[418,5422,871],{},[429,5424,5425,5433,5441,5448,5456,5464],{},[432,5426,5427,5432],{},[435,5428,5429],{},[467,5430,5431],{},"tight",": 1.2 - For headings and display text",[432,5434,5435,5440],{},[435,5436,5437],{},[467,5438,5439],{},"snug",": 1.35 - For compact UI text",[432,5442,5443,5447],{},[435,5444,5445],{},[467,5446,3538],{},": 1.5 - For body text (optimal readability)",[432,5449,5450,5455],{},[435,5451,5452],{},[467,5453,5454],{},"relaxed",": 1.65 - For longer reading passages",[432,5457,5458,5463],{},[435,5459,5460],{},[467,5461,5462],{},"loose",": 1.9 - For maximum spacing and accessibility",[432,5465,5466,905,5470,908],{},[435,5467,5468],{},[467,5469,904],{},[467,5471,3538],{},[4457,5473,5474,5476,5477,5480],{},[435,5475,4461],{}," Line height values are unitless multipliers. A line height of ",[467,5478,5479],{},"1.5"," means 1.5 times the font size, which scales proportionally as font sizes change.",[478,5482,5484],{"id":5483},"creating-custom-line-height-variables","Creating Custom Line Height Variables",[418,5486,5487],{},"Define custom line heights for specific design needs:",[486,5489,5490,5676],{},[489,5491,5492],{"icon":491,"label":492},[494,5493,5495],{"className":496,"code":5494,"filename":498,"language":499,"meta":500,"style":500},"import { styleframe } from 'styleframe';\nimport { useLineHeightDesignTokens } from '@styleframe/theme';\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",[467,5496,5497,5517,5537,5541,5555,5559,5565,5571,5578,5585,5592,5606,5616,5627,5638,5650,5662,5666],{"__ignoreMap":500},[504,5498,5499,5501,5503,5505,5507,5509,5511,5513,5515],{"class":506,"line":507},[504,5500,511],{"class":510},[504,5502,515],{"class":514},[504,5504,519],{"class":518},[504,5506,522],{"class":514},[504,5508,525],{"class":510},[504,5510,528],{"class":514},[504,5512,532],{"class":531},[504,5514,535],{"class":514},[504,5516,538],{"class":514},[504,5518,5519,5521,5523,5525,5527,5529,5531,5533,5535],{"class":506,"line":541},[504,5520,511],{"class":510},[504,5522,515],{"class":514},[504,5524,5217],{"class":518},[504,5526,522],{"class":514},[504,5528,525],{"class":510},[504,5530,528],{"class":514},[504,5532,557],{"class":531},[504,5534,535],{"class":514},[504,5536,538],{"class":514},[504,5538,5539],{"class":506,"line":564},[504,5540,567],{"emptyLinePlaceholder":206},[504,5542,5543,5545,5547,5549,5551,5553],{"class":506,"line":570},[504,5544,574],{"class":573},[504,5546,577],{"class":518},[504,5548,580],{"class":514},[504,5550,519],{"class":583},[504,5552,586],{"class":518},[504,5554,538],{"class":514},[504,5556,5557],{"class":506,"line":591},[504,5558,567],{"emptyLinePlaceholder":206},[504,5560,5561,5563],{"class":506,"line":596},[504,5562,574],{"class":573},[504,5564,601],{"class":514},[504,5566,5567,5569],{"class":506,"line":604},[504,5568,5262],{"class":518},[504,5570,610],{"class":514},[504,5572,5573,5576],{"class":506,"line":613},[504,5574,5575],{"class":518},"    lineHeightHeading",[504,5577,610],{"class":514},[504,5579,5580,5583],{"class":506,"line":621},[504,5581,5582],{"class":518},"    lineHeightBody",[504,5584,610],{"class":514},[504,5586,5587,5590],{"class":506,"line":629},[504,5588,5589],{"class":518},"    lineHeightArticle",[504,5591,610],{"class":514},[504,5593,5594,5596,5598,5600,5602,5604],{"class":506,"line":637},[504,5595,640],{"class":514},[504,5597,643],{"class":514},[504,5599,5217],{"class":583},[504,5601,1036],{"class":518},[504,5603,703],{"class":514},[504,5605,601],{"class":514},[504,5607,5608,5610,5612,5614],{"class":506,"line":653},[504,5609,1046],{"class":1045},[504,5611,685],{"class":514},[504,5613,5374],{"class":1947},[504,5615,610],{"class":514},[504,5617,5618,5621,5623,5625],{"class":506,"line":658},[504,5619,5620],{"class":1045},"    heading",[504,5622,685],{"class":514},[504,5624,5350],{"class":1947},[504,5626,610],{"class":514},[504,5628,5629,5632,5634,5636],{"class":506,"line":1094},[504,5630,5631],{"class":1045},"    body",[504,5633,685],{"class":514},[504,5635,5374],{"class":1947},[504,5637,610],{"class":514},[504,5639,5640,5643,5645,5648],{"class":506,"line":1110},[504,5641,5642],{"class":1045},"    article",[504,5644,685],{"class":514},[504,5646,5647],{"class":1947}," 1.75",[504,5649,610],{"class":514},[504,5651,5652,5654,5656,5658,5660],{"class":506,"line":1115},[504,5653,640],{"class":514},[504,5655,1099],{"class":510},[504,5657,1102],{"class":573},[504,5659,1105],{"class":518},[504,5661,538],{"class":514},[504,5663,5664],{"class":506,"line":1452},[504,5665,567],{"emptyLinePlaceholder":206},[504,5667,5668,5670,5672,5674],{"class":506,"line":1862},[504,5669,661],{"class":510},[504,5671,664],{"class":510},[504,5673,667],{"class":518},[504,5675,538],{"class":514},[489,5677,5678],{"icon":140,"label":672},[494,5679,5681],{"className":675,"code":5680,"filename":677,"language":678,"meta":500,"style":500},":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",[467,5682,5683,5691,5701,5712,5723,5734],{"__ignoreMap":500},[504,5684,5685,5687,5689],{"class":506,"line":507},[504,5686,685],{"class":514},[504,5688,688],{"class":573},[504,5690,601],{"class":514},[504,5692,5693,5695,5697,5699],{"class":506,"line":541},[504,5694,5405],{"class":518},[504,5696,685],{"class":514},[504,5698,5374],{"class":1947},[504,5700,538],{"class":514},[504,5702,5703,5706,5708,5710],{"class":506,"line":564},[504,5704,5705],{"class":518},"    --line-height--heading",[504,5707,685],{"class":514},[504,5709,5350],{"class":1947},[504,5711,538],{"class":514},[504,5713,5714,5717,5719,5721],{"class":506,"line":570},[504,5715,5716],{"class":518},"    --line-height--body",[504,5718,685],{"class":514},[504,5720,5374],{"class":1947},[504,5722,538],{"class":514},[504,5724,5725,5728,5730,5732],{"class":506,"line":591},[504,5726,5727],{"class":518},"    --line-height--article",[504,5729,685],{"class":514},[504,5731,5647],{"class":1947},[504,5733,538],{"class":514},[504,5735,5736],{"class":506,"line":596},[504,5737,868],{"class":514},[478,5739,5741],{"id":5740},"updating-the-default-line-height-variable","Updating the Default Line Height Variable",[418,5743,5744],{},"You can override the default line height value after creating it:",[486,5746,5747,5889],{},[489,5748,5749],{"icon":491,"label":492},[494,5750,5752],{"className":496,"code":5751,"filename":498,"language":499,"meta":500,"style":500},"import { styleframe } from 'styleframe';\nimport { useLineHeightDesignTokens } from '@styleframe/theme';\n\nconst s = styleframe();\nconst { variable } = s;\n\nconst { lineHeight } = useLineHeightDesignTokens(s);\n\n// Override the default line height\nvariable(lineHeight, 1.65);\n\nexport default s;\n",[467,5753,5754,5774,5794,5798,5812,5828,5832,5851,5855,5860,5875,5879],{"__ignoreMap":500},[504,5755,5756,5758,5760,5762,5764,5766,5768,5770,5772],{"class":506,"line":507},[504,5757,511],{"class":510},[504,5759,515],{"class":514},[504,5761,519],{"class":518},[504,5763,522],{"class":514},[504,5765,525],{"class":510},[504,5767,528],{"class":514},[504,5769,532],{"class":531},[504,5771,535],{"class":514},[504,5773,538],{"class":514},[504,5775,5776,5778,5780,5782,5784,5786,5788,5790,5792],{"class":506,"line":541},[504,5777,511],{"class":510},[504,5779,515],{"class":514},[504,5781,5217],{"class":518},[504,5783,522],{"class":514},[504,5785,525],{"class":510},[504,5787,528],{"class":514},[504,5789,557],{"class":531},[504,5791,535],{"class":514},[504,5793,538],{"class":514},[504,5795,5796],{"class":506,"line":564},[504,5797,567],{"emptyLinePlaceholder":206},[504,5799,5800,5802,5804,5806,5808,5810],{"class":506,"line":570},[504,5801,574],{"class":573},[504,5803,577],{"class":518},[504,5805,580],{"class":514},[504,5807,519],{"class":583},[504,5809,586],{"class":518},[504,5811,538],{"class":514},[504,5813,5814,5816,5818,5820,5822,5824,5826],{"class":506,"line":591},[504,5815,574],{"class":573},[504,5817,515],{"class":514},[504,5819,5022],{"class":518},[504,5821,640],{"class":514},[504,5823,643],{"class":514},[504,5825,667],{"class":518},[504,5827,538],{"class":514},[504,5829,5830],{"class":506,"line":596},[504,5831,567],{"emptyLinePlaceholder":206},[504,5833,5834,5836,5838,5841,5843,5845,5847,5849],{"class":506,"line":604},[504,5835,574],{"class":573},[504,5837,515],{"class":514},[504,5839,5840],{"class":518}," lineHeight ",[504,5842,640],{"class":514},[504,5844,643],{"class":514},[504,5846,5217],{"class":583},[504,5848,648],{"class":518},[504,5850,538],{"class":514},[504,5852,5853],{"class":506,"line":613},[504,5854,567],{"emptyLinePlaceholder":206},[504,5856,5857],{"class":506,"line":621},[504,5858,5859],{"class":2126},"// Override the default line height\n",[504,5861,5862,5864,5867,5869,5871,5873],{"class":506,"line":629},[504,5863,5066],{"class":583},[504,5865,5866],{"class":518},"(lineHeight",[504,5868,703],{"class":514},[504,5870,5386],{"class":1947},[504,5872,1105],{"class":518},[504,5874,538],{"class":514},[504,5876,5877],{"class":506,"line":637},[504,5878,567],{"emptyLinePlaceholder":206},[504,5880,5881,5883,5885,5887],{"class":506,"line":653},[504,5882,661],{"class":510},[504,5884,664],{"class":510},[504,5886,667],{"class":518},[504,5888,538],{"class":514},[489,5890,5891],{"icon":140,"label":672},[494,5892,5894],{"className":675,"code":5893,"filename":677,"language":678,"meta":500,"style":500},":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",[467,5895,5896,5904,5914,5924,5934,5944,5954,5964],{"__ignoreMap":500},[504,5897,5898,5900,5902],{"class":506,"line":507},[504,5899,685],{"class":514},[504,5901,688],{"class":573},[504,5903,601],{"class":514},[504,5905,5906,5908,5910,5912],{"class":506,"line":541},[504,5907,5345],{"class":518},[504,5909,685],{"class":514},[504,5911,5350],{"class":1947},[504,5913,538],{"class":514},[504,5915,5916,5918,5920,5922],{"class":506,"line":564},[504,5917,5357],{"class":518},[504,5919,685],{"class":514},[504,5921,5362],{"class":1947},[504,5923,538],{"class":514},[504,5925,5926,5928,5930,5932],{"class":506,"line":570},[504,5927,5369],{"class":518},[504,5929,685],{"class":514},[504,5931,5374],{"class":1947},[504,5933,538],{"class":514},[504,5935,5936,5938,5940,5942],{"class":506,"line":591},[504,5937,5381],{"class":518},[504,5939,685],{"class":514},[504,5941,5386],{"class":1947},[504,5943,538],{"class":514},[504,5945,5946,5948,5950,5952],{"class":506,"line":596},[504,5947,5393],{"class":518},[504,5949,685],{"class":514},[504,5951,5398],{"class":1947},[504,5953,538],{"class":514},[504,5955,5956,5958,5960,5962],{"class":506,"line":604},[504,5957,5405],{"class":518},[504,5959,685],{"class":514},[504,5961,5386],{"class":1947},[504,5963,538],{"class":514},[504,5965,5966],{"class":506,"line":613},[504,5967,868],{"class":514},[414,5969,5971],{"id":5970},"useletterspacingdesigntokens",[467,5972,5973],{},"useLetterSpacingDesignTokens",[418,5975,472,5976,5979],{},[467,5977,5978],{},"useLetterSpacingDesignTokens()"," function creates a set of letter spacing (tracking) variables for fine-tuning text appearance.",[418,5981,5982],{},"Styleframe provides balanced default letter spacing values:",[486,5984,5985,6129],{},[489,5986,5987],{"icon":491,"label":492},[494,5988,5990],{"className":496,"code":5989,"filename":498,"language":499,"meta":500,"style":500},"import { styleframe } from 'styleframe';\nimport { useLetterSpacingDesignTokens } from '@styleframe/theme';\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",[467,5991,5992,6012,6033,6037,6051,6055,6061,6068,6075,6082,6089,6096,6103,6115,6119],{"__ignoreMap":500},[504,5993,5994,5996,5998,6000,6002,6004,6006,6008,6010],{"class":506,"line":507},[504,5995,511],{"class":510},[504,5997,515],{"class":514},[504,5999,519],{"class":518},[504,6001,522],{"class":514},[504,6003,525],{"class":510},[504,6005,528],{"class":514},[504,6007,532],{"class":531},[504,6009,535],{"class":514},[504,6011,538],{"class":514},[504,6013,6014,6016,6018,6021,6023,6025,6027,6029,6031],{"class":506,"line":541},[504,6015,511],{"class":510},[504,6017,515],{"class":514},[504,6019,6020],{"class":518}," useLetterSpacingDesignTokens",[504,6022,522],{"class":514},[504,6024,525],{"class":510},[504,6026,528],{"class":514},[504,6028,557],{"class":531},[504,6030,535],{"class":514},[504,6032,538],{"class":514},[504,6034,6035],{"class":506,"line":564},[504,6036,567],{"emptyLinePlaceholder":206},[504,6038,6039,6041,6043,6045,6047,6049],{"class":506,"line":570},[504,6040,574],{"class":573},[504,6042,577],{"class":518},[504,6044,580],{"class":514},[504,6046,519],{"class":583},[504,6048,586],{"class":518},[504,6050,538],{"class":514},[504,6052,6053],{"class":506,"line":591},[504,6054,567],{"emptyLinePlaceholder":206},[504,6056,6057,6059],{"class":506,"line":596},[504,6058,574],{"class":573},[504,6060,601],{"class":514},[504,6062,6063,6066],{"class":506,"line":604},[504,6064,6065],{"class":518},"    letterSpacing",[504,6067,610],{"class":514},[504,6069,6070,6073],{"class":506,"line":613},[504,6071,6072],{"class":518},"    letterSpacingTighter",[504,6074,610],{"class":514},[504,6076,6077,6080],{"class":506,"line":621},[504,6078,6079],{"class":518},"    letterSpacingTight",[504,6081,610],{"class":514},[504,6083,6084,6087],{"class":506,"line":629},[504,6085,6086],{"class":518},"    letterSpacingNormal",[504,6088,610],{"class":514},[504,6090,6091,6094],{"class":506,"line":637},[504,6092,6093],{"class":518},"    letterSpacingWide",[504,6095,610],{"class":514},[504,6097,6098,6101],{"class":506,"line":653},[504,6099,6100],{"class":518},"    letterSpacingWider",[504,6102,610],{"class":514},[504,6104,6105,6107,6109,6111,6113],{"class":506,"line":658},[504,6106,640],{"class":514},[504,6108,643],{"class":514},[504,6110,6020],{"class":583},[504,6112,648],{"class":518},[504,6114,538],{"class":514},[504,6116,6117],{"class":506,"line":1094},[504,6118,567],{"emptyLinePlaceholder":206},[504,6120,6121,6123,6125,6127],{"class":506,"line":1110},[504,6122,661],{"class":510},[504,6124,664],{"class":510},[504,6126,667],{"class":518},[504,6128,538],{"class":514},[489,6130,6131],{"icon":140,"label":672},[494,6132,6134],{"className":675,"code":6133,"filename":677,"language":678,"meta":500,"style":500},":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",[467,6135,6136,6144,6156,6168,6179,6191,6203,6219],{"__ignoreMap":500},[504,6137,6138,6140,6142],{"class":506,"line":507},[504,6139,685],{"class":514},[504,6141,688],{"class":573},[504,6143,601],{"class":514},[504,6145,6146,6149,6151,6154],{"class":506,"line":541},[504,6147,6148],{"class":518},"    --letter-spacing--tighter",[504,6150,685],{"class":514},[504,6152,6153],{"class":1947}," -0.05em",[504,6155,538],{"class":514},[504,6157,6158,6161,6163,6166],{"class":506,"line":564},[504,6159,6160],{"class":518},"    --letter-spacing--tight",[504,6162,685],{"class":514},[504,6164,6165],{"class":1947}," -0.025em",[504,6167,538],{"class":514},[504,6169,6170,6173,6175,6177],{"class":506,"line":570},[504,6171,6172],{"class":518},"    --letter-spacing--normal",[504,6174,685],{"class":514},[504,6176,3405],{"class":518},[504,6178,538],{"class":514},[504,6180,6181,6184,6186,6189],{"class":506,"line":591},[504,6182,6183],{"class":518},"    --letter-spacing--wide",[504,6185,685],{"class":514},[504,6187,6188],{"class":1947}," 0.05em",[504,6190,538],{"class":514},[504,6192,6193,6196,6198,6201],{"class":506,"line":596},[504,6194,6195],{"class":518},"    --letter-spacing--wider",[504,6197,685],{"class":514},[504,6199,6200],{"class":1947}," 0.1em",[504,6202,538],{"class":514},[504,6204,6205,6208,6210,6212,6214,6217],{"class":506,"line":604},[504,6206,6207],{"class":518},"    --letter-spacing",[504,6209,685],{"class":514},[504,6211,854],{"class":583},[504,6213,857],{"class":514},[504,6215,6216],{"class":518},"--letter-spacing--normal",[504,6218,863],{"class":514},[504,6220,6221],{"class":506,"line":613},[504,6222,868],{"class":514},[418,6224,871],{},[429,6226,6227,6235,6242,6251,6259,6267],{},[432,6228,6229,6234],{},[435,6230,6231],{},[467,6232,6233],{},"tighter",": -0.05em - Very tight spacing for large display text",[432,6236,6237,6241],{},[435,6238,6239],{},[467,6240,5431],{},": -0.025em - Tight spacing for headings",[432,6243,6244,3539,6248,6250],{},[435,6245,6246],{},[467,6247,3538],{},[467,6249,3538],{}," keyword - Default browser spacing",[432,6252,6253,6258],{},[435,6254,6255],{},[467,6256,6257],{},"wide",": 0.05em - Loose spacing for small text or all-caps",[432,6260,6261,6266],{},[435,6262,6263],{},[467,6264,6265],{},"wider",": 0.1em - Very loose spacing for labels and UI text",[432,6268,6269,905,6273,908],{},[435,6270,6271],{},[467,6272,904],{},[467,6274,3538],{},[4457,6276,6277,6279,6280,6283],{},[435,6278,4461],{}," Letter spacing uses ",[467,6281,6282],{},"em"," units so it scales proportionally with font size. Negative values tighten spacing, positive values loosen it.",[478,6285,6287],{"id":6286},"creating-custom-letter-spacing-variables","Creating Custom Letter Spacing Variables",[418,6289,6290],{},"Define custom letter spacing for specific typography styles:",[486,6292,6293,6494],{},[489,6294,6295],{"icon":491,"label":492},[494,6296,6298],{"className":496,"code":6297,"filename":498,"language":499,"meta":500,"style":500},"import { styleframe } from 'styleframe';\nimport { useLetterSpacingDesignTokens } from '@styleframe/theme';\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",[467,6299,6300,6320,6340,6344,6358,6362,6368,6374,6381,6388,6395,6409,6423,6438,6452,6468,6480,6484],{"__ignoreMap":500},[504,6301,6302,6304,6306,6308,6310,6312,6314,6316,6318],{"class":506,"line":507},[504,6303,511],{"class":510},[504,6305,515],{"class":514},[504,6307,519],{"class":518},[504,6309,522],{"class":514},[504,6311,525],{"class":510},[504,6313,528],{"class":514},[504,6315,532],{"class":531},[504,6317,535],{"class":514},[504,6319,538],{"class":514},[504,6321,6322,6324,6326,6328,6330,6332,6334,6336,6338],{"class":506,"line":541},[504,6323,511],{"class":510},[504,6325,515],{"class":514},[504,6327,6020],{"class":518},[504,6329,522],{"class":514},[504,6331,525],{"class":510},[504,6333,528],{"class":514},[504,6335,557],{"class":531},[504,6337,535],{"class":514},[504,6339,538],{"class":514},[504,6341,6342],{"class":506,"line":564},[504,6343,567],{"emptyLinePlaceholder":206},[504,6345,6346,6348,6350,6352,6354,6356],{"class":506,"line":570},[504,6347,574],{"class":573},[504,6349,577],{"class":518},[504,6351,580],{"class":514},[504,6353,519],{"class":583},[504,6355,586],{"class":518},[504,6357,538],{"class":514},[504,6359,6360],{"class":506,"line":591},[504,6361,567],{"emptyLinePlaceholder":206},[504,6363,6364,6366],{"class":506,"line":596},[504,6365,574],{"class":573},[504,6367,601],{"class":514},[504,6369,6370,6372],{"class":506,"line":604},[504,6371,6065],{"class":518},[504,6373,610],{"class":514},[504,6375,6376,6379],{"class":506,"line":613},[504,6377,6378],{"class":518},"    letterSpacingHeading",[504,6380,610],{"class":514},[504,6382,6383,6386],{"class":506,"line":621},[504,6384,6385],{"class":518},"    letterSpacingBody",[504,6387,610],{"class":514},[504,6389,6390,6393],{"class":506,"line":629},[504,6391,6392],{"class":518},"    letterSpacingLabel",[504,6394,610],{"class":514},[504,6396,6397,6399,6401,6403,6405,6407],{"class":506,"line":637},[504,6398,640],{"class":514},[504,6400,643],{"class":514},[504,6402,6020],{"class":583},[504,6404,1036],{"class":518},[504,6406,703],{"class":514},[504,6408,601],{"class":514},[504,6410,6411,6413,6415,6417,6419,6421],{"class":506,"line":653},[504,6412,1046],{"class":1045},[504,6414,685],{"class":514},[504,6416,528],{"class":514},[504,6418,3538],{"class":531},[504,6420,535],{"class":514},[504,6422,610],{"class":514},[504,6424,6425,6427,6429,6431,6434,6436],{"class":506,"line":658},[504,6426,5620],{"class":1045},[504,6428,685],{"class":514},[504,6430,528],{"class":514},[504,6432,6433],{"class":531},"-0.02em",[504,6435,535],{"class":514},[504,6437,610],{"class":514},[504,6439,6440,6442,6444,6446,6448,6450],{"class":506,"line":1094},[504,6441,5631],{"class":1045},[504,6443,685],{"class":514},[504,6445,528],{"class":514},[504,6447,3538],{"class":531},[504,6449,535],{"class":514},[504,6451,610],{"class":514},[504,6453,6454,6457,6459,6461,6464,6466],{"class":506,"line":1110},[504,6455,6456],{"class":1045},"    label",[504,6458,685],{"class":514},[504,6460,528],{"class":514},[504,6462,6463],{"class":531},"0.08em",[504,6465,535],{"class":514},[504,6467,610],{"class":514},[504,6469,6470,6472,6474,6476,6478],{"class":506,"line":1115},[504,6471,640],{"class":514},[504,6473,1099],{"class":510},[504,6475,1102],{"class":573},[504,6477,1105],{"class":518},[504,6479,538],{"class":514},[504,6481,6482],{"class":506,"line":1452},[504,6483,567],{"emptyLinePlaceholder":206},[504,6485,6486,6488,6490,6492],{"class":506,"line":1862},[504,6487,661],{"class":510},[504,6489,664],{"class":510},[504,6491,667],{"class":518},[504,6493,538],{"class":514},[489,6495,6496],{"icon":140,"label":672},[494,6497,6499],{"className":675,"code":6498,"filename":677,"language":678,"meta":500,"style":500},":root {\n    --letter-spacing: normal;\n    --letter-spacing--heading: -0.02em;\n    --letter-spacing--body: normal;\n    --letter-spacing--label: 0.08em;\n}\n",[467,6500,6501,6509,6519,6531,6542,6554],{"__ignoreMap":500},[504,6502,6503,6505,6507],{"class":506,"line":507},[504,6504,685],{"class":514},[504,6506,688],{"class":573},[504,6508,601],{"class":514},[504,6510,6511,6513,6515,6517],{"class":506,"line":541},[504,6512,6207],{"class":518},[504,6514,685],{"class":514},[504,6516,3405],{"class":518},[504,6518,538],{"class":514},[504,6520,6521,6524,6526,6529],{"class":506,"line":564},[504,6522,6523],{"class":518},"    --letter-spacing--heading",[504,6525,685],{"class":514},[504,6527,6528],{"class":1947}," -0.02em",[504,6530,538],{"class":514},[504,6532,6533,6536,6538,6540],{"class":506,"line":570},[504,6534,6535],{"class":518},"    --letter-spacing--body",[504,6537,685],{"class":514},[504,6539,3405],{"class":518},[504,6541,538],{"class":514},[504,6543,6544,6547,6549,6552],{"class":506,"line":591},[504,6545,6546],{"class":518},"    --letter-spacing--label",[504,6548,685],{"class":514},[504,6550,6551],{"class":1947}," 0.08em",[504,6553,538],{"class":514},[504,6555,6556],{"class":506,"line":596},[504,6557,868],{"class":514},[478,6559,6561],{"id":6560},"extending-the-default-letter-spacing-values","Extending the Default Letter Spacing Values",[418,6563,4720],{},[486,6565,6566,6754],{},[489,6567,6568],{"icon":491,"label":492},[494,6569,6571],{"className":496,"code":6570,"filename":498,"language":499,"meta":500,"style":500},"import { styleframe } from 'styleframe';\nimport { useLetterSpacingDesignTokens, defaultLetterSpacingValues } from '@styleframe/theme';\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",[467,6572,6573,6593,6618,6622,6636,6640,6646,6652,6658,6664,6670,6676,6682,6689,6703,6712,6728,6740,6744],{"__ignoreMap":500},[504,6574,6575,6577,6579,6581,6583,6585,6587,6589,6591],{"class":506,"line":507},[504,6576,511],{"class":510},[504,6578,515],{"class":514},[504,6580,519],{"class":518},[504,6582,522],{"class":514},[504,6584,525],{"class":510},[504,6586,528],{"class":514},[504,6588,532],{"class":531},[504,6590,535],{"class":514},[504,6592,538],{"class":514},[504,6594,6595,6597,6599,6601,6603,6606,6608,6610,6612,6614,6616],{"class":506,"line":541},[504,6596,511],{"class":510},[504,6598,515],{"class":514},[504,6600,6020],{"class":518},[504,6602,703],{"class":514},[504,6604,6605],{"class":518}," defaultLetterSpacingValues",[504,6607,522],{"class":514},[504,6609,525],{"class":510},[504,6611,528],{"class":514},[504,6613,557],{"class":531},[504,6615,535],{"class":514},[504,6617,538],{"class":514},[504,6619,6620],{"class":506,"line":564},[504,6621,567],{"emptyLinePlaceholder":206},[504,6623,6624,6626,6628,6630,6632,6634],{"class":506,"line":570},[504,6625,574],{"class":573},[504,6627,577],{"class":518},[504,6629,580],{"class":514},[504,6631,519],{"class":583},[504,6633,586],{"class":518},[504,6635,538],{"class":514},[504,6637,6638],{"class":506,"line":591},[504,6639,567],{"emptyLinePlaceholder":206},[504,6641,6642,6644],{"class":506,"line":596},[504,6643,574],{"class":573},[504,6645,601],{"class":514},[504,6647,6648,6650],{"class":506,"line":604},[504,6649,6065],{"class":518},[504,6651,610],{"class":514},[504,6653,6654,6656],{"class":506,"line":613},[504,6655,6072],{"class":518},[504,6657,610],{"class":514},[504,6659,6660,6662],{"class":506,"line":621},[504,6661,6079],{"class":518},[504,6663,610],{"class":514},[504,6665,6666,6668],{"class":506,"line":629},[504,6667,6086],{"class":518},[504,6669,610],{"class":514},[504,6671,6672,6674],{"class":506,"line":637},[504,6673,6093],{"class":518},[504,6675,610],{"class":514},[504,6677,6678,6680],{"class":506,"line":653},[504,6679,6100],{"class":518},[504,6681,610],{"class":514},[504,6683,6684,6687],{"class":506,"line":658},[504,6685,6686],{"class":518},"    letterSpacingWidest",[504,6688,610],{"class":514},[504,6690,6691,6693,6695,6697,6699,6701],{"class":506,"line":1094},[504,6692,640],{"class":514},[504,6694,643],{"class":514},[504,6696,6020],{"class":583},[504,6698,1036],{"class":518},[504,6700,703],{"class":514},[504,6702,601],{"class":514},[504,6704,6705,6707,6710],{"class":506,"line":1110},[504,6706,1412],{"class":514},[504,6708,6709],{"class":518},"defaultLetterSpacingValues",[504,6711,610],{"class":514},[504,6713,6714,6717,6719,6721,6724,6726],{"class":506,"line":1115},[504,6715,6716],{"class":1045},"    widest",[504,6718,685],{"class":514},[504,6720,528],{"class":514},[504,6722,6723],{"class":531},"0.15em",[504,6725,535],{"class":514},[504,6727,610],{"class":514},[504,6729,6730,6732,6734,6736,6738],{"class":506,"line":1452},[504,6731,640],{"class":514},[504,6733,1099],{"class":510},[504,6735,1102],{"class":573},[504,6737,1105],{"class":518},[504,6739,538],{"class":514},[504,6741,6742],{"class":506,"line":1862},[504,6743,567],{"emptyLinePlaceholder":206},[504,6745,6746,6748,6750,6752],{"class":506,"line":1879},[504,6747,661],{"class":510},[504,6749,664],{"class":510},[504,6751,667],{"class":518},[504,6753,538],{"class":514},[489,6755,6756],{"icon":140,"label":672},[494,6757,6759],{"className":675,"code":6758,"filename":677,"language":678,"meta":500,"style":500},":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",[467,6760,6761,6769,6779,6789,6799,6809,6819,6831,6845],{"__ignoreMap":500},[504,6762,6763,6765,6767],{"class":506,"line":507},[504,6764,685],{"class":514},[504,6766,688],{"class":573},[504,6768,601],{"class":514},[504,6770,6771,6773,6775,6777],{"class":506,"line":541},[504,6772,6148],{"class":518},[504,6774,685],{"class":514},[504,6776,6153],{"class":1947},[504,6778,538],{"class":514},[504,6780,6781,6783,6785,6787],{"class":506,"line":564},[504,6782,6160],{"class":518},[504,6784,685],{"class":514},[504,6786,6165],{"class":1947},[504,6788,538],{"class":514},[504,6790,6791,6793,6795,6797],{"class":506,"line":570},[504,6792,6172],{"class":518},[504,6794,685],{"class":514},[504,6796,3405],{"class":518},[504,6798,538],{"class":514},[504,6800,6801,6803,6805,6807],{"class":506,"line":591},[504,6802,6183],{"class":518},[504,6804,685],{"class":514},[504,6806,6188],{"class":1947},[504,6808,538],{"class":514},[504,6810,6811,6813,6815,6817],{"class":506,"line":596},[504,6812,6195],{"class":518},[504,6814,685],{"class":514},[504,6816,6200],{"class":1947},[504,6818,538],{"class":514},[504,6820,6821,6824,6826,6829],{"class":506,"line":604},[504,6822,6823],{"class":518},"    --letter-spacing--widest",[504,6825,685],{"class":514},[504,6827,6828],{"class":1947}," 0.15em",[504,6830,538],{"class":514},[504,6832,6833,6835,6837,6839,6841,6843],{"class":506,"line":613},[504,6834,6207],{"class":518},[504,6836,685],{"class":514},[504,6838,854],{"class":583},[504,6840,857],{"class":514},[504,6842,6216],{"class":518},[504,6844,863],{"class":514},[504,6846,6847],{"class":506,"line":621},[504,6848,868],{"class":514},[414,6850,6852],{"id":6851},"using-typography-variables","Using Typography Variables",[418,6854,6855],{},"Once created, typography variables can be combined to create complete text styles:",[486,6857,6858,7514],{},[489,6859,6860],{"icon":491,"label":492},[494,6861,6863],{"className":496,"code":6862,"filename":498,"language":499,"meta":500,"style":500},"import { styleframe } from 'styleframe';\nimport { useFontFamilyDesignTokens, useFontSizeDesignTokens, useFontWeightDesignTokens, useLineHeightDesignTokens, useLetterSpacingDesignTokens } from '@styleframe/theme';\n\nconst s = styleframe();\nconst { ref, selector } = s;\n\n// 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// 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",[467,6864,6865,6885,6921,6925,6939,6961,6965,6970,6994,7025,7039,7057,7076,7088,7117,7141,7165,7189,7193,7198,7216,7229,7242,7255,7268,7281,7294,7302,7306,7323,7335,7348,7360,7373,7381,7385,7402,7416,7425,7430,7447,7461,7475,7489,7498,7503],{"__ignoreMap":500},[504,6866,6867,6869,6871,6873,6875,6877,6879,6881,6883],{"class":506,"line":507},[504,6868,511],{"class":510},[504,6870,515],{"class":514},[504,6872,519],{"class":518},[504,6874,522],{"class":514},[504,6876,525],{"class":510},[504,6878,528],{"class":514},[504,6880,532],{"class":531},[504,6882,535],{"class":514},[504,6884,538],{"class":514},[504,6886,6887,6889,6891,6893,6895,6897,6899,6901,6903,6905,6907,6909,6911,6913,6915,6917,6919],{"class":506,"line":541},[504,6888,511],{"class":510},[504,6890,515],{"class":514},[504,6892,548],{"class":518},[504,6894,703],{"class":514},[504,6896,1701],{"class":518},[504,6898,703],{"class":514},[504,6900,3213],{"class":518},[504,6902,703],{"class":514},[504,6904,5217],{"class":518},[504,6906,703],{"class":514},[504,6908,6020],{"class":518},[504,6910,522],{"class":514},[504,6912,525],{"class":510},[504,6914,528],{"class":514},[504,6916,557],{"class":531},[504,6918,535],{"class":514},[504,6920,538],{"class":514},[504,6922,6923],{"class":506,"line":564},[504,6924,567],{"emptyLinePlaceholder":206},[504,6926,6927,6929,6931,6933,6935,6937],{"class":506,"line":570},[504,6928,574],{"class":573},[504,6930,577],{"class":518},[504,6932,580],{"class":514},[504,6934,519],{"class":583},[504,6936,586],{"class":518},[504,6938,538],{"class":514},[504,6940,6941,6943,6945,6948,6950,6953,6955,6957,6959],{"class":506,"line":591},[504,6942,574],{"class":573},[504,6944,515],{"class":514},[504,6946,6947],{"class":518}," ref",[504,6949,703],{"class":514},[504,6951,6952],{"class":518}," selector ",[504,6954,640],{"class":514},[504,6956,643],{"class":514},[504,6958,667],{"class":518},[504,6960,538],{"class":514},[504,6962,6963],{"class":506,"line":596},[504,6964,567],{"emptyLinePlaceholder":206},[504,6966,6967],{"class":506,"line":604},[504,6968,6969],{"class":2126},"// Define typography variables\n",[504,6971,6972,6974,6976,6979,6981,6984,6986,6988,6990,6992],{"class":506,"line":613},[504,6973,574],{"class":573},[504,6975,515],{"class":514},[504,6977,6978],{"class":518}," fontFamily",[504,6980,703],{"class":514},[504,6982,6983],{"class":518}," fontFamilyMono ",[504,6985,640],{"class":514},[504,6987,643],{"class":514},[504,6989,548],{"class":583},[504,6991,648],{"class":518},[504,6993,538],{"class":514},[504,6995,6996,6998,7000,7003,7005,7008,7010,7013,7015,7017,7019,7021,7023],{"class":506,"line":621},[504,6997,574],{"class":573},[504,6999,515],{"class":514},[504,7001,7002],{"class":518}," fontSizeXl",[504,7004,703],{"class":514},[504,7006,7007],{"class":518}," fontSize2xl",[504,7009,703],{"class":514},[504,7011,7012],{"class":518}," fontSize3xl ",[504,7014,640],{"class":514},[504,7016,643],{"class":514},[504,7018,1701],{"class":583},[504,7020,1036],{"class":518},[504,7022,703],{"class":514},[504,7024,601],{"class":514},[504,7026,7027,7029,7031,7033,7035,7037],{"class":506,"line":629},[504,7028,1882],{"class":1045},[504,7030,685],{"class":514},[504,7032,528],{"class":514},[504,7034,1872],{"class":531},[504,7036,535],{"class":514},[504,7038,610],{"class":514},[504,7040,7041,7043,7045,7047,7049,7051,7053,7055],{"class":506,"line":637},[504,7042,2491],{"class":514},[504,7044,2494],{"class":1045},[504,7046,535],{"class":514},[504,7048,685],{"class":514},[504,7050,528],{"class":514},[504,7052,1889],{"class":531},[504,7054,535],{"class":514},[504,7056,610],{"class":514},[504,7058,7059,7061,7063,7065,7067,7069,7072,7074],{"class":506,"line":653},[504,7060,2491],{"class":514},[504,7062,2518],{"class":1045},[504,7064,535],{"class":514},[504,7066,685],{"class":514},[504,7068,528],{"class":514},[504,7070,7071],{"class":531},"2rem",[504,7073,535],{"class":514},[504,7075,610],{"class":514},[504,7077,7078,7080,7082,7084,7086],{"class":506,"line":658},[504,7079,640],{"class":514},[504,7081,1099],{"class":510},[504,7083,1102],{"class":573},[504,7085,1105],{"class":518},[504,7087,538],{"class":514},[504,7089,7090,7092,7094,7097,7099,7102,7104,7107,7109,7111,7113,7115],{"class":506,"line":1094},[504,7091,574],{"class":573},[504,7093,515],{"class":514},[504,7095,7096],{"class":518}," fontWeightNormal",[504,7098,703],{"class":514},[504,7100,7101],{"class":518}," fontWeightSemibold",[504,7103,703],{"class":514},[504,7105,7106],{"class":518}," fontWeightBold ",[504,7108,640],{"class":514},[504,7110,643],{"class":514},[504,7112,3213],{"class":583},[504,7114,648],{"class":518},[504,7116,538],{"class":514},[504,7118,7119,7121,7123,7126,7128,7131,7133,7135,7137,7139],{"class":506,"line":1110},[504,7120,574],{"class":573},[504,7122,515],{"class":514},[504,7124,7125],{"class":518}," fontStyleNormal",[504,7127,703],{"class":514},[504,7129,7130],{"class":518}," fontStyleItalic ",[504,7132,640],{"class":514},[504,7134,643],{"class":514},[504,7136,4232],{"class":583},[504,7138,648],{"class":518},[504,7140,538],{"class":514},[504,7142,7143,7145,7147,7150,7152,7155,7157,7159,7161,7163],{"class":506,"line":1115},[504,7144,574],{"class":573},[504,7146,515],{"class":514},[504,7148,7149],{"class":518}," lineHeightTight",[504,7151,703],{"class":514},[504,7153,7154],{"class":518}," lineHeightNormal ",[504,7156,640],{"class":514},[504,7158,643],{"class":514},[504,7160,5217],{"class":583},[504,7162,648],{"class":518},[504,7164,538],{"class":514},[504,7166,7167,7169,7171,7174,7176,7179,7181,7183,7185,7187],{"class":506,"line":1452},[504,7168,574],{"class":573},[504,7170,515],{"class":514},[504,7172,7173],{"class":518}," letterSpacingTight",[504,7175,703],{"class":514},[504,7177,7178],{"class":518}," letterSpacingWide ",[504,7180,640],{"class":514},[504,7182,643],{"class":514},[504,7184,6020],{"class":583},[504,7186,648],{"class":518},[504,7188,538],{"class":514},[504,7190,7191],{"class":506,"line":1862},[504,7192,567],{"emptyLinePlaceholder":206},[504,7194,7195],{"class":506,"line":1879},[504,7196,7197],{"class":2126},"// Apply to elements\n",[504,7199,7200,7203,7205,7207,7210,7212,7214],{"class":506,"line":1896},[504,7201,7202],{"class":583},"selector",[504,7204,857],{"class":518},[504,7206,535],{"class":514},[504,7208,7209],{"class":531},"h1",[504,7211,535],{"class":514},[504,7213,703],{"class":514},[504,7215,601],{"class":514},[504,7217,7218,7220,7222,7224,7227],{"class":506,"line":1909},[504,7219,607],{"class":1045},[504,7221,685],{"class":514},[504,7223,6947],{"class":583},[504,7225,7226],{"class":518},"(fontFamily)",[504,7228,610],{"class":514},[504,7230,7231,7233,7235,7237,7240],{"class":506,"line":1914},[504,7232,1746],{"class":1045},[504,7234,685],{"class":514},[504,7236,6947],{"class":583},[504,7238,7239],{"class":518},"(fontSize3xl)",[504,7241,610],{"class":514},[504,7243,7244,7246,7248,7250,7253],{"class":506,"line":2355},[504,7245,3258],{"class":1045},[504,7247,685],{"class":514},[504,7249,6947],{"class":583},[504,7251,7252],{"class":518},"(fontWeightBold)",[504,7254,610],{"class":514},[504,7256,7257,7259,7261,7263,7266],{"class":506,"line":2363},[504,7258,4277],{"class":1045},[504,7260,685],{"class":514},[504,7262,6947],{"class":583},[504,7264,7265],{"class":518},"(fontStyleNormal)",[504,7267,610],{"class":514},[504,7269,7270,7272,7274,7276,7279],{"class":506,"line":2371},[504,7271,5262],{"class":1045},[504,7273,685],{"class":514},[504,7275,6947],{"class":583},[504,7277,7278],{"class":518},"(lineHeightTight)",[504,7280,610],{"class":514},[504,7282,7283,7285,7287,7289,7292],{"class":506,"line":2391},[504,7284,6065],{"class":1045},[504,7286,685],{"class":514},[504,7288,6947],{"class":583},[504,7290,7291],{"class":518},"(letterSpacingTight)",[504,7293,610],{"class":514},[504,7295,7296,7298,7300],{"class":506,"line":2413},[504,7297,640],{"class":514},[504,7299,1105],{"class":518},[504,7301,538],{"class":514},[504,7303,7304],{"class":506,"line":2433},[504,7305,567],{"emptyLinePlaceholder":206},[504,7307,7308,7310,7312,7314,7317,7319,7321],{"class":506,"line":2452},[504,7309,7202],{"class":583},[504,7311,857],{"class":518},[504,7313,535],{"class":514},[504,7315,7316],{"class":531},"body",[504,7318,535],{"class":514},[504,7320,703],{"class":514},[504,7322,601],{"class":514},[504,7324,7325,7327,7329,7331,7333],{"class":506,"line":2470},[504,7326,607],{"class":1045},[504,7328,685],{"class":514},[504,7330,6947],{"class":583},[504,7332,7226],{"class":518},[504,7334,610],{"class":514},[504,7336,7337,7339,7341,7343,7346],{"class":506,"line":2488},[504,7338,3258],{"class":1045},[504,7340,685],{"class":514},[504,7342,6947],{"class":583},[504,7344,7345],{"class":518},"(fontWeightNormal)",[504,7347,610],{"class":514},[504,7349,7350,7352,7354,7356,7358],{"class":506,"line":2513},[504,7351,4277],{"class":1045},[504,7353,685],{"class":514},[504,7355,6947],{"class":583},[504,7357,7265],{"class":518},[504,7359,610],{"class":514},[504,7361,7362,7364,7366,7368,7371],{"class":506,"line":2537},[504,7363,5262],{"class":1045},[504,7365,685],{"class":514},[504,7367,6947],{"class":583},[504,7369,7370],{"class":518},"(lineHeightNormal)",[504,7372,610],{"class":514},[504,7374,7375,7377,7379],{"class":506,"line":2561},[504,7376,640],{"class":514},[504,7378,1105],{"class":518},[504,7380,538],{"class":514},[504,7382,7383],{"class":506,"line":2570},[504,7384,567],{"emptyLinePlaceholder":206},[504,7386,7387,7389,7391,7393,7396,7398,7400],{"class":506,"line":2575},[504,7388,7202],{"class":583},[504,7390,857],{"class":518},[504,7392,535],{"class":514},[504,7394,7395],{"class":531},"em, i",[504,7397,535],{"class":514},[504,7399,703],{"class":514},[504,7401,601],{"class":514},[504,7403,7405,7407,7409,7411,7414],{"class":506,"line":7404},37,[504,7406,4277],{"class":1045},[504,7408,685],{"class":514},[504,7410,6947],{"class":583},[504,7412,7413],{"class":518},"(fontStyleItalic)",[504,7415,610],{"class":514},[504,7417,7419,7421,7423],{"class":506,"line":7418},38,[504,7420,640],{"class":514},[504,7422,1105],{"class":518},[504,7424,538],{"class":514},[504,7426,7428],{"class":506,"line":7427},39,[504,7429,567],{"emptyLinePlaceholder":206},[504,7431,7433,7435,7437,7439,7441,7443,7445],{"class":506,"line":7432},40,[504,7434,7202],{"class":583},[504,7436,857],{"class":518},[504,7438,535],{"class":514},[504,7440,467],{"class":531},[504,7442,535],{"class":514},[504,7444,703],{"class":514},[504,7446,601],{"class":514},[504,7448,7450,7452,7454,7456,7459],{"class":506,"line":7449},41,[504,7451,607],{"class":1045},[504,7453,685],{"class":514},[504,7455,6947],{"class":583},[504,7457,7458],{"class":518},"(fontFamilyMono)",[504,7460,610],{"class":514},[504,7462,7464,7466,7468,7470,7473],{"class":506,"line":7463},42,[504,7465,1746],{"class":1045},[504,7467,685],{"class":514},[504,7469,6947],{"class":583},[504,7471,7472],{"class":518},"(fontSizeXl)",[504,7474,610],{"class":514},[504,7476,7478,7480,7482,7484,7487],{"class":506,"line":7477},43,[504,7479,6065],{"class":1045},[504,7481,685],{"class":514},[504,7483,6947],{"class":583},[504,7485,7486],{"class":518},"(letterSpacingWide)",[504,7488,610],{"class":514},[504,7490,7492,7494,7496],{"class":506,"line":7491},44,[504,7493,640],{"class":514},[504,7495,1105],{"class":518},[504,7497,538],{"class":514},[504,7499,7501],{"class":506,"line":7500},45,[504,7502,567],{"emptyLinePlaceholder":206},[504,7504,7506,7508,7510,7512],{"class":506,"line":7505},46,[504,7507,661],{"class":510},[504,7509,664],{"class":510},[504,7511,667],{"class":518},[504,7513,538],{"class":514},[489,7515,7516],{"icon":140,"label":672},[494,7517,7519],{"className":675,"code":7518,"filename":677,"language":678,"meta":500,"style":500},":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",[467,7520,7521,7529,7579,7613,7659,7673,7683,7693,7704,7714,7724,7734,7744,7754,7764,7774,7784,7794,7804,7814,7828,7838,7848,7858,7868,7878,7888,7898,7902,7906,7913,7929,7945,7961,7976,7992,8008,8012,8016,8022,8036,8050,8064,8078,8082,8086,8097,8112,8117,8122,8129,8145,8161,8177],{"__ignoreMap":500},[504,7522,7523,7525,7527],{"class":506,"line":507},[504,7524,685],{"class":514},[504,7526,688],{"class":573},[504,7528,601],{"class":514},[504,7530,7531,7533,7535,7537,7539,7541,7543,7545,7547,7549,7551,7553,7555,7557,7559,7561,7563,7565,7567,7569,7571,7573,7575,7577],{"class":506,"line":541},[504,7532,695],{"class":518},[504,7534,685],{"class":514},[504,7536,700],{"class":518},[504,7538,703],{"class":514},[504,7540,706],{"class":518},[504,7542,703],{"class":514},[504,7544,528],{"class":514},[504,7546,713],{"class":531},[504,7548,535],{"class":514},[504,7550,703],{"class":514},[504,7552,720],{"class":518},[504,7554,703],{"class":514},[504,7556,725],{"class":518},[504,7558,703],{"class":514},[504,7560,730],{"class":518},[504,7562,703],{"class":514},[504,7564,735],{"class":518},[504,7566,703],{"class":514},[504,7568,528],{"class":514},[504,7570,742],{"class":531},[504,7572,535],{"class":514},[504,7574,703],{"class":514},[504,7576,749],{"class":518},[504,7578,538],{"class":514},[504,7580,7581,7583,7585,7587,7589,7591,7593,7595,7597,7599,7601,7603,7605,7607,7609,7611],{"class":506,"line":564},[504,7582,756],{"class":518},[504,7584,685],{"class":514},[504,7586,528],{"class":514},[504,7588,763],{"class":531},[504,7590,535],{"class":514},[504,7592,703],{"class":514},[504,7594,528],{"class":514},[504,7596,772],{"class":531},[504,7598,535],{"class":514},[504,7600,703],{"class":514},[504,7602,528],{"class":514},[504,7604,781],{"class":531},[504,7606,535],{"class":514},[504,7608,703],{"class":514},[504,7610,788],{"class":518},[504,7612,538],{"class":514},[504,7614,7615,7617,7619,7621,7623,7625,7627,7629,7631,7633,7635,7637,7639,7641,7643,7645,7647,7649,7651,7653,7655,7657],{"class":506,"line":570},[504,7616,795],{"class":518},[504,7618,685],{"class":514},[504,7620,528],{"class":514},[504,7622,802],{"class":531},[504,7624,535],{"class":514},[504,7626,703],{"class":514},[504,7628,809],{"class":518},[504,7630,703],{"class":514},[504,7632,814],{"class":518},[504,7634,703],{"class":514},[504,7636,819],{"class":518},[504,7638,703],{"class":514},[504,7640,528],{"class":514},[504,7642,826],{"class":531},[504,7644,535],{"class":514},[504,7646,703],{"class":514},[504,7648,528],{"class":514},[504,7650,835],{"class":531},[504,7652,535],{"class":514},[504,7654,703],{"class":514},[504,7656,842],{"class":518},[504,7658,538],{"class":514},[504,7660,7661,7663,7665,7667,7669,7671],{"class":506,"line":591},[504,7662,849],{"class":518},[504,7664,685],{"class":514},[504,7666,854],{"class":583},[504,7668,857],{"class":514},[504,7670,860],{"class":518},[504,7672,863],{"class":514},[504,7674,7675,7677,7679,7681],{"class":506,"line":596},[504,7676,2002],{"class":518},[504,7678,685],{"class":514},[504,7680,1995],{"class":1947},[504,7682,538],{"class":514},[504,7684,7685,7687,7689,7691],{"class":506,"line":604},[504,7686,3051],{"class":518},[504,7688,685],{"class":514},[504,7690,2007],{"class":1947},[504,7692,538],{"class":514},[504,7694,7695,7697,7699,7702],{"class":506,"line":613},[504,7696,3081],{"class":518},[504,7698,685],{"class":514},[504,7700,7701],{"class":1947}," 2rem",[504,7703,538],{"class":514},[504,7705,7706,7708,7710,7712],{"class":506,"line":621},[504,7707,3376],{"class":518},[504,7709,685],{"class":514},[504,7711,3381],{"class":1947},[504,7713,538],{"class":514},[504,7715,7716,7718,7720,7722],{"class":506,"line":629},[504,7717,3388],{"class":518},[504,7719,685],{"class":514},[504,7721,3393],{"class":1947},[504,7723,538],{"class":514},[504,7725,7726,7728,7730,7732],{"class":506,"line":637},[504,7727,3400],{"class":518},[504,7729,685],{"class":514},[504,7731,3405],{"class":518},[504,7733,538],{"class":514},[504,7735,7736,7738,7740,7742],{"class":506,"line":653},[504,7737,3412],{"class":518},[504,7739,685],{"class":514},[504,7741,3417],{"class":1947},[504,7743,538],{"class":514},[504,7745,7746,7748,7750,7752],{"class":506,"line":658},[504,7747,3424],{"class":518},[504,7749,685],{"class":514},[504,7751,3429],{"class":1947},[504,7753,538],{"class":514},[504,7755,7756,7758,7760,7762],{"class":506,"line":1094},[504,7757,3436],{"class":518},[504,7759,685],{"class":514},[504,7761,3441],{"class":518},[504,7763,538],{"class":514},[504,7765,7766,7768,7770,7772],{"class":506,"line":1110},[504,7767,3448],{"class":518},[504,7769,685],{"class":514},[504,7771,3453],{"class":1947},[504,7773,538],{"class":514},[504,7775,7776,7778,7780,7782],{"class":506,"line":1115},[504,7777,4353],{"class":518},[504,7779,685],{"class":514},[504,7781,4358],{"class":518},[504,7783,538],{"class":514},[504,7785,7786,7788,7790,7792],{"class":506,"line":1452},[504,7787,4365],{"class":518},[504,7789,685],{"class":514},[504,7791,4370],{"class":518},[504,7793,538],{"class":514},[504,7795,7796,7798,7800,7802],{"class":506,"line":1862},[504,7797,4377],{"class":518},[504,7799,685],{"class":514},[504,7801,3405],{"class":518},[504,7803,538],{"class":514},[504,7805,7806,7808,7810,7812],{"class":506,"line":1879},[504,7807,4388],{"class":518},[504,7809,685],{"class":514},[504,7811,3489],{"class":518},[504,7813,538],{"class":514},[504,7815,7816,7818,7820,7822,7824,7826],{"class":506,"line":1896},[504,7817,4399],{"class":518},[504,7819,685],{"class":514},[504,7821,854],{"class":583},[504,7823,857],{"class":514},[504,7825,4408],{"class":518},[504,7827,863],{"class":514},[504,7829,7830,7832,7834,7836],{"class":506,"line":1909},[504,7831,5345],{"class":518},[504,7833,685],{"class":514},[504,7835,5350],{"class":1947},[504,7837,538],{"class":514},[504,7839,7840,7842,7844,7846],{"class":506,"line":1914},[504,7841,5357],{"class":518},[504,7843,685],{"class":514},[504,7845,5362],{"class":1947},[504,7847,538],{"class":514},[504,7849,7850,7852,7854,7856],{"class":506,"line":2355},[504,7851,5369],{"class":518},[504,7853,685],{"class":514},[504,7855,5374],{"class":1947},[504,7857,538],{"class":514},[504,7859,7860,7862,7864,7866],{"class":506,"line":2363},[504,7861,5381],{"class":518},[504,7863,685],{"class":514},[504,7865,5386],{"class":1947},[504,7867,538],{"class":514},[504,7869,7870,7872,7874,7876],{"class":506,"line":2371},[504,7871,5393],{"class":518},[504,7873,685],{"class":514},[504,7875,5398],{"class":1947},[504,7877,538],{"class":514},[504,7879,7880,7882,7884,7886],{"class":506,"line":2391},[504,7881,6160],{"class":518},[504,7883,685],{"class":514},[504,7885,6165],{"class":1947},[504,7887,538],{"class":514},[504,7889,7890,7892,7894,7896],{"class":506,"line":2413},[504,7891,6183],{"class":518},[504,7893,685],{"class":514},[504,7895,6188],{"class":1947},[504,7897,538],{"class":514},[504,7899,7900],{"class":506,"line":2433},[504,7901,868],{"class":514},[504,7903,7904],{"class":506,"line":2452},[504,7905,567],{"emptyLinePlaceholder":206},[504,7907,7908,7911],{"class":506,"line":2470},[504,7909,7209],{"class":7910},"sBMFI",[504,7912,601],{"class":514},[504,7914,7915,7919,7921,7923,7925,7927],{"class":506,"line":2488},[504,7916,7918],{"class":7917},"sqsOY","    font-family",[504,7920,685],{"class":514},[504,7922,854],{"class":583},[504,7924,857],{"class":514},[504,7926,921],{"class":518},[504,7928,863],{"class":514},[504,7930,7931,7934,7936,7938,7940,7943],{"class":506,"line":2513},[504,7932,7933],{"class":7917},"    font-size",[504,7935,685],{"class":514},[504,7937,854],{"class":583},[504,7939,857],{"class":514},[504,7941,7942],{"class":518},"--font-size--3xl",[504,7944,863],{"class":514},[504,7946,7947,7950,7952,7954,7956,7959],{"class":506,"line":2537},[504,7948,7949],{"class":7917},"    font-weight",[504,7951,685],{"class":514},[504,7953,854],{"class":583},[504,7955,857],{"class":514},[504,7957,7958],{"class":518},"--font-weight--bold",[504,7960,863],{"class":514},[504,7962,7963,7966,7968,7970,7972,7974],{"class":506,"line":2561},[504,7964,7965],{"class":7917},"    font-style",[504,7967,685],{"class":514},[504,7969,854],{"class":583},[504,7971,857],{"class":514},[504,7973,4408],{"class":518},[504,7975,863],{"class":514},[504,7977,7978,7981,7983,7985,7987,7990],{"class":506,"line":2570},[504,7979,7980],{"class":7917},"    line-height",[504,7982,685],{"class":514},[504,7984,854],{"class":583},[504,7986,857],{"class":514},[504,7988,7989],{"class":518},"--line-height--tight",[504,7991,863],{"class":514},[504,7993,7994,7997,7999,8001,8003,8006],{"class":506,"line":2575},[504,7995,7996],{"class":7917},"    letter-spacing",[504,7998,685],{"class":514},[504,8000,854],{"class":583},[504,8002,857],{"class":514},[504,8004,8005],{"class":518},"--letter-spacing--tight",[504,8007,863],{"class":514},[504,8009,8010],{"class":506,"line":7404},[504,8011,868],{"class":514},[504,8013,8014],{"class":506,"line":7418},[504,8015,567],{"emptyLinePlaceholder":206},[504,8017,8018,8020],{"class":506,"line":7427},[504,8019,7316],{"class":7910},[504,8021,601],{"class":514},[504,8023,8024,8026,8028,8030,8032,8034],{"class":506,"line":7432},[504,8025,7918],{"class":7917},[504,8027,685],{"class":514},[504,8029,854],{"class":583},[504,8031,857],{"class":514},[504,8033,921],{"class":518},[504,8035,863],{"class":514},[504,8037,8038,8040,8042,8044,8046,8048],{"class":506,"line":7449},[504,8039,7949],{"class":7917},[504,8041,685],{"class":514},[504,8043,854],{"class":583},[504,8045,857],{"class":514},[504,8047,3505],{"class":518},[504,8049,863],{"class":514},[504,8051,8052,8054,8056,8058,8060,8062],{"class":506,"line":7463},[504,8053,7965],{"class":7917},[504,8055,685],{"class":514},[504,8057,854],{"class":583},[504,8059,857],{"class":514},[504,8061,4408],{"class":518},[504,8063,863],{"class":514},[504,8065,8066,8068,8070,8072,8074,8076],{"class":506,"line":7477},[504,8067,7980],{"class":7917},[504,8069,685],{"class":514},[504,8071,854],{"class":583},[504,8073,857],{"class":514},[504,8075,5414],{"class":518},[504,8077,863],{"class":514},[504,8079,8080],{"class":506,"line":7491},[504,8081,868],{"class":514},[504,8083,8084],{"class":506,"line":7500},[504,8085,567],{"emptyLinePlaceholder":206},[504,8087,8088,8090,8092,8095],{"class":506,"line":7505},[504,8089,6282],{"class":7910},[504,8091,703],{"class":514},[504,8093,8094],{"class":7910}," i",[504,8096,601],{"class":514},[504,8098,8100,8102,8104,8106,8108,8110],{"class":506,"line":8099},47,[504,8101,7965],{"class":7917},[504,8103,685],{"class":514},[504,8105,854],{"class":583},[504,8107,857],{"class":514},[504,8109,4933],{"class":518},[504,8111,863],{"class":514},[504,8113,8115],{"class":506,"line":8114},48,[504,8116,868],{"class":514},[504,8118,8120],{"class":506,"line":8119},49,[504,8121,567],{"emptyLinePlaceholder":206},[504,8123,8125,8127],{"class":506,"line":8124},50,[504,8126,467],{"class":7910},[504,8128,601],{"class":514},[504,8130,8132,8134,8136,8138,8140,8143],{"class":506,"line":8131},51,[504,8133,7918],{"class":7917},[504,8135,685],{"class":514},[504,8137,854],{"class":583},[504,8139,857],{"class":514},[504,8141,8142],{"class":518},"--font-family--mono",[504,8144,863],{"class":514},[504,8146,8148,8150,8152,8154,8156,8159],{"class":506,"line":8147},52,[504,8149,7933],{"class":7917},[504,8151,685],{"class":514},[504,8153,854],{"class":583},[504,8155,857],{"class":514},[504,8157,8158],{"class":518},"--font-size--xl",[504,8160,863],{"class":514},[504,8162,8164,8166,8168,8170,8172,8175],{"class":506,"line":8163},53,[504,8165,7996],{"class":7917},[504,8167,685],{"class":514},[504,8169,854],{"class":583},[504,8171,857],{"class":514},[504,8173,8174],{"class":518},"--letter-spacing--wide",[504,8176,863],{"class":514},[504,8178,8180],{"class":506,"line":8179},54,[504,8181,868],{"class":514},[414,8183,8185],{"id":8184},"examples","Examples",[478,8187,8189],{"id":8188},"complete-typography-system","Complete Typography System",[418,8191,8192],{},"Here's a comprehensive example showing a full typography system with all composables working together:",[486,8194,8195,9662],{},[489,8196,8197],{"icon":491,"label":492},[494,8198,8200],{"className":496,"code":8199,"filename":498,"language":499,"meta":500,"style":500},"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/theme';\n\nconst s = styleframe();\nconst { ref, selector } = s;\n\n// 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// 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// Font weights\nconst { fontWeightNormal, fontWeightMedium, fontWeightSemibold, fontWeightBold } = useFontWeightDesignTokens(s);\n\n// Font styles\nconst { fontStyleNormal, fontStyleItalic } = useFontStyleDesignTokens(s);\n\n// Line heights\nconst { lineHeightTight, lineHeightNormal, lineHeightRelaxed } = useLineHeightDesignTokens(s);\n\n// Letter spacing\nconst { letterSpacingTight, letterSpacingNormal, letterSpacingWide } = useLetterSpacingDesignTokens(s);\n\n// 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",[467,8201,8202,8222,8231,8238,8245,8252,8259,8266,8273,8280,8287,8292,8306,8310,8324,8344,8348,8353,8383,8398,8413,8428,8440,8444,8449,8491,8527,8581,8585,8591,8597,8603,8609,8615,8621,8627,8633,8651,8667,8683,8697,8711,8725,8743,8761,8769,8773,8778,8809,8813,8818,8840,8844,8849,8877,8882,8888,8916,8921,8926,8943,8956,8970,8983,8996,9010,9019,9024,9041,9055,9068,9081,9094,9107,9116,9121,9138,9151,9165,9178,9191,9204,9213,9218,9235,9248,9261,9275,9288,9297,9302,9319,9332,9346,9355,9360,9378,9392,9405,9414,9419,9436,9449,9462,9475,9484,9489,9507,9521,9535,9548,9557,9562,9580,9594,9607,9624,9637,9646,9651],{"__ignoreMap":500},[504,8203,8204,8206,8208,8210,8212,8214,8216,8218,8220],{"class":506,"line":507},[504,8205,511],{"class":510},[504,8207,515],{"class":514},[504,8209,519],{"class":518},[504,8211,522],{"class":514},[504,8213,525],{"class":510},[504,8215,528],{"class":514},[504,8217,532],{"class":531},[504,8219,535],{"class":514},[504,8221,538],{"class":514},[504,8223,8224,8226,8228],{"class":506,"line":541},[504,8225,511],{"class":510},[504,8227,515],{"class":514},[504,8229,8230],{"class":1045}," \n",[504,8232,8233,8236],{"class":506,"line":564},[504,8234,8235],{"class":518},"    useFontFamilyDesignTokens",[504,8237,610],{"class":514},[504,8239,8240,8243],{"class":506,"line":570},[504,8241,8242],{"class":518},"    useFontSizeDesignTokens",[504,8244,610],{"class":514},[504,8246,8247,8250],{"class":506,"line":591},[504,8248,8249],{"class":518},"    useFontWeightDesignTokens",[504,8251,610],{"class":514},[504,8253,8254,8257],{"class":506,"line":596},[504,8255,8256],{"class":518},"    useLineHeightDesignTokens",[504,8258,610],{"class":514},[504,8260,8261,8264],{"class":506,"line":604},[504,8262,8263],{"class":518},"    useLetterSpacingDesignTokens",[504,8265,610],{"class":514},[504,8267,8268,8271],{"class":506,"line":613},[504,8269,8270],{"class":518},"    useScaleDesignTokens",[504,8272,610],{"class":514},[504,8274,8275,8278],{"class":506,"line":621},[504,8276,8277],{"class":518},"    useScalePowersDesignTokens",[504,8279,610],{"class":514},[504,8281,8282,8285],{"class":506,"line":629},[504,8283,8284],{"class":518},"    useMultiplierDesignTokens",[504,8286,610],{"class":514},[504,8288,8289],{"class":506,"line":637},[504,8290,8291],{"class":518},"    defaultScaleValues\n",[504,8293,8294,8296,8298,8300,8302,8304],{"class":506,"line":653},[504,8295,640],{"class":514},[504,8297,525],{"class":510},[504,8299,528],{"class":514},[504,8301,557],{"class":531},[504,8303,535],{"class":514},[504,8305,538],{"class":514},[504,8307,8308],{"class":506,"line":658},[504,8309,567],{"emptyLinePlaceholder":206},[504,8311,8312,8314,8316,8318,8320,8322],{"class":506,"line":1094},[504,8313,574],{"class":573},[504,8315,577],{"class":518},[504,8317,580],{"class":514},[504,8319,519],{"class":583},[504,8321,586],{"class":518},[504,8323,538],{"class":514},[504,8325,8326,8328,8330,8332,8334,8336,8338,8340,8342],{"class":506,"line":1110},[504,8327,574],{"class":573},[504,8329,515],{"class":514},[504,8331,6947],{"class":518},[504,8333,703],{"class":514},[504,8335,6952],{"class":518},[504,8337,640],{"class":514},[504,8339,643],{"class":514},[504,8341,667],{"class":518},[504,8343,538],{"class":514},[504,8345,8346],{"class":506,"line":1115},[504,8347,567],{"emptyLinePlaceholder":206},[504,8349,8350],{"class":506,"line":1452},[504,8351,8352],{"class":2126},"// Font families\n",[504,8354,8355,8357,8359,8361,8363,8366,8368,8371,8373,8375,8377,8379,8381],{"class":506,"line":1862},[504,8356,574],{"class":573},[504,8358,515],{"class":514},[504,8360,6978],{"class":518},[504,8362,703],{"class":514},[504,8364,8365],{"class":518}," fontFamilyMono",[504,8367,703],{"class":514},[504,8369,8370],{"class":518}," fontFamilyDisplay ",[504,8372,640],{"class":514},[504,8374,643],{"class":514},[504,8376,548],{"class":583},[504,8378,1036],{"class":518},[504,8380,703],{"class":514},[504,8382,601],{"class":514},[504,8384,8385,8387,8389,8391,8394,8396],{"class":506,"line":1879},[504,8386,1046],{"class":1045},[504,8388,685],{"class":514},[504,8390,1051],{"class":514},[504,8392,8393],{"class":531},"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",[504,8395,1057],{"class":514},[504,8397,610],{"class":514},[504,8399,8400,8402,8404,8406,8409,8411],{"class":506,"line":1896},[504,8401,1064],{"class":1045},[504,8403,685],{"class":514},[504,8405,1051],{"class":514},[504,8407,8408],{"class":531},"'JetBrains Mono', 'Fira Code', monospace",[504,8410,1057],{"class":514},[504,8412,610],{"class":514},[504,8414,8415,8417,8419,8421,8424,8426],{"class":506,"line":1909},[504,8416,1422],{"class":1045},[504,8418,685],{"class":514},[504,8420,1051],{"class":514},[504,8422,8423],{"class":531},"'Inter', sans-serif",[504,8425,1057],{"class":514},[504,8427,610],{"class":514},[504,8429,8430,8432,8434,8436,8438],{"class":506,"line":1914},[504,8431,640],{"class":514},[504,8433,1099],{"class":510},[504,8435,1102],{"class":573},[504,8437,1105],{"class":518},[504,8439,538],{"class":514},[504,8441,8442],{"class":506,"line":2355},[504,8443,567],{"emptyLinePlaceholder":206},[504,8445,8446],{"class":506,"line":2363},[504,8447,8448],{"class":2126},"// Font size with scale\n",[504,8450,8451,8453,8455,8457,8459,8461,8463,8465,8467,8469,8471,8473,8475,8477,8479,8481,8483,8485,8487,8489],{"class":506,"line":2371},[504,8452,574],{"class":573},[504,8454,515],{"class":514},[504,8456,2136],{"class":518},[504,8458,640],{"class":514},[504,8460,643],{"class":514},[504,8462,2068],{"class":583},[504,8464,1036],{"class":518},[504,8466,703],{"class":514},[504,8468,515],{"class":514},[504,8470,2151],{"class":514},[504,8472,2154],{"class":518},[504,8474,703],{"class":514},[504,8476,664],{"class":1045},[504,8478,685],{"class":514},[504,8480,528],{"class":514},[504,8482,2165],{"class":531},[504,8484,535],{"class":514},[504,8486,522],{"class":514},[504,8488,1105],{"class":518},[504,8490,538],{"class":514},[504,8492,8493,8495,8497,8499,8501,8503,8505,8507,8509,8511,8513,8515,8517,8519,8521,8523,8525],{"class":506,"line":2391},[504,8494,574],{"class":573},[504,8496,515],{"class":514},[504,8498,2191],{"class":518},[504,8500,640],{"class":514},[504,8502,643],{"class":514},[504,8504,1701],{"class":583},[504,8506,1036],{"class":518},[504,8508,703],{"class":514},[504,8510,515],{"class":514},[504,8512,664],{"class":1045},[504,8514,685],{"class":514},[504,8516,528],{"class":514},[504,8518,1808],{"class":531},[504,8520,535],{"class":514},[504,8522,522],{"class":514},[504,8524,1105],{"class":518},[504,8526,538],{"class":514},[504,8528,8529,8531,8533,8535,8537,8539,8541,8543,8545,8547,8549,8551,8553,8555,8557,8559,8561,8563,8565,8567,8569,8571,8573,8575,8577,8579],{"class":506,"line":2413},[504,8530,574],{"class":573},[504,8532,2235],{"class":518},[504,8534,580],{"class":514},[504,8536,2073],{"class":583},[504,8538,1036],{"class":518},[504,8540,703],{"class":514},[504,8542,2246],{"class":518},[504,8544,703],{"class":514},[504,8546,2251],{"class":518},[504,8548,2254],{"class":514},[504,8550,2257],{"class":1947},[504,8552,703],{"class":514},[504,8554,2262],{"class":514},[504,8556,2265],{"class":1947},[504,8558,703],{"class":514},[504,8560,2270],{"class":1947},[504,8562,703],{"class":514},[504,8564,2275],{"class":1947},[504,8566,703],{"class":514},[504,8568,2280],{"class":1947},[504,8570,703],{"class":514},[504,8572,2285],{"class":1947},[504,8574,703],{"class":514},[504,8576,2290],{"class":1947},[504,8578,2298],{"class":518},[504,8580,538],{"class":514},[504,8582,8583],{"class":506,"line":2433},[504,8584,567],{"emptyLinePlaceholder":206},[504,8586,8587,8589],{"class":506,"line":2452},[504,8588,574],{"class":573},[504,8590,601],{"class":514},[504,8592,8593,8595],{"class":506,"line":2470},[504,8594,1753],{"class":518},[504,8596,610],{"class":514},[504,8598,8599,8601],{"class":506,"line":2488},[504,8600,1760],{"class":518},[504,8602,610],{"class":514},[504,8604,8605,8607],{"class":506,"line":2513},[504,8606,1767],{"class":518},[504,8608,610],{"class":514},[504,8610,8611,8613],{"class":506,"line":2537},[504,8612,1774],{"class":518},[504,8614,610],{"class":514},[504,8616,8617,8619],{"class":506,"line":2561},[504,8618,1781],{"class":518},[504,8620,610],{"class":514},[504,8622,8623,8625],{"class":506,"line":2570},[504,8624,2350],{"class":518},[504,8626,610],{"class":514},[504,8628,8629,8631],{"class":506,"line":2575},[504,8630,2358],{"class":518},[504,8632,610],{"class":514},[504,8634,8635,8637,8639,8641,8643,8645,8647,8649],{"class":506,"line":7404},[504,8636,640],{"class":514},[504,8638,643],{"class":514},[504,8640,2078],{"class":583},[504,8642,1036],{"class":518},[504,8644,703],{"class":514},[504,8646,2384],{"class":518},[504,8648,703],{"class":514},[504,8650,601],{"class":514},[504,8652,8653,8655,8657,8659,8661,8663,8665],{"class":506,"line":7418},[504,8654,1817],{"class":1045},[504,8656,685],{"class":514},[504,8658,2398],{"class":518},[504,8660,2254],{"class":514},[504,8662,2257],{"class":1947},[504,8664,2405],{"class":518},[504,8666,610],{"class":514},[504,8668,8669,8671,8673,8675,8677,8679,8681],{"class":506,"line":7427},[504,8670,1833],{"class":1045},[504,8672,685],{"class":514},[504,8674,2398],{"class":518},[504,8676,2254],{"class":514},[504,8678,2265],{"class":1947},[504,8680,2405],{"class":518},[504,8682,610],{"class":514},[504,8684,8685,8687,8689,8691,8693,8695],{"class":506,"line":7432},[504,8686,1849],{"class":1045},[504,8688,685],{"class":514},[504,8690,2398],{"class":518},[504,8692,2442],{"class":1947},[504,8694,2405],{"class":518},[504,8696,610],{"class":514},[504,8698,8699,8701,8703,8705,8707,8709],{"class":506,"line":7449},[504,8700,1865],{"class":1045},[504,8702,685],{"class":514},[504,8704,2398],{"class":518},[504,8706,2265],{"class":1947},[504,8708,2405],{"class":518},[504,8710,610],{"class":514},[504,8712,8713,8715,8717,8719,8721,8723],{"class":506,"line":7463},[504,8714,1882],{"class":1045},[504,8716,685],{"class":514},[504,8718,2398],{"class":518},[504,8720,2257],{"class":1947},[504,8722,2405],{"class":518},[504,8724,610],{"class":514},[504,8726,8727,8729,8731,8733,8735,8737,8739,8741],{"class":506,"line":7477},[504,8728,2491],{"class":514},[504,8730,2494],{"class":1045},[504,8732,535],{"class":514},[504,8734,685],{"class":514},[504,8736,2398],{"class":518},[504,8738,2503],{"class":1947},[504,8740,2405],{"class":518},[504,8742,610],{"class":514},[504,8744,8745,8747,8749,8751,8753,8755,8757,8759],{"class":506,"line":7491},[504,8746,2491],{"class":514},[504,8748,2518],{"class":1045},[504,8750,535],{"class":514},[504,8752,685],{"class":514},[504,8754,2398],{"class":518},[504,8756,2527],{"class":1947},[504,8758,2405],{"class":518},[504,8760,610],{"class":514},[504,8762,8763,8765,8767],{"class":506,"line":7500},[504,8764,640],{"class":514},[504,8766,1105],{"class":518},[504,8768,538],{"class":514},[504,8770,8771],{"class":506,"line":7505},[504,8772,567],{"emptyLinePlaceholder":206},[504,8774,8775],{"class":506,"line":8099},[504,8776,8777],{"class":2126},"// Font weights\n",[504,8779,8780,8782,8784,8786,8788,8791,8793,8795,8797,8799,8801,8803,8805,8807],{"class":506,"line":8114},[504,8781,574],{"class":573},[504,8783,515],{"class":514},[504,8785,7096],{"class":518},[504,8787,703],{"class":514},[504,8789,8790],{"class":518}," fontWeightMedium",[504,8792,703],{"class":514},[504,8794,7101],{"class":518},[504,8796,703],{"class":514},[504,8798,7106],{"class":518},[504,8800,640],{"class":514},[504,8802,643],{"class":514},[504,8804,3213],{"class":583},[504,8806,648],{"class":518},[504,8808,538],{"class":514},[504,8810,8811],{"class":506,"line":8119},[504,8812,567],{"emptyLinePlaceholder":206},[504,8814,8815],{"class":506,"line":8124},[504,8816,8817],{"class":2126},"// Font styles\n",[504,8819,8820,8822,8824,8826,8828,8830,8832,8834,8836,8838],{"class":506,"line":8131},[504,8821,574],{"class":573},[504,8823,515],{"class":514},[504,8825,7125],{"class":518},[504,8827,703],{"class":514},[504,8829,7130],{"class":518},[504,8831,640],{"class":514},[504,8833,643],{"class":514},[504,8835,4232],{"class":583},[504,8837,648],{"class":518},[504,8839,538],{"class":514},[504,8841,8842],{"class":506,"line":8147},[504,8843,567],{"emptyLinePlaceholder":206},[504,8845,8846],{"class":506,"line":8163},[504,8847,8848],{"class":2126},"// Line heights\n",[504,8850,8851,8853,8855,8857,8859,8862,8864,8867,8869,8871,8873,8875],{"class":506,"line":8179},[504,8852,574],{"class":573},[504,8854,515],{"class":514},[504,8856,7149],{"class":518},[504,8858,703],{"class":514},[504,8860,8861],{"class":518}," lineHeightNormal",[504,8863,703],{"class":514},[504,8865,8866],{"class":518}," lineHeightRelaxed ",[504,8868,640],{"class":514},[504,8870,643],{"class":514},[504,8872,5217],{"class":583},[504,8874,648],{"class":518},[504,8876,538],{"class":514},[504,8878,8880],{"class":506,"line":8879},55,[504,8881,567],{"emptyLinePlaceholder":206},[504,8883,8885],{"class":506,"line":8884},56,[504,8886,8887],{"class":2126},"// Letter spacing\n",[504,8889,8891,8893,8895,8897,8899,8902,8904,8906,8908,8910,8912,8914],{"class":506,"line":8890},57,[504,8892,574],{"class":573},[504,8894,515],{"class":514},[504,8896,7173],{"class":518},[504,8898,703],{"class":514},[504,8900,8901],{"class":518}," letterSpacingNormal",[504,8903,703],{"class":514},[504,8905,7178],{"class":518},[504,8907,640],{"class":514},[504,8909,643],{"class":514},[504,8911,6020],{"class":583},[504,8913,648],{"class":518},[504,8915,538],{"class":514},[504,8917,8919],{"class":506,"line":8918},58,[504,8920,567],{"emptyLinePlaceholder":206},[504,8922,8924],{"class":506,"line":8923},59,[504,8925,7197],{"class":2126},[504,8927,8929,8931,8933,8935,8937,8939,8941],{"class":506,"line":8928},60,[504,8930,7202],{"class":583},[504,8932,857],{"class":518},[504,8934,535],{"class":514},[504,8936,7316],{"class":531},[504,8938,535],{"class":514},[504,8940,703],{"class":514},[504,8942,601],{"class":514},[504,8944,8946,8948,8950,8952,8954],{"class":506,"line":8945},61,[504,8947,607],{"class":1045},[504,8949,685],{"class":514},[504,8951,6947],{"class":583},[504,8953,7226],{"class":518},[504,8955,610],{"class":514},[504,8957,8959,8961,8963,8965,8968],{"class":506,"line":8958},62,[504,8960,1746],{"class":1045},[504,8962,685],{"class":514},[504,8964,6947],{"class":583},[504,8966,8967],{"class":518},"(fontSizeMd)",[504,8969,610],{"class":514},[504,8971,8973,8975,8977,8979,8981],{"class":506,"line":8972},63,[504,8974,3258],{"class":1045},[504,8976,685],{"class":514},[504,8978,6947],{"class":583},[504,8980,7345],{"class":518},[504,8982,610],{"class":514},[504,8984,8986,8988,8990,8992,8994],{"class":506,"line":8985},64,[504,8987,5262],{"class":1045},[504,8989,685],{"class":514},[504,8991,6947],{"class":583},[504,8993,7370],{"class":518},[504,8995,610],{"class":514},[504,8997,8999,9001,9003,9005,9008],{"class":506,"line":8998},65,[504,9000,6065],{"class":1045},[504,9002,685],{"class":514},[504,9004,6947],{"class":583},[504,9006,9007],{"class":518},"(letterSpacingNormal)",[504,9009,610],{"class":514},[504,9011,9013,9015,9017],{"class":506,"line":9012},66,[504,9014,640],{"class":514},[504,9016,1105],{"class":518},[504,9018,538],{"class":514},[504,9020,9022],{"class":506,"line":9021},67,[504,9023,567],{"emptyLinePlaceholder":206},[504,9025,9027,9029,9031,9033,9035,9037,9039],{"class":506,"line":9026},68,[504,9028,7202],{"class":583},[504,9030,857],{"class":518},[504,9032,535],{"class":514},[504,9034,7209],{"class":531},[504,9036,535],{"class":514},[504,9038,703],{"class":514},[504,9040,601],{"class":514},[504,9042,9044,9046,9048,9050,9053],{"class":506,"line":9043},69,[504,9045,607],{"class":1045},[504,9047,685],{"class":514},[504,9049,6947],{"class":583},[504,9051,9052],{"class":518},"(fontFamilyDisplay)",[504,9054,610],{"class":514},[504,9056,9058,9060,9062,9064,9066],{"class":506,"line":9057},70,[504,9059,1746],{"class":1045},[504,9061,685],{"class":514},[504,9063,6947],{"class":583},[504,9065,7239],{"class":518},[504,9067,610],{"class":514},[504,9069,9071,9073,9075,9077,9079],{"class":506,"line":9070},71,[504,9072,3258],{"class":1045},[504,9074,685],{"class":514},[504,9076,6947],{"class":583},[504,9078,7252],{"class":518},[504,9080,610],{"class":514},[504,9082,9084,9086,9088,9090,9092],{"class":506,"line":9083},72,[504,9085,5262],{"class":1045},[504,9087,685],{"class":514},[504,9089,6947],{"class":583},[504,9091,7278],{"class":518},[504,9093,610],{"class":514},[504,9095,9097,9099,9101,9103,9105],{"class":506,"line":9096},73,[504,9098,6065],{"class":1045},[504,9100,685],{"class":514},[504,9102,6947],{"class":583},[504,9104,7291],{"class":518},[504,9106,610],{"class":514},[504,9108,9110,9112,9114],{"class":506,"line":9109},74,[504,9111,640],{"class":514},[504,9113,1105],{"class":518},[504,9115,538],{"class":514},[504,9117,9119],{"class":506,"line":9118},75,[504,9120,567],{"emptyLinePlaceholder":206},[504,9122,9124,9126,9128,9130,9132,9134,9136],{"class":506,"line":9123},76,[504,9125,7202],{"class":583},[504,9127,857],{"class":518},[504,9129,535],{"class":514},[504,9131,414],{"class":531},[504,9133,535],{"class":514},[504,9135,703],{"class":514},[504,9137,601],{"class":514},[504,9139,9141,9143,9145,9147,9149],{"class":506,"line":9140},77,[504,9142,607],{"class":1045},[504,9144,685],{"class":514},[504,9146,6947],{"class":583},[504,9148,9052],{"class":518},[504,9150,610],{"class":514},[504,9152,9154,9156,9158,9160,9163],{"class":506,"line":9153},78,[504,9155,1746],{"class":1045},[504,9157,685],{"class":514},[504,9159,6947],{"class":583},[504,9161,9162],{"class":518},"(fontSize2xl)",[504,9164,610],{"class":514},[504,9166,9168,9170,9172,9174,9176],{"class":506,"line":9167},79,[504,9169,3258],{"class":1045},[504,9171,685],{"class":514},[504,9173,6947],{"class":583},[504,9175,7252],{"class":518},[504,9177,610],{"class":514},[504,9179,9181,9183,9185,9187,9189],{"class":506,"line":9180},80,[504,9182,5262],{"class":1045},[504,9184,685],{"class":514},[504,9186,6947],{"class":583},[504,9188,7278],{"class":518},[504,9190,610],{"class":514},[504,9192,9194,9196,9198,9200,9202],{"class":506,"line":9193},81,[504,9195,6065],{"class":1045},[504,9197,685],{"class":514},[504,9199,6947],{"class":583},[504,9201,7291],{"class":518},[504,9203,610],{"class":514},[504,9205,9207,9209,9211],{"class":506,"line":9206},82,[504,9208,640],{"class":514},[504,9210,1105],{"class":518},[504,9212,538],{"class":514},[504,9214,9216],{"class":506,"line":9215},83,[504,9217,567],{"emptyLinePlaceholder":206},[504,9219,9221,9223,9225,9227,9229,9231,9233],{"class":506,"line":9220},84,[504,9222,7202],{"class":583},[504,9224,857],{"class":518},[504,9226,535],{"class":514},[504,9228,478],{"class":531},[504,9230,535],{"class":514},[504,9232,703],{"class":514},[504,9234,601],{"class":514},[504,9236,9238,9240,9242,9244,9246],{"class":506,"line":9237},85,[504,9239,607],{"class":1045},[504,9241,685],{"class":514},[504,9243,6947],{"class":583},[504,9245,9052],{"class":518},[504,9247,610],{"class":514},[504,9249,9251,9253,9255,9257,9259],{"class":506,"line":9250},86,[504,9252,1746],{"class":1045},[504,9254,685],{"class":514},[504,9256,6947],{"class":583},[504,9258,7472],{"class":518},[504,9260,610],{"class":514},[504,9262,9264,9266,9268,9270,9273],{"class":506,"line":9263},87,[504,9265,3258],{"class":1045},[504,9267,685],{"class":514},[504,9269,6947],{"class":583},[504,9271,9272],{"class":518},"(fontWeightSemibold)",[504,9274,610],{"class":514},[504,9276,9278,9280,9282,9284,9286],{"class":506,"line":9277},88,[504,9279,5262],{"class":1045},[504,9281,685],{"class":514},[504,9283,6947],{"class":583},[504,9285,7278],{"class":518},[504,9287,610],{"class":514},[504,9289,9291,9293,9295],{"class":506,"line":9290},89,[504,9292,640],{"class":514},[504,9294,1105],{"class":518},[504,9296,538],{"class":514},[504,9298,9300],{"class":506,"line":9299},90,[504,9301,567],{"emptyLinePlaceholder":206},[504,9303,9305,9307,9309,9311,9313,9315,9317],{"class":506,"line":9304},91,[504,9306,7202],{"class":583},[504,9308,857],{"class":518},[504,9310,535],{"class":514},[504,9312,418],{"class":531},[504,9314,535],{"class":514},[504,9316,703],{"class":514},[504,9318,601],{"class":514},[504,9320,9322,9324,9326,9328,9330],{"class":506,"line":9321},92,[504,9323,1746],{"class":1045},[504,9325,685],{"class":514},[504,9327,6947],{"class":583},[504,9329,8967],{"class":518},[504,9331,610],{"class":514},[504,9333,9335,9337,9339,9341,9344],{"class":506,"line":9334},93,[504,9336,5262],{"class":1045},[504,9338,685],{"class":514},[504,9340,6947],{"class":583},[504,9342,9343],{"class":518},"(lineHeightRelaxed)",[504,9345,610],{"class":514},[504,9347,9349,9351,9353],{"class":506,"line":9348},94,[504,9350,640],{"class":514},[504,9352,1105],{"class":518},[504,9354,538],{"class":514},[504,9356,9358],{"class":506,"line":9357},95,[504,9359,567],{"emptyLinePlaceholder":206},[504,9361,9363,9365,9367,9369,9372,9374,9376],{"class":506,"line":9362},96,[504,9364,7202],{"class":583},[504,9366,857],{"class":518},[504,9368,535],{"class":514},[504,9370,9371],{"class":531},"small",[504,9373,535],{"class":514},[504,9375,703],{"class":514},[504,9377,601],{"class":514},[504,9379,9381,9383,9385,9387,9390],{"class":506,"line":9380},97,[504,9382,1746],{"class":1045},[504,9384,685],{"class":514},[504,9386,6947],{"class":583},[504,9388,9389],{"class":518},"(fontSizeSm)",[504,9391,610],{"class":514},[504,9393,9395,9397,9399,9401,9403],{"class":506,"line":9394},98,[504,9396,5262],{"class":1045},[504,9398,685],{"class":514},[504,9400,6947],{"class":583},[504,9402,7370],{"class":518},[504,9404,610],{"class":514},[504,9406,9408,9410,9412],{"class":506,"line":9407},99,[504,9409,640],{"class":514},[504,9411,1105],{"class":518},[504,9413,538],{"class":514},[504,9415,9417],{"class":506,"line":9416},100,[504,9418,567],{"emptyLinePlaceholder":206},[504,9420,9422,9424,9426,9428,9430,9432,9434],{"class":506,"line":9421},101,[504,9423,7202],{"class":583},[504,9425,857],{"class":518},[504,9427,535],{"class":514},[504,9429,467],{"class":531},[504,9431,535],{"class":514},[504,9433,703],{"class":514},[504,9435,601],{"class":514},[504,9437,9439,9441,9443,9445,9447],{"class":506,"line":9438},102,[504,9440,607],{"class":1045},[504,9442,685],{"class":514},[504,9444,6947],{"class":583},[504,9446,7458],{"class":518},[504,9448,610],{"class":514},[504,9450,9452,9454,9456,9458,9460],{"class":506,"line":9451},103,[504,9453,1746],{"class":1045},[504,9455,685],{"class":514},[504,9457,6947],{"class":583},[504,9459,9389],{"class":518},[504,9461,610],{"class":514},[504,9463,9465,9467,9469,9471,9473],{"class":506,"line":9464},104,[504,9466,6065],{"class":1045},[504,9468,685],{"class":514},[504,9470,6947],{"class":583},[504,9472,7486],{"class":518},[504,9474,610],{"class":514},[504,9476,9478,9480,9482],{"class":506,"line":9477},105,[504,9479,640],{"class":514},[504,9481,1105],{"class":518},[504,9483,538],{"class":514},[504,9485,9487],{"class":506,"line":9486},106,[504,9488,567],{"emptyLinePlaceholder":206},[504,9490,9492,9494,9496,9498,9501,9503,9505],{"class":506,"line":9491},107,[504,9493,7202],{"class":583},[504,9495,857],{"class":518},[504,9497,535],{"class":514},[504,9499,9500],{"class":531},".lead",[504,9502,535],{"class":514},[504,9504,703],{"class":514},[504,9506,601],{"class":514},[504,9508,9510,9512,9514,9516,9519],{"class":506,"line":9509},108,[504,9511,1746],{"class":1045},[504,9513,685],{"class":514},[504,9515,6947],{"class":583},[504,9517,9518],{"class":518},"(fontSizeLg)",[504,9520,610],{"class":514},[504,9522,9524,9526,9528,9530,9533],{"class":506,"line":9523},109,[504,9525,3258],{"class":1045},[504,9527,685],{"class":514},[504,9529,6947],{"class":583},[504,9531,9532],{"class":518},"(fontWeightMedium)",[504,9534,610],{"class":514},[504,9536,9538,9540,9542,9544,9546],{"class":506,"line":9537},110,[504,9539,5262],{"class":1045},[504,9541,685],{"class":514},[504,9543,6947],{"class":583},[504,9545,9343],{"class":518},[504,9547,610],{"class":514},[504,9549,9551,9553,9555],{"class":506,"line":9550},111,[504,9552,640],{"class":514},[504,9554,1105],{"class":518},[504,9556,538],{"class":514},[504,9558,9560],{"class":506,"line":9559},112,[504,9561,567],{"emptyLinePlaceholder":206},[504,9563,9565,9567,9569,9571,9574,9576,9578],{"class":506,"line":9564},113,[504,9566,7202],{"class":583},[504,9568,857],{"class":518},[504,9570,535],{"class":514},[504,9572,9573],{"class":531},".label",[504,9575,535],{"class":514},[504,9577,703],{"class":514},[504,9579,601],{"class":514},[504,9581,9583,9585,9587,9589,9592],{"class":506,"line":9582},114,[504,9584,1746],{"class":1045},[504,9586,685],{"class":514},[504,9588,6947],{"class":583},[504,9590,9591],{"class":518},"(fontSizeXs)",[504,9593,610],{"class":514},[504,9595,9597,9599,9601,9603,9605],{"class":506,"line":9596},115,[504,9598,3258],{"class":1045},[504,9600,685],{"class":514},[504,9602,6947],{"class":583},[504,9604,9532],{"class":518},[504,9606,610],{"class":514},[504,9608,9610,9613,9615,9617,9620,9622],{"class":506,"line":9609},116,[504,9611,9612],{"class":1045},"    textTransform",[504,9614,685],{"class":514},[504,9616,528],{"class":514},[504,9618,9619],{"class":531},"uppercase",[504,9621,535],{"class":514},[504,9623,610],{"class":514},[504,9625,9627,9629,9631,9633,9635],{"class":506,"line":9626},117,[504,9628,6065],{"class":1045},[504,9630,685],{"class":514},[504,9632,6947],{"class":583},[504,9634,7486],{"class":518},[504,9636,610],{"class":514},[504,9638,9640,9642,9644],{"class":506,"line":9639},118,[504,9641,640],{"class":514},[504,9643,1105],{"class":518},[504,9645,538],{"class":514},[504,9647,9649],{"class":506,"line":9648},119,[504,9650,567],{"emptyLinePlaceholder":206},[504,9652,9654,9656,9658,9660],{"class":506,"line":9653},120,[504,9655,661],{"class":510},[504,9657,664],{"class":510},[504,9659,667],{"class":518},[504,9661,538],{"class":514},[489,9663,9664],{"icon":140,"label":672},[494,9665,9667],{"className":675,"code":9666,"filename":677,"language":678,"meta":500,"style":500},":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 / var(--scale) / var(--scale));\n    --font-size--sm: calc(var(--font-size) * 1 / 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",[467,9668,9669,9677,9707,9735,9753,9763,9777,9787,9829,9861,9885,9913,9951,9999,10057,10067,10077,10087,10097,10107,10117,10127,10137,10147,10157,10161,10165,10171,10185,10200,10214,10228,10242,10246,10250,10256,10271,10285,10299,10313,10327,10331,10335,10341,10355,10370,10384,10398,10412,10416,10420,10426,10440,10454,10468,10482,10486,10490,10496,10510,10525,10529,10533,10539,10554,10568,10572,10576,10582,10596,10610,10624,10628,10632,10642,10657,10672,10686,10690,10694,10703,10718,10732,10744,10758],{"__ignoreMap":500},[504,9670,9671,9673,9675],{"class":506,"line":507},[504,9672,685],{"class":514},[504,9674,688],{"class":573},[504,9676,601],{"class":514},[504,9678,9679,9681,9683,9685,9687,9689,9691,9693,9695,9697,9699,9701,9703,9705],{"class":506,"line":541},[504,9680,849],{"class":518},[504,9682,685],{"class":514},[504,9684,700],{"class":518},[504,9686,703],{"class":514},[504,9688,706],{"class":518},[504,9690,703],{"class":514},[504,9692,528],{"class":514},[504,9694,713],{"class":531},[504,9696,535],{"class":514},[504,9698,703],{"class":514},[504,9700,720],{"class":518},[504,9702,703],{"class":514},[504,9704,749],{"class":518},[504,9706,538],{"class":514},[504,9708,9709,9711,9713,9715,9718,9720,9722,9724,9727,9729,9731,9733],{"class":506,"line":564},[504,9710,795],{"class":518},[504,9712,685],{"class":514},[504,9714,528],{"class":514},[504,9716,9717],{"class":531},"JetBrains Mono",[504,9719,535],{"class":514},[504,9721,703],{"class":514},[504,9723,528],{"class":514},[504,9725,9726],{"class":531},"Fira Code",[504,9728,535],{"class":514},[504,9730,703],{"class":514},[504,9732,842],{"class":518},[504,9734,538],{"class":514},[504,9736,9737,9739,9741,9743,9745,9747,9749,9751],{"class":506,"line":570},[504,9738,1610],{"class":518},[504,9740,685],{"class":514},[504,9742,528],{"class":514},[504,9744,1617],{"class":531},[504,9746,535],{"class":514},[504,9748,703],{"class":514},[504,9750,749],{"class":518},[504,9752,538],{"class":514},[504,9754,9755,9757,9759,9761],{"class":506,"line":591},[504,9756,2603],{"class":518},[504,9758,685],{"class":514},[504,9760,2608],{"class":1947},[504,9762,538],{"class":514},[504,9764,9765,9767,9769,9771,9773,9775],{"class":506,"line":596},[504,9766,2615],{"class":518},[504,9768,685],{"class":514},[504,9770,854],{"class":583},[504,9772,857],{"class":514},[504,9774,2624],{"class":518},[504,9776,863],{"class":514},[504,9778,9779,9781,9783,9785],{"class":506,"line":604},[504,9780,1942],{"class":518},[504,9782,685],{"class":514},[504,9784,1948],{"class":1947},[504,9786,538],{"class":514},[504,9788,9789,9791,9793,9795,9797,9799,9801,9803,9805,9807,9809,9811,9813,9815,9817,9819,9821,9823,9825,9827],{"class":506,"line":613},[504,9790,1955],{"class":518},[504,9792,685],{"class":514},[504,9794,2636],{"class":583},[504,9796,857],{"class":514},[504,9798,2726],{"class":583},[504,9800,857],{"class":514},[504,9802,2917],{"class":518},[504,9804,1105],{"class":514},[504,9806,2735],{"class":514},[504,9808,2275],{"class":1947},[504,9810,2643],{"class":514},[504,9812,854],{"class":583},[504,9814,857],{"class":514},[504,9816,2650],{"class":518},[504,9818,1105],{"class":514},[504,9820,2643],{"class":514},[504,9822,854],{"class":583},[504,9824,857],{"class":514},[504,9826,2650],{"class":518},[504,9828,2663],{"class":514},[504,9830,9831,9833,9835,9837,9839,9841,9843,9845,9847,9849,9851,9853,9855,9857,9859],{"class":506,"line":621},[504,9832,1967],{"class":518},[504,9834,685],{"class":514},[504,9836,2636],{"class":583},[504,9838,857],{"class":514},[504,9840,2726],{"class":583},[504,9842,857],{"class":514},[504,9844,2917],{"class":518},[504,9846,1105],{"class":514},[504,9848,2735],{"class":514},[504,9850,2275],{"class":1947},[504,9852,2643],{"class":514},[504,9854,854],{"class":583},[504,9856,857],{"class":514},[504,9858,2650],{"class":518},[504,9860,2663],{"class":514},[504,9862,9863,9865,9867,9869,9871,9873,9875,9877,9879,9881,9883],{"class":506,"line":629},[504,9864,1979],{"class":518},[504,9866,685],{"class":514},[504,9868,2636],{"class":583},[504,9870,857],{"class":514},[504,9872,2726],{"class":583},[504,9874,857],{"class":514},[504,9876,2917],{"class":518},[504,9878,1105],{"class":514},[504,9880,2735],{"class":514},[504,9882,2270],{"class":1947},[504,9884,863],{"class":514},[504,9886,9887,9889,9891,9893,9895,9897,9899,9901,9903,9905,9907,9909,9911],{"class":506,"line":637},[504,9888,1990],{"class":518},[504,9890,685],{"class":514},[504,9892,2636],{"class":583},[504,9894,857],{"class":514},[504,9896,2726],{"class":583},[504,9898,857],{"class":514},[504,9900,2917],{"class":518},[504,9902,1105],{"class":514},[504,9904,2735],{"class":514},[504,9906,854],{"class":583},[504,9908,857],{"class":514},[504,9910,2650],{"class":518},[504,9912,2663],{"class":514},[504,9914,9915,9917,9919,9921,9923,9925,9927,9929,9931,9933,9935,9937,9939,9941,9943,9945,9947,9949],{"class":506,"line":653},[504,9916,2002],{"class":518},[504,9918,685],{"class":514},[504,9920,2636],{"class":583},[504,9922,857],{"class":514},[504,9924,2726],{"class":583},[504,9926,857],{"class":514},[504,9928,2917],{"class":518},[504,9930,1105],{"class":514},[504,9932,2735],{"class":514},[504,9934,854],{"class":583},[504,9936,857],{"class":514},[504,9938,2650],{"class":518},[504,9940,1105],{"class":514},[504,9942,2735],{"class":514},[504,9944,854],{"class":583},[504,9946,857],{"class":514},[504,9948,2650],{"class":518},[504,9950,2663],{"class":514},[504,9952,9953,9955,9957,9959,9961,9963,9965,9967,9969,9971,9973,9975,9977,9979,9981,9983,9985,9987,9989,9991,9993,9995,9997],{"class":506,"line":658},[504,9954,3051],{"class":518},[504,9956,685],{"class":514},[504,9958,2636],{"class":583},[504,9960,857],{"class":514},[504,9962,2726],{"class":583},[504,9964,857],{"class":514},[504,9966,2917],{"class":518},[504,9968,1105],{"class":514},[504,9970,2735],{"class":514},[504,9972,854],{"class":583},[504,9974,857],{"class":514},[504,9976,2650],{"class":518},[504,9978,1105],{"class":514},[504,9980,2735],{"class":514},[504,9982,854],{"class":583},[504,9984,857],{"class":514},[504,9986,2650],{"class":518},[504,9988,1105],{"class":514},[504,9990,2735],{"class":514},[504,9992,854],{"class":583},[504,9994,857],{"class":514},[504,9996,2650],{"class":518},[504,9998,2663],{"class":514},[504,10000,10001,10003,10005,10007,10009,10011,10013,10015,10017,10019,10021,10023,10025,10027,10029,10031,10033,10035,10037,10039,10041,10043,10045,10047,10049,10051,10053,10055],{"class":506,"line":1094},[504,10002,3081],{"class":518},[504,10004,685],{"class":514},[504,10006,2636],{"class":583},[504,10008,857],{"class":514},[504,10010,2726],{"class":583},[504,10012,857],{"class":514},[504,10014,2917],{"class":518},[504,10016,1105],{"class":514},[504,10018,2735],{"class":514},[504,10020,854],{"class":583},[504,10022,857],{"class":514},[504,10024,2650],{"class":518},[504,10026,1105],{"class":514},[504,10028,2735],{"class":514},[504,10030,854],{"class":583},[504,10032,857],{"class":514},[504,10034,2650],{"class":518},[504,10036,1105],{"class":514},[504,10038,2735],{"class":514},[504,10040,854],{"class":583},[504,10042,857],{"class":514},[504,10044,2650],{"class":518},[504,10046,1105],{"class":514},[504,10048,2735],{"class":514},[504,10050,854],{"class":583},[504,10052,857],{"class":514},[504,10054,2650],{"class":518},[504,10056,2663],{"class":514},[504,10058,10059,10061,10063,10065],{"class":506,"line":1110},[504,10060,3400],{"class":518},[504,10062,685],{"class":514},[504,10064,3405],{"class":518},[504,10066,538],{"class":514},[504,10068,10069,10071,10073,10075],{"class":506,"line":1115},[504,10070,3412],{"class":518},[504,10072,685],{"class":514},[504,10074,3417],{"class":1947},[504,10076,538],{"class":514},[504,10078,10079,10081,10083,10085],{"class":506,"line":1452},[504,10080,3424],{"class":518},[504,10082,685],{"class":514},[504,10084,3429],{"class":1947},[504,10086,538],{"class":514},[504,10088,10089,10091,10093,10095],{"class":506,"line":1862},[504,10090,3436],{"class":518},[504,10092,685],{"class":514},[504,10094,3441],{"class":518},[504,10096,538],{"class":514},[504,10098,10099,10101,10103,10105],{"class":506,"line":1879},[504,10100,5345],{"class":518},[504,10102,685],{"class":514},[504,10104,5350],{"class":1947},[504,10106,538],{"class":514},[504,10108,10109,10111,10113,10115],{"class":506,"line":1896},[504,10110,5369],{"class":518},[504,10112,685],{"class":514},[504,10114,5374],{"class":1947},[504,10116,538],{"class":514},[504,10118,10119,10121,10123,10125],{"class":506,"line":1909},[504,10120,5381],{"class":518},[504,10122,685],{"class":514},[504,10124,5386],{"class":1947},[504,10126,538],{"class":514},[504,10128,10129,10131,10133,10135],{"class":506,"line":1914},[504,10130,6160],{"class":518},[504,10132,685],{"class":514},[504,10134,6165],{"class":1947},[504,10136,538],{"class":514},[504,10138,10139,10141,10143,10145],{"class":506,"line":2355},[504,10140,6172],{"class":518},[504,10142,685],{"class":514},[504,10144,3405],{"class":518},[504,10146,538],{"class":514},[504,10148,10149,10151,10153,10155],{"class":506,"line":2363},[504,10150,6183],{"class":518},[504,10152,685],{"class":514},[504,10154,6188],{"class":1947},[504,10156,538],{"class":514},[504,10158,10159],{"class":506,"line":2371},[504,10160,868],{"class":514},[504,10162,10163],{"class":506,"line":2391},[504,10164,567],{"emptyLinePlaceholder":206},[504,10166,10167,10169],{"class":506,"line":2413},[504,10168,7316],{"class":7910},[504,10170,601],{"class":514},[504,10172,10173,10175,10177,10179,10181,10183],{"class":506,"line":2433},[504,10174,7918],{"class":7917},[504,10176,685],{"class":514},[504,10178,854],{"class":583},[504,10180,857],{"class":514},[504,10182,921],{"class":518},[504,10184,863],{"class":514},[504,10186,10187,10189,10191,10193,10195,10198],{"class":506,"line":2452},[504,10188,7933],{"class":7917},[504,10190,685],{"class":514},[504,10192,854],{"class":583},[504,10194,857],{"class":514},[504,10196,10197],{"class":518},"--font-size--md",[504,10199,863],{"class":514},[504,10201,10202,10204,10206,10208,10210,10212],{"class":506,"line":2470},[504,10203,7949],{"class":7917},[504,10205,685],{"class":514},[504,10207,854],{"class":583},[504,10209,857],{"class":514},[504,10211,3505],{"class":518},[504,10213,863],{"class":514},[504,10215,10216,10218,10220,10222,10224,10226],{"class":506,"line":2488},[504,10217,7980],{"class":7917},[504,10219,685],{"class":514},[504,10221,854],{"class":583},[504,10223,857],{"class":514},[504,10225,5414],{"class":518},[504,10227,863],{"class":514},[504,10229,10230,10232,10234,10236,10238,10240],{"class":506,"line":2513},[504,10231,7996],{"class":7917},[504,10233,685],{"class":514},[504,10235,854],{"class":583},[504,10237,857],{"class":514},[504,10239,6216],{"class":518},[504,10241,863],{"class":514},[504,10243,10244],{"class":506,"line":2537},[504,10245,868],{"class":514},[504,10247,10248],{"class":506,"line":2561},[504,10249,567],{"emptyLinePlaceholder":206},[504,10251,10252,10254],{"class":506,"line":2570},[504,10253,7209],{"class":7910},[504,10255,601],{"class":514},[504,10257,10258,10260,10262,10264,10266,10269],{"class":506,"line":2575},[504,10259,7918],{"class":7917},[504,10261,685],{"class":514},[504,10263,854],{"class":583},[504,10265,857],{"class":514},[504,10267,10268],{"class":518},"--font-family--display",[504,10270,863],{"class":514},[504,10272,10273,10275,10277,10279,10281,10283],{"class":506,"line":7404},[504,10274,7933],{"class":7917},[504,10276,685],{"class":514},[504,10278,854],{"class":583},[504,10280,857],{"class":514},[504,10282,7942],{"class":518},[504,10284,863],{"class":514},[504,10286,10287,10289,10291,10293,10295,10297],{"class":506,"line":7418},[504,10288,7949],{"class":7917},[504,10290,685],{"class":514},[504,10292,854],{"class":583},[504,10294,857],{"class":514},[504,10296,7958],{"class":518},[504,10298,863],{"class":514},[504,10300,10301,10303,10305,10307,10309,10311],{"class":506,"line":7427},[504,10302,7980],{"class":7917},[504,10304,685],{"class":514},[504,10306,854],{"class":583},[504,10308,857],{"class":514},[504,10310,7989],{"class":518},[504,10312,863],{"class":514},[504,10314,10315,10317,10319,10321,10323,10325],{"class":506,"line":7432},[504,10316,7996],{"class":7917},[504,10318,685],{"class":514},[504,10320,854],{"class":583},[504,10322,857],{"class":514},[504,10324,8005],{"class":518},[504,10326,863],{"class":514},[504,10328,10329],{"class":506,"line":7449},[504,10330,868],{"class":514},[504,10332,10333],{"class":506,"line":7463},[504,10334,567],{"emptyLinePlaceholder":206},[504,10336,10337,10339],{"class":506,"line":7477},[504,10338,414],{"class":7910},[504,10340,601],{"class":514},[504,10342,10343,10345,10347,10349,10351,10353],{"class":506,"line":7491},[504,10344,7918],{"class":7917},[504,10346,685],{"class":514},[504,10348,854],{"class":583},[504,10350,857],{"class":514},[504,10352,10268],{"class":518},[504,10354,863],{"class":514},[504,10356,10357,10359,10361,10363,10365,10368],{"class":506,"line":7500},[504,10358,7933],{"class":7917},[504,10360,685],{"class":514},[504,10362,854],{"class":583},[504,10364,857],{"class":514},[504,10366,10367],{"class":518},"--font-size--2xl",[504,10369,863],{"class":514},[504,10371,10372,10374,10376,10378,10380,10382],{"class":506,"line":7505},[504,10373,7949],{"class":7917},[504,10375,685],{"class":514},[504,10377,854],{"class":583},[504,10379,857],{"class":514},[504,10381,7958],{"class":518},[504,10383,863],{"class":514},[504,10385,10386,10388,10390,10392,10394,10396],{"class":506,"line":8099},[504,10387,7980],{"class":7917},[504,10389,685],{"class":514},[504,10391,854],{"class":583},[504,10393,857],{"class":514},[504,10395,7989],{"class":518},[504,10397,863],{"class":514},[504,10399,10400,10402,10404,10406,10408,10410],{"class":506,"line":8114},[504,10401,7996],{"class":7917},[504,10403,685],{"class":514},[504,10405,854],{"class":583},[504,10407,857],{"class":514},[504,10409,8005],{"class":518},[504,10411,863],{"class":514},[504,10413,10414],{"class":506,"line":8119},[504,10415,868],{"class":514},[504,10417,10418],{"class":506,"line":8124},[504,10419,567],{"emptyLinePlaceholder":206},[504,10421,10422,10424],{"class":506,"line":8131},[504,10423,478],{"class":7910},[504,10425,601],{"class":514},[504,10427,10428,10430,10432,10434,10436,10438],{"class":506,"line":8147},[504,10429,7918],{"class":7917},[504,10431,685],{"class":514},[504,10433,854],{"class":583},[504,10435,857],{"class":514},[504,10437,10268],{"class":518},[504,10439,863],{"class":514},[504,10441,10442,10444,10446,10448,10450,10452],{"class":506,"line":8163},[504,10443,7933],{"class":7917},[504,10445,685],{"class":514},[504,10447,854],{"class":583},[504,10449,857],{"class":514},[504,10451,8158],{"class":518},[504,10453,863],{"class":514},[504,10455,10456,10458,10460,10462,10464,10466],{"class":506,"line":8179},[504,10457,7949],{"class":7917},[504,10459,685],{"class":514},[504,10461,854],{"class":583},[504,10463,857],{"class":514},[504,10465,4173],{"class":518},[504,10467,863],{"class":514},[504,10469,10470,10472,10474,10476,10478,10480],{"class":506,"line":8879},[504,10471,7980],{"class":7917},[504,10473,685],{"class":514},[504,10475,854],{"class":583},[504,10477,857],{"class":514},[504,10479,7989],{"class":518},[504,10481,863],{"class":514},[504,10483,10484],{"class":506,"line":8884},[504,10485,868],{"class":514},[504,10487,10488],{"class":506,"line":8890},[504,10489,567],{"emptyLinePlaceholder":206},[504,10491,10492,10494],{"class":506,"line":8918},[504,10493,418],{"class":7910},[504,10495,601],{"class":514},[504,10497,10498,10500,10502,10504,10506,10508],{"class":506,"line":8923},[504,10499,7933],{"class":7917},[504,10501,685],{"class":514},[504,10503,854],{"class":583},[504,10505,857],{"class":514},[504,10507,10197],{"class":518},[504,10509,863],{"class":514},[504,10511,10512,10514,10516,10518,10520,10523],{"class":506,"line":8928},[504,10513,7980],{"class":7917},[504,10515,685],{"class":514},[504,10517,854],{"class":583},[504,10519,857],{"class":514},[504,10521,10522],{"class":518},"--line-height--relaxed",[504,10524,863],{"class":514},[504,10526,10527],{"class":506,"line":8945},[504,10528,868],{"class":514},[504,10530,10531],{"class":506,"line":8958},[504,10532,567],{"emptyLinePlaceholder":206},[504,10534,10535,10537],{"class":506,"line":8972},[504,10536,9371],{"class":7910},[504,10538,601],{"class":514},[504,10540,10541,10543,10545,10547,10549,10552],{"class":506,"line":8985},[504,10542,7933],{"class":7917},[504,10544,685],{"class":514},[504,10546,854],{"class":583},[504,10548,857],{"class":514},[504,10550,10551],{"class":518},"--font-size--sm",[504,10553,863],{"class":514},[504,10555,10556,10558,10560,10562,10564,10566],{"class":506,"line":8998},[504,10557,7980],{"class":7917},[504,10559,685],{"class":514},[504,10561,854],{"class":583},[504,10563,857],{"class":514},[504,10565,5414],{"class":518},[504,10567,863],{"class":514},[504,10569,10570],{"class":506,"line":9012},[504,10571,868],{"class":514},[504,10573,10574],{"class":506,"line":9021},[504,10575,567],{"emptyLinePlaceholder":206},[504,10577,10578,10580],{"class":506,"line":9026},[504,10579,467],{"class":7910},[504,10581,601],{"class":514},[504,10583,10584,10586,10588,10590,10592,10594],{"class":506,"line":9043},[504,10585,7918],{"class":7917},[504,10587,685],{"class":514},[504,10589,854],{"class":583},[504,10591,857],{"class":514},[504,10593,8142],{"class":518},[504,10595,863],{"class":514},[504,10597,10598,10600,10602,10604,10606,10608],{"class":506,"line":9057},[504,10599,7933],{"class":7917},[504,10601,685],{"class":514},[504,10603,854],{"class":583},[504,10605,857],{"class":514},[504,10607,10551],{"class":518},[504,10609,863],{"class":514},[504,10611,10612,10614,10616,10618,10620,10622],{"class":506,"line":9070},[504,10613,7996],{"class":7917},[504,10615,685],{"class":514},[504,10617,854],{"class":583},[504,10619,857],{"class":514},[504,10621,8174],{"class":518},[504,10623,863],{"class":514},[504,10625,10626],{"class":506,"line":9083},[504,10627,868],{"class":514},[504,10629,10630],{"class":506,"line":9096},[504,10631,567],{"emptyLinePlaceholder":206},[504,10633,10634,10637,10640],{"class":506,"line":9109},[504,10635,10636],{"class":514},".",[504,10638,10639],{"class":7910},"lead",[504,10641,601],{"class":514},[504,10643,10644,10646,10648,10650,10652,10655],{"class":506,"line":9118},[504,10645,7933],{"class":7917},[504,10647,685],{"class":514},[504,10649,854],{"class":583},[504,10651,857],{"class":514},[504,10653,10654],{"class":518},"--font-size--lg",[504,10656,863],{"class":514},[504,10658,10659,10661,10663,10665,10667,10670],{"class":506,"line":9123},[504,10660,7949],{"class":7917},[504,10662,685],{"class":514},[504,10664,854],{"class":583},[504,10666,857],{"class":514},[504,10668,10669],{"class":518},"--font-weight--medium",[504,10671,863],{"class":514},[504,10673,10674,10676,10678,10680,10682,10684],{"class":506,"line":9140},[504,10675,7980],{"class":7917},[504,10677,685],{"class":514},[504,10679,854],{"class":583},[504,10681,857],{"class":514},[504,10683,10522],{"class":518},[504,10685,863],{"class":514},[504,10687,10688],{"class":506,"line":9153},[504,10689,868],{"class":514},[504,10691,10692],{"class":506,"line":9167},[504,10693,567],{"emptyLinePlaceholder":206},[504,10695,10696,10698,10701],{"class":506,"line":9180},[504,10697,10636],{"class":514},[504,10699,10700],{"class":7910},"label",[504,10702,601],{"class":514},[504,10704,10705,10707,10709,10711,10713,10716],{"class":506,"line":9193},[504,10706,7933],{"class":7917},[504,10708,685],{"class":514},[504,10710,854],{"class":583},[504,10712,857],{"class":514},[504,10714,10715],{"class":518},"--font-size--xs",[504,10717,863],{"class":514},[504,10719,10720,10722,10724,10726,10728,10730],{"class":506,"line":9206},[504,10721,7949],{"class":7917},[504,10723,685],{"class":514},[504,10725,854],{"class":583},[504,10727,857],{"class":514},[504,10729,10669],{"class":518},[504,10731,863],{"class":514},[504,10733,10734,10737,10739,10742],{"class":506,"line":9215},[504,10735,10736],{"class":7917},"    text-transform",[504,10738,685],{"class":514},[504,10740,10741],{"class":518}," uppercase",[504,10743,538],{"class":514},[504,10745,10746,10748,10750,10752,10754,10756],{"class":506,"line":9220},[504,10747,7996],{"class":7917},[504,10749,685],{"class":514},[504,10751,854],{"class":583},[504,10753,857],{"class":514},[504,10755,8174],{"class":518},[504,10757,863],{"class":514},[504,10759,10760],{"class":506,"line":9237},[504,10761,868],{"class":514},[478,10763,10765],{"id":10764},"responsive-typography","Responsive Typography",[418,10767,10768],{},"Adjust typography variables at different breakpoints for optimal readability:",[486,10770,10771,11190],{},[489,10772,10773],{"icon":491,"label":492},[494,10774,10776],{"className":496,"code":10775,"filename":498,"language":499,"meta":500,"style":500},"import { styleframe } from 'styleframe';\nimport { useFontSizeDesignTokens, useLineHeightDesignTokens } from '@styleframe/theme';\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// 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",[467,10777,10778,10798,10822,10826,10840,10871,10875,10911,10929,10933,10949,10962,10975,10983,10987,10992,11021,11047,11070,11079,11087,11091,11115,11140,11160,11168,11176,11180],{"__ignoreMap":500},[504,10779,10780,10782,10784,10786,10788,10790,10792,10794,10796],{"class":506,"line":507},[504,10781,511],{"class":510},[504,10783,515],{"class":514},[504,10785,519],{"class":518},[504,10787,522],{"class":514},[504,10789,525],{"class":510},[504,10791,528],{"class":514},[504,10793,532],{"class":531},[504,10795,535],{"class":514},[504,10797,538],{"class":514},[504,10799,10800,10802,10804,10806,10808,10810,10812,10814,10816,10818,10820],{"class":506,"line":541},[504,10801,511],{"class":510},[504,10803,515],{"class":514},[504,10805,1701],{"class":518},[504,10807,703],{"class":514},[504,10809,5217],{"class":518},[504,10811,522],{"class":514},[504,10813,525],{"class":510},[504,10815,528],{"class":514},[504,10817,557],{"class":531},[504,10819,535],{"class":514},[504,10821,538],{"class":514},[504,10823,10824],{"class":506,"line":564},[504,10825,567],{"emptyLinePlaceholder":206},[504,10827,10828,10830,10832,10834,10836,10838],{"class":506,"line":570},[504,10829,574],{"class":573},[504,10831,577],{"class":518},[504,10833,580],{"class":514},[504,10835,519],{"class":583},[504,10837,586],{"class":518},[504,10839,538],{"class":514},[504,10841,10842,10844,10846,10848,10850,10853,10855,10858,10860,10863,10865,10867,10869],{"class":506,"line":591},[504,10843,574],{"class":573},[504,10845,515],{"class":514},[504,10847,6947],{"class":518},[504,10849,703],{"class":514},[504,10851,10852],{"class":518}," selector",[504,10854,703],{"class":514},[504,10856,10857],{"class":518}," variable",[504,10859,703],{"class":514},[504,10861,10862],{"class":518}," media ",[504,10864,640],{"class":514},[504,10866,643],{"class":514},[504,10868,667],{"class":518},[504,10870,538],{"class":514},[504,10872,10873],{"class":506,"line":596},[504,10874,567],{"emptyLinePlaceholder":206},[504,10876,10877,10879,10881,10883,10885,10887,10889,10891,10893,10895,10897,10899,10901,10903,10905,10907,10909],{"class":506,"line":604},[504,10878,574],{"class":573},[504,10880,515],{"class":514},[504,10882,2191],{"class":518},[504,10884,640],{"class":514},[504,10886,643],{"class":514},[504,10888,1701],{"class":583},[504,10890,1036],{"class":518},[504,10892,703],{"class":514},[504,10894,515],{"class":514},[504,10896,664],{"class":1045},[504,10898,685],{"class":514},[504,10900,528],{"class":514},[504,10902,1808],{"class":531},[504,10904,535],{"class":514},[504,10906,522],{"class":514},[504,10908,1105],{"class":518},[504,10910,538],{"class":514},[504,10912,10913,10915,10917,10919,10921,10923,10925,10927],{"class":506,"line":613},[504,10914,574],{"class":573},[504,10916,515],{"class":514},[504,10918,5840],{"class":518},[504,10920,640],{"class":514},[504,10922,643],{"class":514},[504,10924,5217],{"class":583},[504,10926,648],{"class":518},[504,10928,538],{"class":514},[504,10930,10931],{"class":506,"line":621},[504,10932,567],{"emptyLinePlaceholder":206},[504,10934,10935,10937,10939,10941,10943,10945,10947],{"class":506,"line":629},[504,10936,7202],{"class":583},[504,10938,857],{"class":518},[504,10940,535],{"class":514},[504,10942,7316],{"class":531},[504,10944,535],{"class":514},[504,10946,703],{"class":514},[504,10948,601],{"class":514},[504,10950,10951,10953,10955,10957,10960],{"class":506,"line":637},[504,10952,1746],{"class":1045},[504,10954,685],{"class":514},[504,10956,6947],{"class":583},[504,10958,10959],{"class":518},"(fontSize)",[504,10961,610],{"class":514},[504,10963,10964,10966,10968,10970,10973],{"class":506,"line":653},[504,10965,5262],{"class":1045},[504,10967,685],{"class":514},[504,10969,6947],{"class":583},[504,10971,10972],{"class":518},"(lineHeight)",[504,10974,610],{"class":514},[504,10976,10977,10979,10981],{"class":506,"line":658},[504,10978,640],{"class":514},[504,10980,1105],{"class":518},[504,10982,538],{"class":514},[504,10984,10985],{"class":506,"line":1094},[504,10986,567],{"emptyLinePlaceholder":206},[504,10988,10989],{"class":506,"line":1110},[504,10990,10991],{"class":2126},"// Increase base font size on larger screens\n",[504,10993,10994,10996,10998,11000,11002,11004,11006,11009,11013,11016,11019],{"class":506,"line":1115},[504,10995,7202],{"class":583},[504,10997,857],{"class":518},[504,10999,535],{"class":514},[504,11001,7316],{"class":531},[504,11003,535],{"class":514},[504,11005,703],{"class":514},[504,11007,11008],{"class":514}," ({",[504,11010,11012],{"class":11011},"sHdIc"," media",[504,11014,11015],{"class":514}," })",[504,11017,11018],{"class":573}," =>",[504,11020,601],{"class":514},[504,11022,11023,11026,11028,11030,11033,11035,11037,11039,11041,11043,11045],{"class":506,"line":1452},[504,11024,11025],{"class":583},"    media",[504,11027,857],{"class":1045},[504,11029,535],{"class":514},[504,11031,11032],{"class":531},"(min-width: 768px)",[504,11034,535],{"class":514},[504,11036,703],{"class":514},[504,11038,11008],{"class":514},[504,11040,10857],{"class":11011},[504,11042,11015],{"class":514},[504,11044,11018],{"class":573},[504,11046,601],{"class":514},[504,11048,11049,11052,11054,11057,11059,11061,11064,11066,11068],{"class":506,"line":1862},[504,11050,11051],{"class":583},"        variable",[504,11053,857],{"class":1045},[504,11055,11056],{"class":518},"fontSize",[504,11058,703],{"class":514},[504,11060,528],{"class":514},[504,11062,11063],{"class":531},"1.125rem",[504,11065,535],{"class":514},[504,11067,1105],{"class":1045},[504,11069,538],{"class":514},[504,11071,11072,11075,11077],{"class":506,"line":1879},[504,11073,11074],{"class":514},"    }",[504,11076,1105],{"class":1045},[504,11078,538],{"class":514},[504,11080,11081,11083,11085],{"class":506,"line":1896},[504,11082,640],{"class":514},[504,11084,1105],{"class":518},[504,11086,538],{"class":514},[504,11088,11089],{"class":506,"line":1909},[504,11090,567],{"emptyLinePlaceholder":206},[504,11092,11093,11095,11097,11099,11101,11103,11105,11107,11109,11111,11113],{"class":506,"line":1914},[504,11094,7202],{"class":583},[504,11096,857],{"class":518},[504,11098,535],{"class":514},[504,11100,7316],{"class":531},[504,11102,535],{"class":514},[504,11104,703],{"class":514},[504,11106,11008],{"class":514},[504,11108,11012],{"class":11011},[504,11110,11015],{"class":514},[504,11112,11018],{"class":573},[504,11114,601],{"class":514},[504,11116,11117,11119,11121,11123,11126,11128,11130,11132,11134,11136,11138],{"class":506,"line":2355},[504,11118,11025],{"class":583},[504,11120,857],{"class":1045},[504,11122,535],{"class":514},[504,11124,11125],{"class":531},"(min-width: 1200px)",[504,11127,535],{"class":514},[504,11129,703],{"class":514},[504,11131,11008],{"class":514},[504,11133,10857],{"class":11011},[504,11135,11015],{"class":514},[504,11137,11018],{"class":573},[504,11139,601],{"class":514},[504,11141,11142,11144,11146,11148,11150,11152,11154,11156,11158],{"class":506,"line":2363},[504,11143,11051],{"class":583},[504,11145,857],{"class":1045},[504,11147,11056],{"class":518},[504,11149,703],{"class":514},[504,11151,528],{"class":514},[504,11153,1872],{"class":531},[504,11155,535],{"class":514},[504,11157,1105],{"class":1045},[504,11159,538],{"class":514},[504,11161,11162,11164,11166],{"class":506,"line":2371},[504,11163,11074],{"class":514},[504,11165,1105],{"class":1045},[504,11167,538],{"class":514},[504,11169,11170,11172,11174],{"class":506,"line":2391},[504,11171,640],{"class":514},[504,11173,1105],{"class":518},[504,11175,538],{"class":514},[504,11177,11178],{"class":506,"line":2413},[504,11179,567],{"emptyLinePlaceholder":206},[504,11181,11182,11184,11186,11188],{"class":506,"line":2433},[504,11183,661],{"class":510},[504,11185,664],{"class":510},[504,11187,667],{"class":518},[504,11189,538],{"class":514},[489,11191,11192],{"icon":140,"label":672},[494,11193,11195],{"className":675,"code":11194,"filename":677,"language":678,"meta":500,"style":500},":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",[467,11196,11197,11205,11215,11225,11235,11245,11255,11265,11279,11283,11287,11293,11307,11322,11326,11330,11336,11352,11364,11369,11373,11377,11383,11396,11406,11410],{"__ignoreMap":500},[504,11198,11199,11201,11203],{"class":506,"line":507},[504,11200,685],{"class":514},[504,11202,688],{"class":573},[504,11204,601],{"class":514},[504,11206,11207,11209,11211,11213],{"class":506,"line":541},[504,11208,1942],{"class":518},[504,11210,685],{"class":514},[504,11212,1948],{"class":1947},[504,11214,538],{"class":514},[504,11216,11217,11219,11221,11223],{"class":506,"line":564},[504,11218,5345],{"class":518},[504,11220,685],{"class":514},[504,11222,5350],{"class":1947},[504,11224,538],{"class":514},[504,11226,11227,11229,11231,11233],{"class":506,"line":570},[504,11228,5357],{"class":518},[504,11230,685],{"class":514},[504,11232,5362],{"class":1947},[504,11234,538],{"class":514},[504,11236,11237,11239,11241,11243],{"class":506,"line":591},[504,11238,5369],{"class":518},[504,11240,685],{"class":514},[504,11242,5374],{"class":1947},[504,11244,538],{"class":514},[504,11246,11247,11249,11251,11253],{"class":506,"line":596},[504,11248,5381],{"class":518},[504,11250,685],{"class":514},[504,11252,5386],{"class":1947},[504,11254,538],{"class":514},[504,11256,11257,11259,11261,11263],{"class":506,"line":604},[504,11258,5393],{"class":518},[504,11260,685],{"class":514},[504,11262,5398],{"class":1947},[504,11264,538],{"class":514},[504,11266,11267,11269,11271,11273,11275,11277],{"class":506,"line":613},[504,11268,5405],{"class":518},[504,11270,685],{"class":514},[504,11272,854],{"class":583},[504,11274,857],{"class":514},[504,11276,5414],{"class":518},[504,11278,863],{"class":514},[504,11280,11281],{"class":506,"line":621},[504,11282,868],{"class":514},[504,11284,11285],{"class":506,"line":629},[504,11286,567],{"emptyLinePlaceholder":206},[504,11288,11289,11291],{"class":506,"line":637},[504,11290,7316],{"class":7910},[504,11292,601],{"class":514},[504,11294,11295,11297,11299,11301,11303,11305],{"class":506,"line":653},[504,11296,7933],{"class":7917},[504,11298,685],{"class":514},[504,11300,854],{"class":583},[504,11302,857],{"class":514},[504,11304,2917],{"class":518},[504,11306,863],{"class":514},[504,11308,11309,11311,11313,11315,11317,11320],{"class":506,"line":658},[504,11310,7980],{"class":7917},[504,11312,685],{"class":514},[504,11314,854],{"class":583},[504,11316,857],{"class":514},[504,11318,11319],{"class":518},"--line-height",[504,11321,863],{"class":514},[504,11323,11324],{"class":506,"line":1094},[504,11325,868],{"class":514},[504,11327,11328],{"class":506,"line":1110},[504,11329,567],{"emptyLinePlaceholder":206},[504,11331,11332,11334],{"class":506,"line":1115},[504,11333,7316],{"class":7910},[504,11335,601],{"class":514},[504,11337,11338,11341,11344,11346,11349],{"class":506,"line":1452},[504,11339,11340],{"class":518},"    @media (",[504,11342,11343],{"class":7917},"min-width",[504,11345,685],{"class":514},[504,11347,11348],{"class":1947}," 768px",[504,11350,11351],{"class":518},") {\n",[504,11353,11354,11357,11359,11362],{"class":506,"line":1862},[504,11355,11356],{"class":518},"        --font-size",[504,11358,685],{"class":514},[504,11360,11361],{"class":1947}," 1.125rem",[504,11363,538],{"class":514},[504,11365,11366],{"class":506,"line":1879},[504,11367,11368],{"class":514},"    }\n",[504,11370,11371],{"class":506,"line":1896},[504,11372,868],{"class":518},[504,11374,11375],{"class":506,"line":1909},[504,11376,567],{"emptyLinePlaceholder":206},[504,11378,11379,11381],{"class":506,"line":1914},[504,11380,7316],{"class":7910},[504,11382,601],{"class":514},[504,11384,11385,11387,11389,11391,11394],{"class":506,"line":2355},[504,11386,11340],{"class":518},[504,11388,11343],{"class":7917},[504,11390,685],{"class":514},[504,11392,11393],{"class":1947}," 1200px",[504,11395,11351],{"class":518},[504,11397,11398,11400,11402,11404],{"class":506,"line":2363},[504,11399,11356],{"class":518},[504,11401,685],{"class":514},[504,11403,1995],{"class":1947},[504,11405,538],{"class":514},[504,11407,11408],{"class":506,"line":2371},[504,11409,11368],{"class":514},[504,11411,11412],{"class":506,"line":2391},[504,11413,868],{"class":518},[414,11415,11417],{"id":11416},"best-practices","Best Practices",[429,11419,11420,11432,11438,11444,11454,11468,11512,11525,11568,11574,11580,11586],{},[432,11421,11422,11425,11426,11428,11429,11431],{},[435,11423,11424],{},"Use modular scales for font sizes",": Combine ",[467,11427,1662],{}," with ",[467,11430,2029],{}," for mathematically harmonious type scales.",[432,11433,11434,11437],{},[435,11435,11436],{},"Limit your type scale",": Aim for 6-8 font sizes. Too many options lead to inconsistency.",[432,11439,11440,11443],{},[435,11441,11442],{},"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).",[432,11445,11446,11449,11450,11453],{},[435,11447,11448],{},"Use negative letter spacing for large headings",": Display text benefits from tighter tracking (e.g., ",[467,11451,11452],{},"-0.025em",").",[432,11455,11456,11459,11460,11463,11464,11467],{},[435,11457,11458],{},"Use positive letter spacing for uppercase or small text",": All-caps text and small UI text need extra tracking (e.g., ",[467,11461,11462],{},"0.05em"," to ",[467,11465,11466],{},"0.1em",") for readability.",[432,11469,11470,11473,11474],{},[435,11471,11472],{},"Always include font stack fallbacks",": List fonts from most specific to most generic, ending with a generic family.\n",[494,11475,11477],{"className":675,"code":11476,"language":678,"meta":500,"style":500},"font-family: \"Inter\", \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n",[467,11478,11479],{"__ignoreMap":500},[504,11480,11481,11484,11487,11489,11492,11494,11496,11498,11501,11503,11506,11508,11510],{"class":506,"line":507},[504,11482,11483],{"class":7910},"font-family",[504,11485,11486],{"class":518},": \"Inter\"",[504,11488,703],{"class":514},[504,11490,11491],{"class":518}," \"Segoe UI\"",[504,11493,703],{"class":514},[504,11495,720],{"class":518},[504,11497,703],{"class":514},[504,11499,11500],{"class":518}," Helvetica",[504,11502,703],{"class":514},[504,11504,11505],{"class":518}," Arial",[504,11507,703],{"class":514},[504,11509,749],{"class":7910},[504,11511,538],{"class":518},[432,11513,11514,11521,11522,11524],{},[435,11515,11516,11517,11520],{},"Use ",[467,11518,11519],{},"local()"," in @font-face",": Include ",[467,11523,11519],{}," sources to reuse installed fonts when available, reducing bandwidth.",[432,11526,11527,11530,11531],{},[435,11528,11529],{},"Consider performance",":\n",[429,11532,11533,11539,11545,11554],{},[432,11534,11535,11536,10636],{},"System fonts load instantly; web fonts may cause layout shifts. Use ",[467,11537,11538],{},"font-display: swap",[432,11540,11541,11542],{},"Preload critical web fonts: ",[467,11543,11544],{},"\u003Clink rel=\"preload\" href=\"font.woff2\" as=\"font\" type=\"font/woff2\" crossorigin>",[432,11546,11516,11547,11550,11551],{},[467,11548,11549],{},"preconnect"," for external font services: ",[467,11552,11553],{},"\u003Clink rel=\"preconnect\" href=\"https://fonts.googleapis.com\">",[432,11555,11516,11556,11559,11560,11563,11564,11567],{},[467,11557,11558],{},"font-size-adjust"," or ",[467,11561,11562],{},"size-adjust"," (in ",[467,11565,11566],{},"@font-face",") to reduce reflow when fallback fonts render.",[432,11569,11570,11573],{},[435,11571,11572],{},"Use unitless line heights",": This ensures line height scales proportionally with font size changes.",[432,11575,11576,11579],{},[435,11577,11578],{},"Consider variable fonts",": Variable fonts offer multiple weights and styles in a single file, improving performance and enabling optical size adjustments.",[432,11581,11582,11585],{},[435,11583,11584],{},"Test across devices",": Ensure your typography is readable at all viewport sizes and on different devices.",[432,11587,11588,11591],{},[435,11589,11590],{},"Use em units for letter spacing",": This ensures tracking scales proportionally with font size.",[4457,11593,11594,11596,11597,11600],{},[435,11595,4461],{}," We use ",[467,11598,11599],{},"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.",[414,11602,11604],{"id":11603},"faq","FAQ",[11606,11607,11608,11614,11639,11643,11653,11670,11674,11678,11682,11686],"accordion",{},[11609,11610,11613],"accordion-item",{"icon":11611,"label":11612},"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.",[11609,11615,472,11617,11619,11620,11559,11622,11624,11625,11559,11627,11630,11631,11559,11633,11635,11636,11638],{"icon":11611,"label":11616},"What's the difference between using 'default' and a custom key?",[467,11618,904],{}," key creates a variable without a suffix (like ",[467,11621,921],{},[467,11623,2917],{},"), which is perfect for your primary values. Any other key like ",[467,11626,896],{},[467,11628,11629],{},"lg"," creates variables with suffixes (like ",[467,11632,8142],{},[467,11634,10654],{},"). Use ",[467,11637,904],{}," for your main body text styles.",[11609,11640,11642],{"icon":11611,"label":11641},"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.",[11609,11644,11646,11647,11649,11650,11652],{"icon":11611,"label":11645},"How do I handle font loading?","Font loading is handled separately from defining font families. Use the CSS ",[467,11648,11566],{}," 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 ",[467,11651,11538],{}," to prevent invisible text while fonts load.",[11609,11654,11516,11656,11659,11660,11662,11663,11665,11666,11669],{"icon":11611,"label":11655},"Should I use pixels, rems, or ems for font sizes?",[467,11657,11658],{},"rem"," for font sizes to respect user font size preferences and maintain consistent scaling across your site. ",[467,11661,11658],{}," is relative to the root element, making it predictable. Use ",[467,11664,6282],{}," only when you need font sizes relative to their parent element. Avoid ",[467,11667,11668],{},"px"," as it doesn't scale with user preferences.",[11609,11671,11673],{"icon":11611,"label":11672},"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.",[11609,11675,11677],{"icon":11611,"label":11676},"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.",[11609,11679,11681],{"icon":11611,"label":11680},"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.",[11609,11683,11685],{"icon":11611,"label":11684},"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.",[11609,11687,11689,11691,11692,11694,11695,11697,11698,11700],{"icon":11611,"label":11688},"What's the difference between italic and oblique?",[467,11690,4425],{}," uses a true italic font variant if available—a specially designed slanted version with unique letterforms. ",[467,11693,4433],{}," artificially slants the normal font. Most fonts provide italic variants, making ",[467,11696,4425],{}," the preferred choice for emphasis. Use ",[467,11699,4433],{}," only when the font lacks a true italic or for specific design effects.",[11702,11703,11704],"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":500,"searchDepth":541,"depth":541,"links":11706},[11707,11708,11709,11714,11718,11722,11727,11731,11735,11736,11740,11741],{"id":416,"depth":541,"text":64},{"id":423,"depth":541,"text":424},{"id":465,"depth":541,"text":469,"children":11710},[11711,11712,11713],{"id":480,"depth":564,"text":481},{"id":925,"depth":564,"text":926},{"id":1276,"depth":564,"text":1277},{"id":1654,"depth":541,"text":1657,"children":11715},[11716],{"id":2016,"depth":564,"text":11717},"Integration with useMultiplierDesignTokens",{"id":3163,"depth":541,"text":3166,"children":11719},[11720,11721],{"id":3614,"depth":564,"text":3615},{"id":3895,"depth":564,"text":3896},{"id":4182,"depth":541,"text":4185,"children":11723},[11724,11725,11726],{"id":4474,"depth":564,"text":4475},{"id":4716,"depth":564,"text":4717},{"id":4942,"depth":564,"text":4943},{"id":5167,"depth":541,"text":5170,"children":11728},[11729,11730],{"id":5483,"depth":564,"text":5484},{"id":5740,"depth":564,"text":5741},{"id":5970,"depth":541,"text":5973,"children":11732},[11733,11734],{"id":6286,"depth":564,"text":6287},{"id":6560,"depth":564,"text":6561},{"id":6851,"depth":541,"text":6852},{"id":8184,"depth":541,"text":8185,"children":11737},[11738,11739],{"id":8188,"depth":564,"text":8189},{"id":10764,"depth":564,"text":10765},{"id":11416,"depth":541,"text":11417},{"id":11603,"depth":541,"text":11604},"Create and manage typography design tokens with CSS variables for consistent text styling across your application.","md",null,{},{"title":216,"icon":7},{"title":409,"description":11742},{"loc":217},"BttfdAWZJEv7r6SbJPdI3YjAVV1MtzBFhsumN593EsQ",[11751,11753],{"title":212,"path":213,"stem":214,"description":11752,"icon":7,"children":-1},"Create and manage spacing design tokens with CSS variables for consistent layout spacing, padding, margins, and gaps across your application.",{"title":220,"path":221,"stem":222,"description":11754,"icon":7,"children":-1},"Create and manage z-index design tokens with CSS variables for consistent stacking order across your application.",1776621133962]