[{"data":1,"prerenderedAt":7538},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-design-tokens-box-shadows":682,"-docs-theme-design-tokens-box-shadows-surround":7533},{"gettingStarted":4,"api":71,"theme":162},[5,36,51],{"title":6,"icon":7,"path":8,"stem":9,"children":10,"page":7},"Getting Started",false,"\u002Fdocs\u002Fgetting-started","docs\u002Fgetting-started",[11,16,21,26,31],{"title":12,"path":13,"stem":14,"icon":15},"Introduction","\u002Fdocs\u002Fgetting-started\u002Fintroduction","docs\u002Fgetting-started\u002F01.introduction","i-lucide-house",{"title":17,"path":18,"stem":19,"icon":20},"Installation","\u002Fdocs\u002Fgetting-started\u002Finstallation","docs\u002Fgetting-started\u002F02.installation","i-lucide-download",{"title":22,"path":23,"stem":24,"icon":25},"Guides","\u002Fdocs\u002Fgetting-started\u002Fguides","docs\u002Fgetting-started\u002F03.guides","i-lucide-book-open",{"title":27,"path":28,"stem":29,"icon":30},"Comparisons","\u002Fdocs\u002Fgetting-started\u002Fcomparisons","docs\u002Fgetting-started\u002F06.comparisons","i-lucide-file-diff",{"title":32,"path":33,"stem":34,"icon":35},"Licensing","\u002Fdocs\u002Fgetting-started\u002Flicensing","docs\u002Fgetting-started\u002F07.licensing","i-lucide-scale",{"title":37,"icon":7,"path":38,"stem":39,"children":40,"page":7},"Tooling","\u002Fdocs\u002Fgetting-started\u002Ftooling","docs\u002Fgetting-started\u002Ftooling",[41,46],{"title":42,"path":43,"stem":44,"icon":45},"CLI Reference","\u002Fdocs\u002Fgetting-started\u002Ftooling\u002Fcli","docs\u002Fgetting-started\u002Ftooling\u002F01.cli","i-lucide-square-terminal",{"title":47,"path":48,"stem":49,"icon":50},"Utility Scanner","\u002Fdocs\u002Fgetting-started\u002Ftooling\u002Fscanner","docs\u002Fgetting-started\u002Ftooling\u002F02.scanner","i-lucide-view",{"title":52,"icon":7,"path":53,"stem":54,"children":55,"page":7},"Integrations","\u002Fdocs\u002Fgetting-started\u002Fintegrations","docs\u002Fgetting-started\u002Fintegrations",[56,61,66],{"title":57,"path":58,"stem":59,"icon":60},"DTCG","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fdtcg","docs\u002Fgetting-started\u002Fintegrations\u002F01.dtcg","i-lucide-square-code",{"title":62,"path":63,"stem":64,"icon":65},"Figma Plugin","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Ffigma-plugin","docs\u002Fgetting-started\u002Fintegrations\u002F02.figma-plugin","i-simple-icons-figma",{"title":67,"path":68,"stem":69,"icon":70},"Storybook","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fstorybook","docs\u002Fgetting-started\u002Fintegrations\u002F03.storybook","i-simple-icons-storybook",[72],{"title":73,"path":74,"stem":75,"children":76,"icon":7},"API Reference","\u002Fdocs\u002Fapi","docs\u002Fapi\u002F00.index",[77,80,85,90,95,100,105,110,115,120,125,130,145,150,155,160],{"title":78,"path":74,"stem":75,"icon":79},"Overview","i-lucide-book-text",{"title":81,"path":82,"stem":83,"icon":84},"Instance","\u002Fdocs\u002Fapi\u002Finstance","docs\u002Fapi\u002F01.instance","i-lucide-cloud-lightning",{"title":86,"path":87,"stem":88,"icon":89},"Variables","\u002Fdocs\u002Fapi\u002Fvariables","docs\u002Fapi\u002F02.variables","i-lucide-variable",{"title":91,"path":92,"stem":93,"icon":94},"Selectors","\u002Fdocs\u002Fapi\u002Fselectors","docs\u002Fapi\u002F03.selectors","i-lucide-scan-text",{"title":96,"path":97,"stem":98,"icon":99},"At-Rules","\u002Fdocs\u002Fapi\u002Fat-rules","docs\u002Fapi\u002F04.at-rules","i-lucide-at-sign",{"title":101,"path":102,"stem":103,"icon":104},"Media Queries","\u002Fdocs\u002Fapi\u002Fmedia-queries","docs\u002Fapi\u002F05.media-queries","i-lucide-image-upscale",{"title":106,"path":107,"stem":108,"icon":109},"Keyframes","\u002Fdocs\u002Fapi\u002Fkeyframes","docs\u002Fapi\u002F06.keyframes","i-lucide-square-play",{"title":111,"path":112,"stem":113,"icon":114},"Interpolation","\u002Fdocs\u002Fapi\u002Finterpolation","docs\u002Fapi\u002F07.interpolation","i-lucide-wrap-text",{"title":116,"path":117,"stem":118,"icon":119},"Utilities","\u002Fdocs\u002Fapi\u002Futilities","docs\u002Fapi\u002F08.utilities","i-lucide-sparkles",{"title":121,"path":122,"stem":123,"icon":124},"Utility Modifiers","\u002Fdocs\u002Fapi\u002Futility-modifiers","docs\u002Fapi\u002F09.utility-modifiers","i-lucide-align-horizontal-justify-center",{"title":126,"path":127,"stem":128,"icon":129},"Themes","\u002Fdocs\u002Fapi\u002Fthemes","docs\u002Fapi\u002F10.themes","i-lucide-paintbrush",{"title":131,"path":132,"stem":133,"children":134,"icon":144},"Recipes","\u002Fdocs\u002Fapi\u002Frecipes","docs\u002Fapi\u002F11.recipes\u002F00.index",[135,136,140],{"title":78,"path":132,"stem":133},{"title":137,"path":138,"stem":139},"Runtime","\u002Fdocs\u002Fapi\u002Frecipes\u002Fruntime","docs\u002Fapi\u002F11.recipes\u002F01.runtime",{"title":141,"path":142,"stem":143},"Output Format","\u002Fdocs\u002Fapi\u002Frecipes\u002Foutput-format","docs\u002Fapi\u002F11.recipes\u002F02.output-format","i-lucide-chef-hat",{"title":146,"path":147,"stem":148,"icon":149},"Composables","\u002Fdocs\u002Fapi\u002Fcomposables","docs\u002Fapi\u002F12.composables","i-lucide-component",{"title":151,"path":152,"stem":153,"icon":154},"Imports","\u002Fdocs\u002Fapi\u002Fimports","docs\u002Fapi\u002F13.imports","i-lucide-file-input",{"title":156,"path":157,"stem":158,"icon":159},"Merging","\u002Fdocs\u002Fapi\u002Fmerging","docs\u002Fapi\u002F13.merging","i-lucide-squares-intersect",{"title":151,"path":152,"stem":161,"icon":154},"docs\u002Fapi\u002F14.imports",[163,243,357,558,635],{"title":164,"path":165,"stem":166,"children":167,"icon":7},"Design Tokens","\u002Fdocs\u002Ftheme\u002Fdesign-tokens","docs\u002Ftheme\u002Fdesign-tokens\u002F00.index",[168,169,174,179,184,189,194,199,204,209,224,228,233,238],{"title":78,"path":165,"stem":166,"icon":79},{"title":170,"path":171,"stem":172,"icon":173},"Preset","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fpreset","docs\u002Ftheme\u002Fdesign-tokens\u002F01.preset","i-lucide-package",{"title":175,"path":176,"stem":177,"icon":178},"Border Radiuses","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fborder-radiuses","docs\u002Ftheme\u002Fdesign-tokens\u002F02.border-radiuses","i-lucide-square-round-corner",{"title":180,"path":181,"stem":182,"icon":183},"Borders","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fborders","docs\u002Ftheme\u002Fdesign-tokens\u002F03.borders","i-lucide-square-dashed-top-solid",{"title":185,"path":186,"stem":187,"icon":188},"Box Shadows","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fbox-shadows","docs\u002Ftheme\u002Fdesign-tokens\u002F04.box-shadows","i-lucide-layers-2",{"title":190,"path":191,"stem":192,"icon":193},"Breakpoints","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fbreakpoints","docs\u002Ftheme\u002Fdesign-tokens\u002F05.breakpoints","i-lucide-monitor-smartphone",{"title":195,"path":196,"stem":197,"icon":198},"Colors","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fcolors","docs\u002Ftheme\u002Fdesign-tokens\u002F06.colors","i-lucide-palette",{"title":200,"path":201,"stem":202,"icon":203},"Duration","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fduration","docs\u002Ftheme\u002Fdesign-tokens\u002F07.duration","i-lucide-timer",{"title":205,"path":206,"stem":207,"icon":208},"Easing","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Feasing","docs\u002Ftheme\u002Fdesign-tokens\u002F08.easing","i-lucide-spline",{"title":210,"path":211,"stem":212,"children":213,"icon":104,"defaultOpen":223},"Fluid Design","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ffluid-design","docs\u002Ftheme\u002Fdesign-tokens\u002F09.fluid-design\u002F01.index",[214,215,219],{"title":78,"path":211,"stem":212},{"title":216,"path":217,"stem":218},"Fluid Viewport","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ffluid-design\u002Fviewport","docs\u002Ftheme\u002Fdesign-tokens\u002F09.fluid-design\u002F02.viewport",{"title":220,"path":221,"stem":222},"Fluid Typography","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ffluid-design\u002Ftypography","docs\u002Ftheme\u002Fdesign-tokens\u002F09.fluid-design\u002F03.typography",true,{"title":225,"path":226,"stem":227,"icon":35},"Scales","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fscales","docs\u002Ftheme\u002Fdesign-tokens\u002F10.scales",{"title":229,"path":230,"stem":231,"icon":232},"Spacing","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fspacing","docs\u002Ftheme\u002Fdesign-tokens\u002F11.spacing","i-lucide-move-horizontal",{"title":234,"path":235,"stem":236,"icon":237},"Typography","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ftypography","docs\u002Ftheme\u002Fdesign-tokens\u002F12.typography","i-lucide-type",{"title":239,"path":240,"stem":241,"icon":242},"Z-Index","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fz-index","docs\u002Ftheme\u002Fdesign-tokens\u002F13.z-index","i-lucide-layers",{"title":244,"path":245,"stem":246,"children":247,"icon":7},"Elements","\u002Fdocs\u002Ftheme\u002Felements","docs\u002Ftheme\u002Felements\u002F00.index",[248,249,252,259,281,301,313,329,341],{"title":78,"path":245,"stem":246,"icon":79},{"title":170,"path":250,"stem":251,"icon":173},"\u002Fdocs\u002Ftheme\u002Felements\u002Fpreset","docs\u002Ftheme\u002Felements\u002F01.preset",{"title":253,"icon":242,"defaultOpen":223,"page":7,"children":254},"Base",[255],{"title":256,"path":257,"stem":258,"icon":7},"Body","\u002Fdocs\u002Ftheme\u002Felements\u002Fbody","docs\u002Ftheme\u002Felements\u002F02.base\u002F00.body",{"title":234,"icon":237,"defaultOpen":223,"page":7,"children":260},[261,265,269,273,277],{"title":262,"path":263,"stem":264,"icon":7},"Headings","\u002Fdocs\u002Ftheme\u002Felements\u002Fheadings","docs\u002Ftheme\u002Felements\u002F03.typography\u002F01.headings",{"title":266,"path":267,"stem":268,"icon":7},"Paragraphs","\u002Fdocs\u002Ftheme\u002Felements\u002Fparagraphs","docs\u002Ftheme\u002Felements\u002F03.typography\u002F02.paragraphs",{"title":270,"path":271,"stem":272,"icon":7},"Links","\u002Fdocs\u002Ftheme\u002Felements\u002Flinks","docs\u002Ftheme\u002Felements\u002F03.typography\u002F03.links",{"title":274,"path":275,"stem":276,"icon":7},"Lists","\u002Fdocs\u002Ftheme\u002Felements\u002Flists","docs\u002Ftheme\u002Felements\u002F03.typography\u002F04.lists",{"title":278,"path":279,"stem":280,"icon":7},"Definition Lists","\u002Fdocs\u002Ftheme\u002Felements\u002Fdefinition-lists","docs\u002Ftheme\u002Felements\u002F03.typography\u002F05.definition-lists",{"title":282,"icon":283,"defaultOpen":223,"page":7,"children":284},"Inline Text","i-lucide-whole-word",[285,289,293,297],{"title":286,"path":287,"stem":288,"icon":7},"Abbreviation","\u002Fdocs\u002Ftheme\u002Felements\u002Fabbreviation","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F00.abbreviation",{"title":290,"path":291,"stem":292,"icon":7},"Code","\u002Fdocs\u002Ftheme\u002Felements\u002Fcode","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F01.code",{"title":294,"path":295,"stem":296,"icon":7},"Kbd","\u002Fdocs\u002Ftheme\u002Felements\u002Fkbd","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F02.kbd",{"title":298,"path":299,"stem":300,"icon":7},"Mark","\u002Fdocs\u002Ftheme\u002Felements\u002Fmark","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F03.mark",{"title":302,"icon":303,"defaultOpen":223,"page":7,"children":304},"Media & Embeds","i-lucide-image",[305,309],{"title":306,"path":307,"stem":308,"icon":7},"Image","\u002Fdocs\u002Ftheme\u002Felements\u002Fimage","docs\u002Ftheme\u002Felements\u002F05.media\u002F00.image",{"title":310,"path":311,"stem":312,"icon":7},"Iframe","\u002Fdocs\u002Ftheme\u002Felements\u002Fiframe","docs\u002Ftheme\u002Felements\u002F05.media\u002F01.iframe",{"title":314,"icon":315,"defaultOpen":223,"page":7,"children":316},"Forms & Tables","i-lucide-table",[317,321,325],{"title":318,"path":319,"stem":320,"icon":7},"Caption","\u002Fdocs\u002Ftheme\u002Felements\u002Fcaption","docs\u002Ftheme\u002Felements\u002F06.forms-tables\u002F00.caption",{"title":322,"path":323,"stem":324,"icon":7},"Legend","\u002Fdocs\u002Ftheme\u002Felements\u002Flegend","docs\u002Ftheme\u002Felements\u002F06.forms-tables\u002F01.legend",{"title":326,"path":327,"stem":328,"icon":7},"Output","\u002Fdocs\u002Ftheme\u002Felements\u002Foutput","docs\u002Ftheme\u002Felements\u002F06.forms-tables\u002F02.output",{"title":330,"icon":331,"defaultOpen":223,"page":7,"children":332},"Structure","i-lucide-separator-horizontal",[333,337],{"title":334,"path":335,"stem":336,"icon":7},"Address","\u002Fdocs\u002Ftheme\u002Felements\u002Faddress","docs\u002Ftheme\u002Felements\u002F07.structure\u002F00.address",{"title":338,"path":339,"stem":340,"icon":7},"Horizontal Rule","\u002Fdocs\u002Ftheme\u002Felements\u002Fhorizontal-rule","docs\u002Ftheme\u002Felements\u002F07.structure\u002F01.horizontal-rule",{"title":342,"icon":343,"defaultOpen":223,"page":7,"children":344},"States","i-lucide-mouse-pointer-click",[345,349,353],{"title":346,"path":347,"stem":348,"icon":7},"Focus","\u002Fdocs\u002Ftheme\u002Felements\u002Ffocus","docs\u002Ftheme\u002Felements\u002F08.states\u002F00.focus",{"title":350,"path":351,"stem":352,"icon":7},"Selection","\u002Fdocs\u002Ftheme\u002Felements\u002Fselection","docs\u002Ftheme\u002Felements\u002F08.states\u002F01.selection",{"title":354,"path":355,"stem":356,"icon":7},"Summary","\u002Fdocs\u002Ftheme\u002Felements\u002Fsummary","docs\u002Ftheme\u002Felements\u002F08.states\u002F02.summary",{"title":358,"path":359,"stem":360,"children":361,"icon":7},"Components","\u002Fdocs\u002Ftheme\u002Fcomponents","docs\u002Ftheme\u002Fcomponents\u002F00.index",[362,363,375,399,427,491,518,550],{"title":78,"path":359,"stem":360,"icon":79},{"title":364,"icon":365,"defaultOpen":223,"page":7,"children":366},"Actions","i-lucide-square-mouse-pointer",[367,371],{"title":368,"path":369,"stem":370,"icon":7},"Button","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fbutton","docs\u002Ftheme\u002Fcomponents\u002F02.actions\u002F00.button",{"title":372,"path":373,"stem":374,"icon":7},"Hamburger Menu","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fhamburger-menu","docs\u002Ftheme\u002Fcomponents\u002F02.actions\u002F01.hamburger-menu",{"title":376,"icon":377,"defaultOpen":223,"page":7,"children":378},"Navigation","i-lucide-navigation",[379,383,387,391,395],{"title":380,"path":381,"stem":382,"icon":7},"Breadcrumb","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fbreadcrumb","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F00.breadcrumb",{"title":384,"path":385,"stem":386,"icon":7},"Nav","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fnav","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F01.nav",{"title":388,"path":389,"stem":390,"icon":7},"Pagination","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fpagination","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F02.pagination",{"title":392,"path":393,"stem":394,"icon":7},"Sidebar","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fsidebar","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F03.sidebar",{"title":396,"path":397,"stem":398,"icon":7},"Tabs","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftabs","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F04.tabs",{"title":400,"icon":401,"defaultOpen":223,"page":7,"children":402},"Feedback","i-lucide-megaphone",[403,407,411,415,419,423],{"title":404,"path":405,"stem":406,"icon":7},"Badge","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fbadge","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F00.badge",{"title":408,"path":409,"stem":410,"icon":7},"Callout","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcallout","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F01.callout",{"title":412,"path":413,"stem":414,"icon":7},"Chip","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fchip","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F02.chip",{"title":416,"path":417,"stem":418,"icon":7},"Progress","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fprogress","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F03.progress",{"title":420,"path":421,"stem":422,"icon":7},"Skeleton","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fskeleton","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F04.skeleton",{"title":424,"path":425,"stem":426,"icon":7},"Spinner","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fspinner","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F05.spinner",{"title":428,"icon":429,"defaultOpen":223,"page":7,"children":430},"Forms","i-lucide-text-cursor-input",[431,435,439,443,447,451,455,459,463,467,471,475,479,483,487],{"title":432,"path":433,"stem":434,"icon":7},"Calendar","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcalendar","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F00.calendar",{"title":436,"path":437,"stem":438,"icon":7},"Checkbox","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcheckbox","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F01.checkbox",{"title":440,"path":441,"stem":442,"icon":7},"Checkbox Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcheckbox-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F02.checkbox-group",{"title":444,"path":445,"stem":446,"icon":7},"Color Picker","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcolor-picker","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F03.color-picker",{"title":448,"path":449,"stem":450,"icon":7},"Field Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ffield-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F04.field-group",{"title":452,"path":453,"stem":454,"icon":7},"Input","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Finput","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F05.input",{"title":456,"path":457,"stem":458,"icon":7},"OTP","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fotp","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F06.otp",{"title":460,"path":461,"stem":462,"icon":7},"Radio","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fradio","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F07.radio",{"title":464,"path":465,"stem":466,"icon":7},"Radio Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fradio-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F08.radio-group",{"title":468,"path":469,"stem":470,"icon":7},"Select","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fselect","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F09.select",{"title":472,"path":473,"stem":474,"icon":7},"Slider","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fslider","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F10.slider",{"title":476,"path":477,"stem":478,"icon":7},"Switch","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fswitch","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F11.switch",{"title":480,"path":481,"stem":482,"icon":7},"Textarea","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftextarea","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F12.textarea",{"title":484,"path":485,"stem":486,"icon":7},"Toggle","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftoggle","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F13.toggle",{"title":488,"path":489,"stem":490,"icon":7},"Toggle Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftoggle-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F14.toggle-group",{"title":492,"icon":242,"defaultOpen":223,"page":7,"children":493},"Overlays",[494,498,502,506,510,514],{"title":495,"path":496,"stem":497,"icon":7},"ContextMenu","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcontext-menu","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F00.context-menu",{"title":499,"path":500,"stem":501,"icon":7},"Drawer","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fdrawer","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F01.drawer",{"title":503,"path":504,"stem":505,"icon":7},"Dropdown","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fdropdown","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F02.dropdown",{"title":507,"path":508,"stem":509,"icon":7},"Modal","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fmodal","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F03.modal",{"title":511,"path":512,"stem":513,"icon":7},"Popover","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fpopover","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F04.popover",{"title":515,"path":516,"stem":517,"icon":7},"Tooltip","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftooltip","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F05.tooltip",{"title":519,"icon":520,"defaultOpen":223,"page":7,"children":521},"Layout","i-lucide-layout",[522,526,530,534,538,542,546],{"title":523,"path":524,"stem":525,"icon":7},"Accordion","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Faccordion","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F00.accordion",{"title":527,"path":528,"stem":529,"icon":7},"Avatar","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Favatar","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F01.avatar",{"title":531,"path":532,"stem":533,"icon":7},"Avatar Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Favatar-group","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F02.avatar-group",{"title":535,"path":536,"stem":537,"icon":7},"Card","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcard","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F03.card",{"title":539,"path":540,"stem":541,"icon":7},"Media","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fmedia","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F04.media",{"title":543,"path":544,"stem":545,"icon":7},"PageHero","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fpage-hero","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F05.page-hero",{"title":547,"path":548,"stem":549,"icon":7},"Placeholder","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fplaceholder","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F06.placeholder",{"title":551,"icon":552,"defaultOpen":223,"page":7,"children":553},"AI Chat","i-lucide-message-circle",[554],{"title":555,"path":556,"stem":557,"icon":7},"ChatMessage","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fchat-message","docs\u002Ftheme\u002Fcomponents\u002F08.ai-chat\u002F00.chat-message",{"title":116,"path":559,"stem":560,"children":561,"icon":7},"\u002Fdocs\u002Ftheme\u002Futilities","docs\u002Ftheme\u002Futilities\u002F00.index",[562,563,567,572,577,581,584,588,593,598,602,605,610,613,618,622,627,632],{"title":78,"path":559,"stem":560,"icon":79},{"title":564,"path":565,"stem":566,"icon":173},"Presets","\u002Fdocs\u002Ftheme\u002Futilities\u002Fpreset","docs\u002Ftheme\u002Futilities\u002F01.preset",{"title":568,"path":569,"stem":570,"icon":571},"Accessibility","\u002Fdocs\u002Ftheme\u002Futilities\u002Faccessibility","docs\u002Ftheme\u002Futilities\u002F02.accessibility","i-lucide-accessibility",{"title":573,"path":574,"stem":575,"icon":576},"Animations","\u002Fdocs\u002Ftheme\u002Futilities\u002Fanimations","docs\u002Ftheme\u002Futilities\u002F03.animations","i-lucide-loader-circle",{"title":578,"path":579,"stem":580,"icon":303},"Backgrounds","\u002Fdocs\u002Ftheme\u002Futilities\u002Fbackgrounds","docs\u002Ftheme\u002Futilities\u002F04.backgrounds",{"title":180,"path":582,"stem":583,"icon":183},"\u002Fdocs\u002Ftheme\u002Futilities\u002Fborders","docs\u002Ftheme\u002Futilities\u002F05.borders",{"title":585,"path":586,"stem":587,"icon":119},"Effects","\u002Fdocs\u002Ftheme\u002Futilities\u002Feffects","docs\u002Ftheme\u002Futilities\u002F06.effects",{"title":589,"path":590,"stem":591,"icon":592},"Filters","\u002Fdocs\u002Ftheme\u002Futilities\u002Ffilters","docs\u002Ftheme\u002Futilities\u002F07.filters","i-lucide-aperture",{"title":594,"path":595,"stem":596,"icon":597},"Flexbox & Grid","\u002Fdocs\u002Ftheme\u002Futilities\u002Fflexbox-grid","docs\u002Ftheme\u002Futilities\u002F08.flexbox-grid","i-lucide-layout-grid",{"title":599,"path":600,"stem":601,"icon":343},"Interactivity","\u002Fdocs\u002Ftheme\u002Futilities\u002Finteractivity","docs\u002Ftheme\u002Futilities\u002F09.interactivity",{"title":519,"path":603,"stem":604,"icon":520},"\u002Fdocs\u002Ftheme\u002Futilities\u002Flayout","docs\u002Ftheme\u002Futilities\u002F10.layout",{"title":606,"path":607,"stem":608,"icon":609},"Sizing","\u002Fdocs\u002Ftheme\u002Futilities\u002Fsizing","docs\u002Ftheme\u002Futilities\u002F11.sizing","i-lucide-scaling",{"title":229,"path":611,"stem":612,"icon":232},"\u002Fdocs\u002Ftheme\u002Futilities\u002Fspacing","docs\u002Ftheme\u002Futilities\u002F12.spacing",{"title":614,"path":615,"stem":616,"icon":617},"SVG","\u002Fdocs\u002Ftheme\u002Futilities\u002Fsvg","docs\u002Ftheme\u002Futilities\u002F13.svg","i-lucide-pen-tool",{"title":619,"path":620,"stem":621,"icon":315},"Tables","\u002Fdocs\u002Ftheme\u002Futilities\u002Ftables","docs\u002Ftheme\u002Futilities\u002F14.tables",{"title":623,"path":624,"stem":625,"icon":626},"Transforms","\u002Fdocs\u002Ftheme\u002Futilities\u002Ftransforms","docs\u002Ftheme\u002Futilities\u002F15.transforms","i-lucide-rotate-3d",{"title":628,"path":629,"stem":630,"icon":631},"Transitions","\u002Fdocs\u002Ftheme\u002Futilities\u002Ftransitions","docs\u002Ftheme\u002Futilities\u002F16.transitions","i-lucide-arrow-left-right",{"title":234,"path":633,"stem":634,"icon":237},"\u002Fdocs\u002Ftheme\u002Futilities\u002Ftypography","docs\u002Ftheme\u002Futilities\u002F17.typography",{"title":636,"path":637,"stem":638,"children":639,"icon":7},"Modifiers","\u002Fdocs\u002Ftheme\u002Fmodifiers","docs\u002Ftheme\u002Fmodifiers\u002F00.index",[640,641,644,648,653,657,662,667,672,677],{"title":78,"path":637,"stem":638,"icon":79},{"title":564,"path":642,"stem":643,"icon":173},"\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fpreset","docs\u002Ftheme\u002Fmodifiers\u002F01.preset",{"title":645,"path":646,"stem":647,"icon":571},"ARIA State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Faria-state","docs\u002Ftheme\u002Fmodifiers\u002F02.aria-state",{"title":649,"path":650,"stem":651,"icon":652},"Directional","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fdirectional","docs\u002Ftheme\u002Fmodifiers\u002F03.directional","i-lucide-flip-horizontal",{"title":654,"path":655,"stem":656,"icon":429},"Form State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fform-state","docs\u002Ftheme\u002Fmodifiers\u002F04.form-state",{"title":658,"path":659,"stem":660,"icon":661},"Media & Preferences","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fmedia-preferences","docs\u002Ftheme\u002Fmodifiers\u002F05.media-preferences","i-lucide-sun-moon",{"title":663,"path":664,"stem":665,"icon":666},"Other State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fother-state","docs\u002Ftheme\u002Fmodifiers\u002F06.other-state","i-lucide-toggle-left",{"title":668,"path":669,"stem":670,"icon":671},"Pseudo-Elements","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fpseudo-elements","docs\u002Ftheme\u002Fmodifiers\u002F07.pseudo-elements","i-lucide-box-select",{"title":673,"path":674,"stem":675,"icon":676},"Pseudo-State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fpseudo-state","docs\u002Ftheme\u002Fmodifiers\u002F08.pseudo-state","i-lucide-pointer",{"title":678,"path":679,"stem":680,"icon":681},"Structural","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fstructural","docs\u002Ftheme\u002Fmodifiers\u002F09.structural","i-lucide-list-ordered",{"id":683,"title":684,"body":685,"description":7527,"extension":1725,"links":7528,"meta":7529,"navigation":7530,"path":186,"seo":7531,"stem":187,"__hash__":7532},"docs_theme\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002F04.box-shadows.md","Box Shadows Design Tokens",{"type":686,"value":687,"toc":7511},"minimark",[688,714,718,722,726,729,769,774,777,1690,1693,1767,1784,1789,1796,2566,2570,2577,2998,3018,3025,3029,3032,3922,3937,3941,3945,3948,5888,5892,5895,6641,6646,6650,6653,7327,7331,7391,7396,7400,7507],[689,690,691,695,696,700,701,705,706,709,710,713],"note",{"icon":173},[692,693,694],"strong",{},"Part of the Design Tokens Preset:"," ",[697,698,699],"code",{},"useBoxShadowDesignTokens"," is included in the ",[702,703,704],"a",{"href":171},"Design Tokens Preset"," (",[697,707,708],{},"useDesignTokensPreset",") and you can configure it through the preset's ",[697,711,712],{},"boxShadow"," option. For most projects, applying it via the preset is the recommended approach.",[715,716,78],"h2",{"id":717},"overview",[719,720,721],"p",{},"The box shadow composable helps you create comprehensive shadow systems with minimal code. It generates box-shadow variables that can be easily referenced throughout your application, enabling flexible theming and consistent visual hierarchy for your components through elevation and depth.",[715,723,725],{"id":724},"why-use-box-shadow-composables","Why use box shadow composables?",[719,727,728],{},"Box shadow composables help you:",[730,731,732,739,745,751,757,763],"ul",{},[733,734,735,738],"li",{},[692,736,737],{},"Establish visual hierarchy",": Create consistent elevation systems that help users understand interface depth and layering.",[733,740,741,744],{},[692,742,743],{},"Enable flexible theming",": Override shadow variables to instantly update component shadows across your application.",[733,746,747,750],{},[692,748,749],{},"Dynamic shadow colors",": Use a single color variable to control shadow colors throughout your entire shadow system.",[733,752,753,756],{},[692,754,755],{},"Maintain consistency",": Use semantic names to ensure consistent shadow usage throughout your design system.",[733,758,759,762],{},[692,760,761],{},"Reduce repetition",": Reference shadow variables instead of repeating complex CSS values throughout your stylesheets.",[733,764,765,768],{},[692,766,767],{},"Simplify elevation systems",": Define your entire elevation scale in one place for easy management and updates.",[715,770,772],{"id":771},"useboxshadowdesigntokens",[697,773,699],{},[719,775,776],{},"Styleframe provides a set of carefully crafted default shadow values that you can use out of the box:",[778,779,780,1009],"tabs",{},[781,782,784],"tabs-item",{"icon":783,"label":290},"i-lucide-code",[785,786,792],"pre",{"className":787,"code":788,"filename":789,"language":790,"meta":791,"style":791},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from 'styleframe';\nimport { useBoxShadowDesignTokens } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst {\n    boxShadow,\n    boxShadowNone,\n    boxShadowXs,\n    boxShadowSm,\n    boxShadowMd,\n    boxShadowLg,\n    boxShadowXl,\n    boxShadow2xl,\n    boxShadowInner,\n    boxShadowRing,\n} = useBoxShadowDesignTokens(s);\n\nexport default s;\n","styleframe.config.ts","ts","",[697,793,794,830,853,859,880,885,893,902,910,918,926,934,942,950,958,966,974,990,995],{"__ignoreMap":791},[795,796,799,803,807,811,814,817,820,824,827],"span",{"class":797,"line":798},"line",1,[795,800,802],{"class":801},"s7zQu","import",[795,804,806],{"class":805},"sMK4o"," {",[795,808,810],{"class":809},"sTEyZ"," styleframe",[795,812,813],{"class":805}," }",[795,815,816],{"class":801}," from",[795,818,819],{"class":805}," '",[795,821,823],{"class":822},"sfazB","styleframe",[795,825,826],{"class":805},"'",[795,828,829],{"class":805},";\n",[795,831,833,835,837,840,842,844,846,849,851],{"class":797,"line":832},2,[795,834,802],{"class":801},[795,836,806],{"class":805},[795,838,839],{"class":809}," useBoxShadowDesignTokens",[795,841,813],{"class":805},[795,843,816],{"class":801},[795,845,819],{"class":805},[795,847,848],{"class":822},"@styleframe\u002Ftheme",[795,850,826],{"class":805},[795,852,829],{"class":805},[795,854,856],{"class":797,"line":855},3,[795,857,858],{"emptyLinePlaceholder":223},"\n",[795,860,862,866,869,872,875,878],{"class":797,"line":861},4,[795,863,865],{"class":864},"spNyl","const",[795,867,868],{"class":809}," s ",[795,870,871],{"class":805},"=",[795,873,810],{"class":874},"s2Zo4",[795,876,877],{"class":809},"()",[795,879,829],{"class":805},[795,881,883],{"class":797,"line":882},5,[795,884,858],{"emptyLinePlaceholder":223},[795,886,888,890],{"class":797,"line":887},6,[795,889,865],{"class":864},[795,891,892],{"class":805}," {\n",[795,894,896,899],{"class":797,"line":895},7,[795,897,898],{"class":809},"    boxShadow",[795,900,901],{"class":805},",\n",[795,903,905,908],{"class":797,"line":904},8,[795,906,907],{"class":809},"    boxShadowNone",[795,909,901],{"class":805},[795,911,913,916],{"class":797,"line":912},9,[795,914,915],{"class":809},"    boxShadowXs",[795,917,901],{"class":805},[795,919,921,924],{"class":797,"line":920},10,[795,922,923],{"class":809},"    boxShadowSm",[795,925,901],{"class":805},[795,927,929,932],{"class":797,"line":928},11,[795,930,931],{"class":809},"    boxShadowMd",[795,933,901],{"class":805},[795,935,937,940],{"class":797,"line":936},12,[795,938,939],{"class":809},"    boxShadowLg",[795,941,901],{"class":805},[795,943,945,948],{"class":797,"line":944},13,[795,946,947],{"class":809},"    boxShadowXl",[795,949,901],{"class":805},[795,951,953,956],{"class":797,"line":952},14,[795,954,955],{"class":809},"    boxShadow2xl",[795,957,901],{"class":805},[795,959,961,964],{"class":797,"line":960},15,[795,962,963],{"class":809},"    boxShadowInner",[795,965,901],{"class":805},[795,967,969,972],{"class":797,"line":968},16,[795,970,971],{"class":809},"    boxShadowRing",[795,973,901],{"class":805},[795,975,977,980,983,985,988],{"class":797,"line":976},17,[795,978,979],{"class":805},"}",[795,981,982],{"class":805}," =",[795,984,839],{"class":874},[795,986,987],{"class":809},"(s)",[795,989,829],{"class":805},[795,991,993],{"class":797,"line":992},18,[795,994,858],{"emptyLinePlaceholder":223},[795,996,998,1001,1004,1007],{"class":797,"line":997},19,[795,999,1000],{"class":801},"export",[795,1002,1003],{"class":801}," default",[795,1005,1006],{"class":809}," s",[795,1008,829],{"class":805},[781,1010,1011],{"icon":154,"label":326},[785,1012,1017],{"className":1013,"code":1014,"filename":1015,"language":1016,"meta":791,"style":791},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight",":root {\n    --box-shadow--none: none;\n    --box-shadow--xs: 0 1px 1px oklch(var(--box-shadow-color, 0 0 0) \u002F 0.12), 0 2px 2px -1px oklch(var(--box-shadow-color, 0 0 0) \u002F 0.06);\n    --box-shadow--sm: 0 1px 2px oklch(var(--box-shadow-color, 0 0 0) \u002F 0.14), 0 3px 6px -1px oklch(var(--box-shadow-color, 0 0 0) \u002F 0.10);\n    --box-shadow--md: 0 2px 4px oklch(var(--box-shadow-color, 0 0 0) \u002F 0.16), 0 8px 16px -4px oklch(var(--box-shadow-color, 0 0 0) \u002F 0.10);\n    --box-shadow--lg: 0 4px 8px oklch(var(--box-shadow-color, 0 0 0) \u002F 0.18), 0 16px 24px -8px oklch(var(--box-shadow-color, 0 0 0) \u002F 0.12);\n    --box-shadow--xl: 0 8px 12px oklch(var(--box-shadow-color, 0 0 0) \u002F 0.20), 0 24px 48px -12px oklch(var(--box-shadow-color, 0 0 0) \u002F 0.14);\n    --box-shadow--2xl: 0 12px 16px oklch(var(--box-shadow-color, 0 0 0) \u002F 0.22), 0 32px 64px -16px oklch(var(--box-shadow-color, 0 0 0) \u002F 0.16);\n    --box-shadow--inner: inset 0 1px 0 oklch(var(--box-shadow-color, 0 0 0) \u002F 0.08), inset 0 0 0 1px oklch(var(--box-shadow-color, 0 0 0) \u002F 0.06);\n    --box-shadow--ring: 0 0 0 1px oklch(var(--box-shadow-color, 0 0 0) \u002F 0.12), 0 1px 2px oklch(var(--box-shadow-color, 0 0 0) \u002F 0.08);\n    --box-shadow: var(--box-shadow--md);\n}\n","styleframe\u002Findex.css","css",[697,1018,1019,1029,1041,1130,1207,1285,1361,1438,1515,1595,1668,1685],{"__ignoreMap":791},[795,1020,1021,1024,1027],{"class":797,"line":798},[795,1022,1023],{"class":805},":",[795,1025,1026],{"class":864},"root",[795,1028,892],{"class":805},[795,1030,1031,1034,1036,1039],{"class":797,"line":832},[795,1032,1033],{"class":809},"    --box-shadow--none",[795,1035,1023],{"class":805},[795,1037,1038],{"class":809}," none",[795,1040,829],{"class":805},[795,1042,1043,1046,1048,1052,1055,1057,1060,1063,1066,1068,1071,1074,1076,1078,1080,1083,1086,1089,1092,1094,1097,1099,1102,1104,1106,1108,1110,1112,1114,1116,1118,1120,1122,1124,1127],{"class":797,"line":855},[795,1044,1045],{"class":809},"    --box-shadow--xs",[795,1047,1023],{"class":805},[795,1049,1051],{"class":1050},"sbssI"," 0",[795,1053,1054],{"class":1050}," 1px",[795,1056,1054],{"class":1050},[795,1058,1059],{"class":874}," oklch",[795,1061,1062],{"class":805},"(",[795,1064,1065],{"class":874},"var",[795,1067,1062],{"class":805},[795,1069,1070],{"class":809},"--box-shadow-color",[795,1072,1073],{"class":805},",",[795,1075,1051],{"class":1050},[795,1077,1051],{"class":1050},[795,1079,1051],{"class":1050},[795,1081,1082],{"class":805},")",[795,1084,1085],{"class":809}," \u002F ",[795,1087,1088],{"class":1050},"0.12",[795,1090,1091],{"class":805},"),",[795,1093,1051],{"class":1050},[795,1095,1096],{"class":1050}," 2px",[795,1098,1096],{"class":1050},[795,1100,1101],{"class":1050}," -1px",[795,1103,1059],{"class":874},[795,1105,1062],{"class":805},[795,1107,1065],{"class":874},[795,1109,1062],{"class":805},[795,1111,1070],{"class":809},[795,1113,1073],{"class":805},[795,1115,1051],{"class":1050},[795,1117,1051],{"class":1050},[795,1119,1051],{"class":1050},[795,1121,1082],{"class":805},[795,1123,1085],{"class":809},[795,1125,1126],{"class":1050},"0.06",[795,1128,1129],{"class":805},");\n",[795,1131,1132,1135,1137,1139,1141,1143,1145,1147,1149,1151,1153,1155,1157,1159,1161,1163,1165,1168,1170,1172,1175,1178,1180,1182,1184,1186,1188,1190,1192,1194,1196,1198,1200,1202,1205],{"class":797,"line":861},[795,1133,1134],{"class":809},"    --box-shadow--sm",[795,1136,1023],{"class":805},[795,1138,1051],{"class":1050},[795,1140,1054],{"class":1050},[795,1142,1096],{"class":1050},[795,1144,1059],{"class":874},[795,1146,1062],{"class":805},[795,1148,1065],{"class":874},[795,1150,1062],{"class":805},[795,1152,1070],{"class":809},[795,1154,1073],{"class":805},[795,1156,1051],{"class":1050},[795,1158,1051],{"class":1050},[795,1160,1051],{"class":1050},[795,1162,1082],{"class":805},[795,1164,1085],{"class":809},[795,1166,1167],{"class":1050},"0.14",[795,1169,1091],{"class":805},[795,1171,1051],{"class":1050},[795,1173,1174],{"class":1050}," 3px",[795,1176,1177],{"class":1050}," 6px",[795,1179,1101],{"class":1050},[795,1181,1059],{"class":874},[795,1183,1062],{"class":805},[795,1185,1065],{"class":874},[795,1187,1062],{"class":805},[795,1189,1070],{"class":809},[795,1191,1073],{"class":805},[795,1193,1051],{"class":1050},[795,1195,1051],{"class":1050},[795,1197,1051],{"class":1050},[795,1199,1082],{"class":805},[795,1201,1085],{"class":809},[795,1203,1204],{"class":1050},"0.10",[795,1206,1129],{"class":805},[795,1208,1209,1212,1214,1216,1218,1221,1223,1225,1227,1229,1231,1233,1235,1237,1239,1241,1243,1246,1248,1250,1253,1256,1259,1261,1263,1265,1267,1269,1271,1273,1275,1277,1279,1281,1283],{"class":797,"line":882},[795,1210,1211],{"class":809},"    --box-shadow--md",[795,1213,1023],{"class":805},[795,1215,1051],{"class":1050},[795,1217,1096],{"class":1050},[795,1219,1220],{"class":1050}," 4px",[795,1222,1059],{"class":874},[795,1224,1062],{"class":805},[795,1226,1065],{"class":874},[795,1228,1062],{"class":805},[795,1230,1070],{"class":809},[795,1232,1073],{"class":805},[795,1234,1051],{"class":1050},[795,1236,1051],{"class":1050},[795,1238,1051],{"class":1050},[795,1240,1082],{"class":805},[795,1242,1085],{"class":809},[795,1244,1245],{"class":1050},"0.16",[795,1247,1091],{"class":805},[795,1249,1051],{"class":1050},[795,1251,1252],{"class":1050}," 8px",[795,1254,1255],{"class":1050}," 16px",[795,1257,1258],{"class":1050}," -4px",[795,1260,1059],{"class":874},[795,1262,1062],{"class":805},[795,1264,1065],{"class":874},[795,1266,1062],{"class":805},[795,1268,1070],{"class":809},[795,1270,1073],{"class":805},[795,1272,1051],{"class":1050},[795,1274,1051],{"class":1050},[795,1276,1051],{"class":1050},[795,1278,1082],{"class":805},[795,1280,1085],{"class":809},[795,1282,1204],{"class":1050},[795,1284,1129],{"class":805},[795,1286,1287,1290,1292,1294,1296,1298,1300,1302,1304,1306,1308,1310,1312,1314,1316,1318,1320,1323,1325,1327,1329,1332,1335,1337,1339,1341,1343,1345,1347,1349,1351,1353,1355,1357,1359],{"class":797,"line":887},[795,1288,1289],{"class":809},"    --box-shadow--lg",[795,1291,1023],{"class":805},[795,1293,1051],{"class":1050},[795,1295,1220],{"class":1050},[795,1297,1252],{"class":1050},[795,1299,1059],{"class":874},[795,1301,1062],{"class":805},[795,1303,1065],{"class":874},[795,1305,1062],{"class":805},[795,1307,1070],{"class":809},[795,1309,1073],{"class":805},[795,1311,1051],{"class":1050},[795,1313,1051],{"class":1050},[795,1315,1051],{"class":1050},[795,1317,1082],{"class":805},[795,1319,1085],{"class":809},[795,1321,1322],{"class":1050},"0.18",[795,1324,1091],{"class":805},[795,1326,1051],{"class":1050},[795,1328,1255],{"class":1050},[795,1330,1331],{"class":1050}," 24px",[795,1333,1334],{"class":1050}," -8px",[795,1336,1059],{"class":874},[795,1338,1062],{"class":805},[795,1340,1065],{"class":874},[795,1342,1062],{"class":805},[795,1344,1070],{"class":809},[795,1346,1073],{"class":805},[795,1348,1051],{"class":1050},[795,1350,1051],{"class":1050},[795,1352,1051],{"class":1050},[795,1354,1082],{"class":805},[795,1356,1085],{"class":809},[795,1358,1088],{"class":1050},[795,1360,1129],{"class":805},[795,1362,1363,1366,1368,1370,1372,1375,1377,1379,1381,1383,1385,1387,1389,1391,1393,1395,1397,1400,1402,1404,1406,1409,1412,1414,1416,1418,1420,1422,1424,1426,1428,1430,1432,1434,1436],{"class":797,"line":895},[795,1364,1365],{"class":809},"    --box-shadow--xl",[795,1367,1023],{"class":805},[795,1369,1051],{"class":1050},[795,1371,1252],{"class":1050},[795,1373,1374],{"class":1050}," 12px",[795,1376,1059],{"class":874},[795,1378,1062],{"class":805},[795,1380,1065],{"class":874},[795,1382,1062],{"class":805},[795,1384,1070],{"class":809},[795,1386,1073],{"class":805},[795,1388,1051],{"class":1050},[795,1390,1051],{"class":1050},[795,1392,1051],{"class":1050},[795,1394,1082],{"class":805},[795,1396,1085],{"class":809},[795,1398,1399],{"class":1050},"0.20",[795,1401,1091],{"class":805},[795,1403,1051],{"class":1050},[795,1405,1331],{"class":1050},[795,1407,1408],{"class":1050}," 48px",[795,1410,1411],{"class":1050}," -12px",[795,1413,1059],{"class":874},[795,1415,1062],{"class":805},[795,1417,1065],{"class":874},[795,1419,1062],{"class":805},[795,1421,1070],{"class":809},[795,1423,1073],{"class":805},[795,1425,1051],{"class":1050},[795,1427,1051],{"class":1050},[795,1429,1051],{"class":1050},[795,1431,1082],{"class":805},[795,1433,1085],{"class":809},[795,1435,1167],{"class":1050},[795,1437,1129],{"class":805},[795,1439,1440,1443,1445,1447,1449,1451,1453,1455,1457,1459,1461,1463,1465,1467,1469,1471,1473,1476,1478,1480,1483,1486,1489,1491,1493,1495,1497,1499,1501,1503,1505,1507,1509,1511,1513],{"class":797,"line":904},[795,1441,1442],{"class":809},"    --box-shadow--2xl",[795,1444,1023],{"class":805},[795,1446,1051],{"class":1050},[795,1448,1374],{"class":1050},[795,1450,1255],{"class":1050},[795,1452,1059],{"class":874},[795,1454,1062],{"class":805},[795,1456,1065],{"class":874},[795,1458,1062],{"class":805},[795,1460,1070],{"class":809},[795,1462,1073],{"class":805},[795,1464,1051],{"class":1050},[795,1466,1051],{"class":1050},[795,1468,1051],{"class":1050},[795,1470,1082],{"class":805},[795,1472,1085],{"class":809},[795,1474,1475],{"class":1050},"0.22",[795,1477,1091],{"class":805},[795,1479,1051],{"class":1050},[795,1481,1482],{"class":1050}," 32px",[795,1484,1485],{"class":1050}," 64px",[795,1487,1488],{"class":1050}," -16px",[795,1490,1059],{"class":874},[795,1492,1062],{"class":805},[795,1494,1065],{"class":874},[795,1496,1062],{"class":805},[795,1498,1070],{"class":809},[795,1500,1073],{"class":805},[795,1502,1051],{"class":1050},[795,1504,1051],{"class":1050},[795,1506,1051],{"class":1050},[795,1508,1082],{"class":805},[795,1510,1085],{"class":809},[795,1512,1245],{"class":1050},[795,1514,1129],{"class":805},[795,1516,1517,1520,1522,1525,1528,1530,1532,1534,1536,1538,1540,1542,1544,1546,1548,1550,1552,1554,1557,1559,1561,1563,1565,1567,1569,1571,1573,1575,1577,1579,1581,1583,1585,1587,1589,1591,1593],{"class":797,"line":912},[795,1518,1519],{"class":809},"    --box-shadow--inner",[795,1521,1023],{"class":805},[795,1523,1524],{"class":809}," inset ",[795,1526,1527],{"class":1050},"0",[795,1529,1054],{"class":1050},[795,1531,1051],{"class":1050},[795,1533,1059],{"class":874},[795,1535,1062],{"class":805},[795,1537,1065],{"class":874},[795,1539,1062],{"class":805},[795,1541,1070],{"class":809},[795,1543,1073],{"class":805},[795,1545,1051],{"class":1050},[795,1547,1051],{"class":1050},[795,1549,1051],{"class":1050},[795,1551,1082],{"class":805},[795,1553,1085],{"class":809},[795,1555,1556],{"class":1050},"0.08",[795,1558,1091],{"class":805},[795,1560,1524],{"class":809},[795,1562,1527],{"class":1050},[795,1564,1051],{"class":1050},[795,1566,1051],{"class":1050},[795,1568,1054],{"class":1050},[795,1570,1059],{"class":874},[795,1572,1062],{"class":805},[795,1574,1065],{"class":874},[795,1576,1062],{"class":805},[795,1578,1070],{"class":809},[795,1580,1073],{"class":805},[795,1582,1051],{"class":1050},[795,1584,1051],{"class":1050},[795,1586,1051],{"class":1050},[795,1588,1082],{"class":805},[795,1590,1085],{"class":809},[795,1592,1126],{"class":1050},[795,1594,1129],{"class":805},[795,1596,1597,1600,1602,1604,1606,1608,1610,1612,1614,1616,1618,1620,1622,1624,1626,1628,1630,1632,1634,1636,1638,1640,1642,1644,1646,1648,1650,1652,1654,1656,1658,1660,1662,1664,1666],{"class":797,"line":920},[795,1598,1599],{"class":809},"    --box-shadow--ring",[795,1601,1023],{"class":805},[795,1603,1051],{"class":1050},[795,1605,1051],{"class":1050},[795,1607,1051],{"class":1050},[795,1609,1054],{"class":1050},[795,1611,1059],{"class":874},[795,1613,1062],{"class":805},[795,1615,1065],{"class":874},[795,1617,1062],{"class":805},[795,1619,1070],{"class":809},[795,1621,1073],{"class":805},[795,1623,1051],{"class":1050},[795,1625,1051],{"class":1050},[795,1627,1051],{"class":1050},[795,1629,1082],{"class":805},[795,1631,1085],{"class":809},[795,1633,1088],{"class":1050},[795,1635,1091],{"class":805},[795,1637,1051],{"class":1050},[795,1639,1054],{"class":1050},[795,1641,1096],{"class":1050},[795,1643,1059],{"class":874},[795,1645,1062],{"class":805},[795,1647,1065],{"class":874},[795,1649,1062],{"class":805},[795,1651,1070],{"class":809},[795,1653,1073],{"class":805},[795,1655,1051],{"class":1050},[795,1657,1051],{"class":1050},[795,1659,1051],{"class":1050},[795,1661,1082],{"class":805},[795,1663,1085],{"class":809},[795,1665,1556],{"class":1050},[795,1667,1129],{"class":805},[795,1669,1670,1673,1675,1678,1680,1683],{"class":797,"line":928},[795,1671,1672],{"class":809},"    --box-shadow",[795,1674,1023],{"class":805},[795,1676,1677],{"class":874}," var",[795,1679,1062],{"class":805},[795,1681,1682],{"class":809},"--box-shadow--md",[795,1684,1129],{"class":805},[795,1686,1687],{"class":797,"line":936},[795,1688,1689],{"class":805},"}\n",[719,1691,1692],{},"The default values include:",[730,1694,1695,1703,1711,1719,1727,1735,1743,1751,1759],{},[733,1696,1697,1702],{},[692,1698,1699],{},[697,1700,1701],{},"none",": No shadow",[733,1704,1705,1710],{},[692,1706,1707],{},[697,1708,1709],{},"xs",": Subtle shadow for cards and surfaces (1-2px offset)",[733,1712,1713,1718],{},[692,1714,1715],{},[697,1716,1717],{},"sm",": Standard shadow for most elevated elements (1-6px offset)",[733,1720,1721,1726],{},[692,1722,1723],{},[697,1724,1725],{},"md"," (default): Medium shadow for popovers and raised buttons (2-16px offset)",[733,1728,1729,1734],{},[692,1730,1731],{},[697,1732,1733],{},"lg",": Large shadow for modals and floating panels (4-24px offset)",[733,1736,1737,1742],{},[692,1738,1739],{},[697,1740,1741],{},"xl",": Extra large shadow for drawers and high elevation (8-48px offset)",[733,1744,1745,1750],{},[692,1746,1747],{},[697,1748,1749],{},"2xl",": Maximum shadow for toasts over content (12-64px offset)",[733,1752,1753,1758],{},[692,1754,1755],{},[697,1756,1757],{},"inner",": Inset shadow for wells and pressed states",[733,1760,1761,1766],{},[692,1762,1763],{},[697,1764,1765],{},"ring",": Subtle ring that maintains elevation feel for focus states",[689,1768,1769,1772,1773,1776,1777,1779,1780,1783],{},[692,1770,1771],{},"Good to know:"," The default shadows use ",[697,1774,1775],{},"oklch(var(--box-shadow-color, 0 0 0) \u002F opacity)"," syntax, which allows you to control the shadow color globally by setting a ",[697,1778,1070],{}," variable. The fallback is black (",[697,1781,1782],{},"0 0 0"," in OKLCH format).",[1785,1786,1788],"h3",{"id":1787},"extending-the-default-box-shadow-values","Extending the Default Box Shadow Values",[719,1790,1791,1792,1795],{},"You can customize which box shadow is used as the default while keeping all other standard styles. Use the ",[697,1793,1794],{},"@"," prefix to reference another key in the values object:",[778,1797,1798,1942],{},[781,1799,1800],{"icon":783,"label":290},[785,1801,1803],{"className":787,"code":1802,"filename":789,"language":790,"meta":791,"style":791},"import { styleframe } from 'styleframe';\nimport { useBoxShadowDesignTokens, defaultBoxShadowValues } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst { boxShadow } = useBoxShadowDesignTokens(s, {\n    ...defaultBoxShadowValues,\n    default: '@box-shadow.lg'\n});\n\nexport default s;\n",[697,1804,1805,1825,1850,1854,1868,1872,1894,1904,1920,1928,1932],{"__ignoreMap":791},[795,1806,1807,1809,1811,1813,1815,1817,1819,1821,1823],{"class":797,"line":798},[795,1808,802],{"class":801},[795,1810,806],{"class":805},[795,1812,810],{"class":809},[795,1814,813],{"class":805},[795,1816,816],{"class":801},[795,1818,819],{"class":805},[795,1820,823],{"class":822},[795,1822,826],{"class":805},[795,1824,829],{"class":805},[795,1826,1827,1829,1831,1833,1835,1838,1840,1842,1844,1846,1848],{"class":797,"line":832},[795,1828,802],{"class":801},[795,1830,806],{"class":805},[795,1832,839],{"class":809},[795,1834,1073],{"class":805},[795,1836,1837],{"class":809}," defaultBoxShadowValues",[795,1839,813],{"class":805},[795,1841,816],{"class":801},[795,1843,819],{"class":805},[795,1845,848],{"class":822},[795,1847,826],{"class":805},[795,1849,829],{"class":805},[795,1851,1852],{"class":797,"line":855},[795,1853,858],{"emptyLinePlaceholder":223},[795,1855,1856,1858,1860,1862,1864,1866],{"class":797,"line":861},[795,1857,865],{"class":864},[795,1859,868],{"class":809},[795,1861,871],{"class":805},[795,1863,810],{"class":874},[795,1865,877],{"class":809},[795,1867,829],{"class":805},[795,1869,1870],{"class":797,"line":882},[795,1871,858],{"emptyLinePlaceholder":223},[795,1873,1874,1876,1878,1881,1883,1885,1887,1890,1892],{"class":797,"line":887},[795,1875,865],{"class":864},[795,1877,806],{"class":805},[795,1879,1880],{"class":809}," boxShadow ",[795,1882,979],{"class":805},[795,1884,982],{"class":805},[795,1886,839],{"class":874},[795,1888,1889],{"class":809},"(s",[795,1891,1073],{"class":805},[795,1893,892],{"class":805},[795,1895,1896,1899,1902],{"class":797,"line":895},[795,1897,1898],{"class":805},"    ...",[795,1900,1901],{"class":809},"defaultBoxShadowValues",[795,1903,901],{"class":805},[795,1905,1906,1910,1912,1914,1917],{"class":797,"line":904},[795,1907,1909],{"class":1908},"swJcz","    default",[795,1911,1023],{"class":805},[795,1913,819],{"class":805},[795,1915,1916],{"class":822},"@box-shadow.lg",[795,1918,1919],{"class":805},"'\n",[795,1921,1922,1924,1926],{"class":797,"line":912},[795,1923,979],{"class":805},[795,1925,1082],{"class":809},[795,1927,829],{"class":805},[795,1929,1930],{"class":797,"line":920},[795,1931,858],{"emptyLinePlaceholder":223},[795,1933,1934,1936,1938,1940],{"class":797,"line":928},[795,1935,1000],{"class":801},[795,1937,1003],{"class":801},[795,1939,1006],{"class":809},[795,1941,829],{"class":805},[781,1943,1944],{"icon":154,"label":326},[785,1945,1947],{"className":1013,"code":1946,"filename":1015,"language":1016,"meta":791,"style":791},":root {\n    --box-shadow--none: none;\n    --box-shadow--xs: 0 1px 1px oklch(var(--box-shadow-color, 0 0 0) \u002F 0.12), 0 2px 2px -1px oklch(var(--box-shadow-color, 0 0 0) \u002F 0.06);\n    --box-shadow--sm: 0 1px 2px oklch(var(--box-shadow-color, 0 0 0) \u002F 0.14), 0 3px 6px -1px oklch(var(--box-shadow-color, 0 0 0) \u002F 0.10);\n    --box-shadow--md: 0 2px 4px oklch(var(--box-shadow-color, 0 0 0) \u002F 0.16), 0 8px 16px -4px oklch(var(--box-shadow-color, 0 0 0) \u002F 0.10);\n    --box-shadow--lg: 0 4px 8px oklch(var(--box-shadow-color, 0 0 0) \u002F 0.18), 0 16px 24px -8px oklch(var(--box-shadow-color, 0 0 0) \u002F 0.12);\n    --box-shadow--xl: 0 8px 12px oklch(var(--box-shadow-color, 0 0 0) \u002F 0.20), 0 24px 48px -12px oklch(var(--box-shadow-color, 0 0 0) \u002F 0.14);\n    --box-shadow--2xl: 0 12px 16px oklch(var(--box-shadow-color, 0 0 0) \u002F 0.22), 0 32px 64px -16px oklch(var(--box-shadow-color, 0 0 0) \u002F 0.16);\n    --box-shadow--inner: inset 0 1px 0 oklch(var(--box-shadow-color, 0 0 0) \u002F 0.08), inset 0 0 0 1px oklch(var(--box-shadow-color, 0 0 0) \u002F 0.06);\n    --box-shadow--ring: 0 0 0 1px oklch(var(--box-shadow-color, 0 0 0) \u002F 0.12), 0 1px 2px oklch(var(--box-shadow-color, 0 0 0) \u002F 0.08);\n    --box-shadow: var(--box-shadow--lg);\n}\n",[697,1948,1949,1957,1967,2039,2111,2183,2255,2327,2399,2475,2547,2562],{"__ignoreMap":791},[795,1950,1951,1953,1955],{"class":797,"line":798},[795,1952,1023],{"class":805},[795,1954,1026],{"class":864},[795,1956,892],{"class":805},[795,1958,1959,1961,1963,1965],{"class":797,"line":832},[795,1960,1033],{"class":809},[795,1962,1023],{"class":805},[795,1964,1038],{"class":809},[795,1966,829],{"class":805},[795,1968,1969,1971,1973,1975,1977,1979,1981,1983,1985,1987,1989,1991,1993,1995,1997,1999,2001,2003,2005,2007,2009,2011,2013,2015,2017,2019,2021,2023,2025,2027,2029,2031,2033,2035,2037],{"class":797,"line":855},[795,1970,1045],{"class":809},[795,1972,1023],{"class":805},[795,1974,1051],{"class":1050},[795,1976,1054],{"class":1050},[795,1978,1054],{"class":1050},[795,1980,1059],{"class":874},[795,1982,1062],{"class":805},[795,1984,1065],{"class":874},[795,1986,1062],{"class":805},[795,1988,1070],{"class":809},[795,1990,1073],{"class":805},[795,1992,1051],{"class":1050},[795,1994,1051],{"class":1050},[795,1996,1051],{"class":1050},[795,1998,1082],{"class":805},[795,2000,1085],{"class":809},[795,2002,1088],{"class":1050},[795,2004,1091],{"class":805},[795,2006,1051],{"class":1050},[795,2008,1096],{"class":1050},[795,2010,1096],{"class":1050},[795,2012,1101],{"class":1050},[795,2014,1059],{"class":874},[795,2016,1062],{"class":805},[795,2018,1065],{"class":874},[795,2020,1062],{"class":805},[795,2022,1070],{"class":809},[795,2024,1073],{"class":805},[795,2026,1051],{"class":1050},[795,2028,1051],{"class":1050},[795,2030,1051],{"class":1050},[795,2032,1082],{"class":805},[795,2034,1085],{"class":809},[795,2036,1126],{"class":1050},[795,2038,1129],{"class":805},[795,2040,2041,2043,2045,2047,2049,2051,2053,2055,2057,2059,2061,2063,2065,2067,2069,2071,2073,2075,2077,2079,2081,2083,2085,2087,2089,2091,2093,2095,2097,2099,2101,2103,2105,2107,2109],{"class":797,"line":861},[795,2042,1134],{"class":809},[795,2044,1023],{"class":805},[795,2046,1051],{"class":1050},[795,2048,1054],{"class":1050},[795,2050,1096],{"class":1050},[795,2052,1059],{"class":874},[795,2054,1062],{"class":805},[795,2056,1065],{"class":874},[795,2058,1062],{"class":805},[795,2060,1070],{"class":809},[795,2062,1073],{"class":805},[795,2064,1051],{"class":1050},[795,2066,1051],{"class":1050},[795,2068,1051],{"class":1050},[795,2070,1082],{"class":805},[795,2072,1085],{"class":809},[795,2074,1167],{"class":1050},[795,2076,1091],{"class":805},[795,2078,1051],{"class":1050},[795,2080,1174],{"class":1050},[795,2082,1177],{"class":1050},[795,2084,1101],{"class":1050},[795,2086,1059],{"class":874},[795,2088,1062],{"class":805},[795,2090,1065],{"class":874},[795,2092,1062],{"class":805},[795,2094,1070],{"class":809},[795,2096,1073],{"class":805},[795,2098,1051],{"class":1050},[795,2100,1051],{"class":1050},[795,2102,1051],{"class":1050},[795,2104,1082],{"class":805},[795,2106,1085],{"class":809},[795,2108,1204],{"class":1050},[795,2110,1129],{"class":805},[795,2112,2113,2115,2117,2119,2121,2123,2125,2127,2129,2131,2133,2135,2137,2139,2141,2143,2145,2147,2149,2151,2153,2155,2157,2159,2161,2163,2165,2167,2169,2171,2173,2175,2177,2179,2181],{"class":797,"line":882},[795,2114,1211],{"class":809},[795,2116,1023],{"class":805},[795,2118,1051],{"class":1050},[795,2120,1096],{"class":1050},[795,2122,1220],{"class":1050},[795,2124,1059],{"class":874},[795,2126,1062],{"class":805},[795,2128,1065],{"class":874},[795,2130,1062],{"class":805},[795,2132,1070],{"class":809},[795,2134,1073],{"class":805},[795,2136,1051],{"class":1050},[795,2138,1051],{"class":1050},[795,2140,1051],{"class":1050},[795,2142,1082],{"class":805},[795,2144,1085],{"class":809},[795,2146,1245],{"class":1050},[795,2148,1091],{"class":805},[795,2150,1051],{"class":1050},[795,2152,1252],{"class":1050},[795,2154,1255],{"class":1050},[795,2156,1258],{"class":1050},[795,2158,1059],{"class":874},[795,2160,1062],{"class":805},[795,2162,1065],{"class":874},[795,2164,1062],{"class":805},[795,2166,1070],{"class":809},[795,2168,1073],{"class":805},[795,2170,1051],{"class":1050},[795,2172,1051],{"class":1050},[795,2174,1051],{"class":1050},[795,2176,1082],{"class":805},[795,2178,1085],{"class":809},[795,2180,1204],{"class":1050},[795,2182,1129],{"class":805},[795,2184,2185,2187,2189,2191,2193,2195,2197,2199,2201,2203,2205,2207,2209,2211,2213,2215,2217,2219,2221,2223,2225,2227,2229,2231,2233,2235,2237,2239,2241,2243,2245,2247,2249,2251,2253],{"class":797,"line":887},[795,2186,1289],{"class":809},[795,2188,1023],{"class":805},[795,2190,1051],{"class":1050},[795,2192,1220],{"class":1050},[795,2194,1252],{"class":1050},[795,2196,1059],{"class":874},[795,2198,1062],{"class":805},[795,2200,1065],{"class":874},[795,2202,1062],{"class":805},[795,2204,1070],{"class":809},[795,2206,1073],{"class":805},[795,2208,1051],{"class":1050},[795,2210,1051],{"class":1050},[795,2212,1051],{"class":1050},[795,2214,1082],{"class":805},[795,2216,1085],{"class":809},[795,2218,1322],{"class":1050},[795,2220,1091],{"class":805},[795,2222,1051],{"class":1050},[795,2224,1255],{"class":1050},[795,2226,1331],{"class":1050},[795,2228,1334],{"class":1050},[795,2230,1059],{"class":874},[795,2232,1062],{"class":805},[795,2234,1065],{"class":874},[795,2236,1062],{"class":805},[795,2238,1070],{"class":809},[795,2240,1073],{"class":805},[795,2242,1051],{"class":1050},[795,2244,1051],{"class":1050},[795,2246,1051],{"class":1050},[795,2248,1082],{"class":805},[795,2250,1085],{"class":809},[795,2252,1088],{"class":1050},[795,2254,1129],{"class":805},[795,2256,2257,2259,2261,2263,2265,2267,2269,2271,2273,2275,2277,2279,2281,2283,2285,2287,2289,2291,2293,2295,2297,2299,2301,2303,2305,2307,2309,2311,2313,2315,2317,2319,2321,2323,2325],{"class":797,"line":895},[795,2258,1365],{"class":809},[795,2260,1023],{"class":805},[795,2262,1051],{"class":1050},[795,2264,1252],{"class":1050},[795,2266,1374],{"class":1050},[795,2268,1059],{"class":874},[795,2270,1062],{"class":805},[795,2272,1065],{"class":874},[795,2274,1062],{"class":805},[795,2276,1070],{"class":809},[795,2278,1073],{"class":805},[795,2280,1051],{"class":1050},[795,2282,1051],{"class":1050},[795,2284,1051],{"class":1050},[795,2286,1082],{"class":805},[795,2288,1085],{"class":809},[795,2290,1399],{"class":1050},[795,2292,1091],{"class":805},[795,2294,1051],{"class":1050},[795,2296,1331],{"class":1050},[795,2298,1408],{"class":1050},[795,2300,1411],{"class":1050},[795,2302,1059],{"class":874},[795,2304,1062],{"class":805},[795,2306,1065],{"class":874},[795,2308,1062],{"class":805},[795,2310,1070],{"class":809},[795,2312,1073],{"class":805},[795,2314,1051],{"class":1050},[795,2316,1051],{"class":1050},[795,2318,1051],{"class":1050},[795,2320,1082],{"class":805},[795,2322,1085],{"class":809},[795,2324,1167],{"class":1050},[795,2326,1129],{"class":805},[795,2328,2329,2331,2333,2335,2337,2339,2341,2343,2345,2347,2349,2351,2353,2355,2357,2359,2361,2363,2365,2367,2369,2371,2373,2375,2377,2379,2381,2383,2385,2387,2389,2391,2393,2395,2397],{"class":797,"line":904},[795,2330,1442],{"class":809},[795,2332,1023],{"class":805},[795,2334,1051],{"class":1050},[795,2336,1374],{"class":1050},[795,2338,1255],{"class":1050},[795,2340,1059],{"class":874},[795,2342,1062],{"class":805},[795,2344,1065],{"class":874},[795,2346,1062],{"class":805},[795,2348,1070],{"class":809},[795,2350,1073],{"class":805},[795,2352,1051],{"class":1050},[795,2354,1051],{"class":1050},[795,2356,1051],{"class":1050},[795,2358,1082],{"class":805},[795,2360,1085],{"class":809},[795,2362,1475],{"class":1050},[795,2364,1091],{"class":805},[795,2366,1051],{"class":1050},[795,2368,1482],{"class":1050},[795,2370,1485],{"class":1050},[795,2372,1488],{"class":1050},[795,2374,1059],{"class":874},[795,2376,1062],{"class":805},[795,2378,1065],{"class":874},[795,2380,1062],{"class":805},[795,2382,1070],{"class":809},[795,2384,1073],{"class":805},[795,2386,1051],{"class":1050},[795,2388,1051],{"class":1050},[795,2390,1051],{"class":1050},[795,2392,1082],{"class":805},[795,2394,1085],{"class":809},[795,2396,1245],{"class":1050},[795,2398,1129],{"class":805},[795,2400,2401,2403,2405,2407,2409,2411,2413,2415,2417,2419,2421,2423,2425,2427,2429,2431,2433,2435,2437,2439,2441,2443,2445,2447,2449,2451,2453,2455,2457,2459,2461,2463,2465,2467,2469,2471,2473],{"class":797,"line":912},[795,2402,1519],{"class":809},[795,2404,1023],{"class":805},[795,2406,1524],{"class":809},[795,2408,1527],{"class":1050},[795,2410,1054],{"class":1050},[795,2412,1051],{"class":1050},[795,2414,1059],{"class":874},[795,2416,1062],{"class":805},[795,2418,1065],{"class":874},[795,2420,1062],{"class":805},[795,2422,1070],{"class":809},[795,2424,1073],{"class":805},[795,2426,1051],{"class":1050},[795,2428,1051],{"class":1050},[795,2430,1051],{"class":1050},[795,2432,1082],{"class":805},[795,2434,1085],{"class":809},[795,2436,1556],{"class":1050},[795,2438,1091],{"class":805},[795,2440,1524],{"class":809},[795,2442,1527],{"class":1050},[795,2444,1051],{"class":1050},[795,2446,1051],{"class":1050},[795,2448,1054],{"class":1050},[795,2450,1059],{"class":874},[795,2452,1062],{"class":805},[795,2454,1065],{"class":874},[795,2456,1062],{"class":805},[795,2458,1070],{"class":809},[795,2460,1073],{"class":805},[795,2462,1051],{"class":1050},[795,2464,1051],{"class":1050},[795,2466,1051],{"class":1050},[795,2468,1082],{"class":805},[795,2470,1085],{"class":809},[795,2472,1126],{"class":1050},[795,2474,1129],{"class":805},[795,2476,2477,2479,2481,2483,2485,2487,2489,2491,2493,2495,2497,2499,2501,2503,2505,2507,2509,2511,2513,2515,2517,2519,2521,2523,2525,2527,2529,2531,2533,2535,2537,2539,2541,2543,2545],{"class":797,"line":920},[795,2478,1599],{"class":809},[795,2480,1023],{"class":805},[795,2482,1051],{"class":1050},[795,2484,1051],{"class":1050},[795,2486,1051],{"class":1050},[795,2488,1054],{"class":1050},[795,2490,1059],{"class":874},[795,2492,1062],{"class":805},[795,2494,1065],{"class":874},[795,2496,1062],{"class":805},[795,2498,1070],{"class":809},[795,2500,1073],{"class":805},[795,2502,1051],{"class":1050},[795,2504,1051],{"class":1050},[795,2506,1051],{"class":1050},[795,2508,1082],{"class":805},[795,2510,1085],{"class":809},[795,2512,1088],{"class":1050},[795,2514,1091],{"class":805},[795,2516,1051],{"class":1050},[795,2518,1054],{"class":1050},[795,2520,1096],{"class":1050},[795,2522,1059],{"class":874},[795,2524,1062],{"class":805},[795,2526,1065],{"class":874},[795,2528,1062],{"class":805},[795,2530,1070],{"class":809},[795,2532,1073],{"class":805},[795,2534,1051],{"class":1050},[795,2536,1051],{"class":1050},[795,2538,1051],{"class":1050},[795,2540,1082],{"class":805},[795,2542,1085],{"class":809},[795,2544,1556],{"class":1050},[795,2546,1129],{"class":805},[795,2548,2549,2551,2553,2555,2557,2560],{"class":797,"line":928},[795,2550,1672],{"class":809},[795,2552,1023],{"class":805},[795,2554,1677],{"class":874},[795,2556,1062],{"class":805},[795,2558,2559],{"class":809},"--box-shadow--lg",[795,2561,1129],{"class":805},[795,2563,2564],{"class":797,"line":936},[795,2565,1689],{"class":805},[1785,2567,2569],{"id":2568},"creating-custom-box-shadow-variables","Creating Custom Box Shadow Variables",[719,2571,2572,2573,2576],{},"The ",[697,2574,2575],{},"useBoxShadowDesignTokens()"," function creates a set of box shadow variables for establishing visual elevation and depth in your interface.",[778,2578,2579,2799],{},[781,2580,2581],{"icon":783,"label":290},[785,2582,2584],{"className":787,"code":2583,"filename":789,"language":790,"meta":791,"style":791},"import { styleframe } from 'styleframe';\nimport { useBoxShadowDesignTokens } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst {\n    boxShadow,\n    boxShadowNone,\n    boxShadowSm,\n    boxShadowMd,\n    boxShadowLg,\n} = useBoxShadowDesignTokens(s, {\n    default: '@box-shadow.md',\n    none: 'none',\n    sm: '0 1px 1px oklch(0 0 0 \u002F 0.12), 0 2px 2px -1px oklch(0 0 0 \u002F 0.06)',\n    md: '0 2px 4px oklch(0 0 0 \u002F 0.16), 0 8px 16px -4px oklch(0 0 0 \u002F 0.10)',\n    lg: '0 4px 8px oklch(0 0 0 \u002F 0.18), 0 16px 24px -8px oklch(0 0 0 \u002F 0.12)',\n});\n\nexport default s;\n",[697,2585,2586,2606,2626,2630,2644,2648,2654,2660,2666,2672,2678,2684,2698,2713,2728,2744,2760,2776,2784,2788],{"__ignoreMap":791},[795,2587,2588,2590,2592,2594,2596,2598,2600,2602,2604],{"class":797,"line":798},[795,2589,802],{"class":801},[795,2591,806],{"class":805},[795,2593,810],{"class":809},[795,2595,813],{"class":805},[795,2597,816],{"class":801},[795,2599,819],{"class":805},[795,2601,823],{"class":822},[795,2603,826],{"class":805},[795,2605,829],{"class":805},[795,2607,2608,2610,2612,2614,2616,2618,2620,2622,2624],{"class":797,"line":832},[795,2609,802],{"class":801},[795,2611,806],{"class":805},[795,2613,839],{"class":809},[795,2615,813],{"class":805},[795,2617,816],{"class":801},[795,2619,819],{"class":805},[795,2621,848],{"class":822},[795,2623,826],{"class":805},[795,2625,829],{"class":805},[795,2627,2628],{"class":797,"line":855},[795,2629,858],{"emptyLinePlaceholder":223},[795,2631,2632,2634,2636,2638,2640,2642],{"class":797,"line":861},[795,2633,865],{"class":864},[795,2635,868],{"class":809},[795,2637,871],{"class":805},[795,2639,810],{"class":874},[795,2641,877],{"class":809},[795,2643,829],{"class":805},[795,2645,2646],{"class":797,"line":882},[795,2647,858],{"emptyLinePlaceholder":223},[795,2649,2650,2652],{"class":797,"line":887},[795,2651,865],{"class":864},[795,2653,892],{"class":805},[795,2655,2656,2658],{"class":797,"line":895},[795,2657,898],{"class":809},[795,2659,901],{"class":805},[795,2661,2662,2664],{"class":797,"line":904},[795,2663,907],{"class":809},[795,2665,901],{"class":805},[795,2667,2668,2670],{"class":797,"line":912},[795,2669,923],{"class":809},[795,2671,901],{"class":805},[795,2673,2674,2676],{"class":797,"line":920},[795,2675,931],{"class":809},[795,2677,901],{"class":805},[795,2679,2680,2682],{"class":797,"line":928},[795,2681,939],{"class":809},[795,2683,901],{"class":805},[795,2685,2686,2688,2690,2692,2694,2696],{"class":797,"line":936},[795,2687,979],{"class":805},[795,2689,982],{"class":805},[795,2691,839],{"class":874},[795,2693,1889],{"class":809},[795,2695,1073],{"class":805},[795,2697,892],{"class":805},[795,2699,2700,2702,2704,2706,2709,2711],{"class":797,"line":944},[795,2701,1909],{"class":1908},[795,2703,1023],{"class":805},[795,2705,819],{"class":805},[795,2707,2708],{"class":822},"@box-shadow.md",[795,2710,826],{"class":805},[795,2712,901],{"class":805},[795,2714,2715,2718,2720,2722,2724,2726],{"class":797,"line":952},[795,2716,2717],{"class":1908},"    none",[795,2719,1023],{"class":805},[795,2721,819],{"class":805},[795,2723,1701],{"class":822},[795,2725,826],{"class":805},[795,2727,901],{"class":805},[795,2729,2730,2733,2735,2737,2740,2742],{"class":797,"line":960},[795,2731,2732],{"class":1908},"    sm",[795,2734,1023],{"class":805},[795,2736,819],{"class":805},[795,2738,2739],{"class":822},"0 1px 1px oklch(0 0 0 \u002F 0.12), 0 2px 2px -1px oklch(0 0 0 \u002F 0.06)",[795,2741,826],{"class":805},[795,2743,901],{"class":805},[795,2745,2746,2749,2751,2753,2756,2758],{"class":797,"line":968},[795,2747,2748],{"class":1908},"    md",[795,2750,1023],{"class":805},[795,2752,819],{"class":805},[795,2754,2755],{"class":822},"0 2px 4px oklch(0 0 0 \u002F 0.16), 0 8px 16px -4px oklch(0 0 0 \u002F 0.10)",[795,2757,826],{"class":805},[795,2759,901],{"class":805},[795,2761,2762,2765,2767,2769,2772,2774],{"class":797,"line":976},[795,2763,2764],{"class":1908},"    lg",[795,2766,1023],{"class":805},[795,2768,819],{"class":805},[795,2770,2771],{"class":822},"0 4px 8px oklch(0 0 0 \u002F 0.18), 0 16px 24px -8px oklch(0 0 0 \u002F 0.12)",[795,2773,826],{"class":805},[795,2775,901],{"class":805},[795,2777,2778,2780,2782],{"class":797,"line":992},[795,2779,979],{"class":805},[795,2781,1082],{"class":809},[795,2783,829],{"class":805},[795,2785,2786],{"class":797,"line":997},[795,2787,858],{"emptyLinePlaceholder":223},[795,2789,2791,2793,2795,2797],{"class":797,"line":2790},20,[795,2792,1000],{"class":801},[795,2794,1003],{"class":801},[795,2796,1006],{"class":809},[795,2798,829],{"class":805},[781,2800,2801],{"icon":154,"label":326},[785,2802,2804],{"className":1013,"code":2803,"filename":1015,"language":1016,"meta":791,"style":791},":root {\n    --box-shadow--none: none;\n    --box-shadow--sm: 0 1px 1px oklch(0 0 0 \u002F 0.12), 0 2px 2px -1px oklch(0 0 0 \u002F 0.06);\n    --box-shadow--md: 0 2px 4px oklch(0 0 0 \u002F 0.16), 0 8px 16px -4px oklch(0 0 0 \u002F 0.10);\n    --box-shadow--lg: 0 4px 8px oklch(0 0 0 \u002F 0.18), 0 16px 24px -8px oklch(0 0 0 \u002F 0.12);\n    --box-shadow: var(--box-shadow--md);\n}\n",[697,2805,2806,2814,2824,2876,2928,2980,2994],{"__ignoreMap":791},[795,2807,2808,2810,2812],{"class":797,"line":798},[795,2809,1023],{"class":805},[795,2811,1026],{"class":864},[795,2813,892],{"class":805},[795,2815,2816,2818,2820,2822],{"class":797,"line":832},[795,2817,1033],{"class":809},[795,2819,1023],{"class":805},[795,2821,1038],{"class":809},[795,2823,829],{"class":805},[795,2825,2826,2828,2830,2832,2834,2836,2838,2840,2842,2844,2846,2848,2850,2852,2854,2856,2858,2860,2862,2864,2866,2868,2870,2872,2874],{"class":797,"line":855},[795,2827,1134],{"class":809},[795,2829,1023],{"class":805},[795,2831,1051],{"class":1050},[795,2833,1054],{"class":1050},[795,2835,1054],{"class":1050},[795,2837,1059],{"class":874},[795,2839,1062],{"class":805},[795,2841,1527],{"class":1050},[795,2843,1051],{"class":1050},[795,2845,1051],{"class":1050},[795,2847,1085],{"class":809},[795,2849,1088],{"class":1050},[795,2851,1091],{"class":805},[795,2853,1051],{"class":1050},[795,2855,1096],{"class":1050},[795,2857,1096],{"class":1050},[795,2859,1101],{"class":1050},[795,2861,1059],{"class":874},[795,2863,1062],{"class":805},[795,2865,1527],{"class":1050},[795,2867,1051],{"class":1050},[795,2869,1051],{"class":1050},[795,2871,1085],{"class":809},[795,2873,1126],{"class":1050},[795,2875,1129],{"class":805},[795,2877,2878,2880,2882,2884,2886,2888,2890,2892,2894,2896,2898,2900,2902,2904,2906,2908,2910,2912,2914,2916,2918,2920,2922,2924,2926],{"class":797,"line":861},[795,2879,1211],{"class":809},[795,2881,1023],{"class":805},[795,2883,1051],{"class":1050},[795,2885,1096],{"class":1050},[795,2887,1220],{"class":1050},[795,2889,1059],{"class":874},[795,2891,1062],{"class":805},[795,2893,1527],{"class":1050},[795,2895,1051],{"class":1050},[795,2897,1051],{"class":1050},[795,2899,1085],{"class":809},[795,2901,1245],{"class":1050},[795,2903,1091],{"class":805},[795,2905,1051],{"class":1050},[795,2907,1252],{"class":1050},[795,2909,1255],{"class":1050},[795,2911,1258],{"class":1050},[795,2913,1059],{"class":874},[795,2915,1062],{"class":805},[795,2917,1527],{"class":1050},[795,2919,1051],{"class":1050},[795,2921,1051],{"class":1050},[795,2923,1085],{"class":809},[795,2925,1204],{"class":1050},[795,2927,1129],{"class":805},[795,2929,2930,2932,2934,2936,2938,2940,2942,2944,2946,2948,2950,2952,2954,2956,2958,2960,2962,2964,2966,2968,2970,2972,2974,2976,2978],{"class":797,"line":882},[795,2931,1289],{"class":809},[795,2933,1023],{"class":805},[795,2935,1051],{"class":1050},[795,2937,1220],{"class":1050},[795,2939,1252],{"class":1050},[795,2941,1059],{"class":874},[795,2943,1062],{"class":805},[795,2945,1527],{"class":1050},[795,2947,1051],{"class":1050},[795,2949,1051],{"class":1050},[795,2951,1085],{"class":809},[795,2953,1322],{"class":1050},[795,2955,1091],{"class":805},[795,2957,1051],{"class":1050},[795,2959,1255],{"class":1050},[795,2961,1331],{"class":1050},[795,2963,1334],{"class":1050},[795,2965,1059],{"class":874},[795,2967,1062],{"class":805},[795,2969,1527],{"class":1050},[795,2971,1051],{"class":1050},[795,2973,1051],{"class":1050},[795,2975,1085],{"class":809},[795,2977,1088],{"class":1050},[795,2979,1129],{"class":805},[795,2981,2982,2984,2986,2988,2990,2992],{"class":797,"line":887},[795,2983,1672],{"class":809},[795,2985,1023],{"class":805},[795,2987,1677],{"class":874},[795,2989,1062],{"class":805},[795,2991,1682],{"class":809},[795,2993,1129],{"class":805},[795,2995,2996],{"class":797,"line":895},[795,2997,1689],{"class":805},[719,2999,3000,3001,3004,3005,3007,3008,3011,3012,3007,3014,3017],{},"The function creates variables for each shadow level you define. Each key in the object becomes a box shadow variable with the prefix ",[697,3002,3003],{},"box-shadow--",", and the export name is automatically converted to camelCase (e.g., ",[697,3006,1717],{}," → ",[697,3009,3010],{},"boxShadowSm",", ",[697,3013,1749],{},[697,3015,3016],{},"boxShadow2xl",").",[3019,3020,3021,3024],"tip",{},[692,3022,3023],{},"Pro tip:"," Use layered shadows (multiple shadow values) for more realistic depth. Combining a sharp close shadow with a softer distant shadow creates natural-looking elevation.",[715,3026,3028],{"id":3027},"using-box-shadow-color-variables","Using Box Shadow Color Variables",[719,3030,3031],{},"One of the most powerful features of the default shadow system is the ability to control shadow colors dynamically:",[778,3033,3034,3462],{},[781,3035,3036],{"icon":783,"label":290},[785,3037,3039],{"className":787,"code":3038,"filename":789,"language":790,"meta":791,"style":791},"import { styleframe } from 'styleframe';\nimport { useBoxShadowDesignTokens, defaultBoxShadowValues } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\nconst { ref, selector, css } = s;\n\n\u002F\u002F Define a shadow color variable (OKLCH format: lightness chroma hue)\nconst boxShadowColor = s.variable('box-shadow-color', '0 0 0');\n\n\u002F\u002F Use default shadows (which reference --box-shadow-color)\nconst { boxShadow, boxShadowMd, boxShadowLg } = useBoxShadowDesignTokens(\n    s,\n    defaultBoxShadowValues\n);\n\n\u002F\u002F Apply shadows to components\nselector('.card', {\n    boxShadow: ref(boxShadow),\n});\n\nselector('.modal', {\n    boxShadow: ref(boxShadowLg),\n});\n\n\u002F\u002F Override shadow color for specific contexts\nselector('.card-primary', (ctx) => {\n    ctx.variable(boxShadowColor, '0.6109 0.1903 263.71'); \u002F\u002F Blue shadows in OKLCH\n    \n    return {\n        boxShadow: ref(boxShadowMd),\n    }\n});\n\nexport default s;\n",[697,3040,3041,3061,3085,3089,3103,3130,3134,3140,3178,3182,3187,3215,3222,3227,3233,3237,3242,3260,3273,3281,3285,3303,3317,3326,3331,3337,3366,3398,3404,3412,3431,3437,3446,3451],{"__ignoreMap":791},[795,3042,3043,3045,3047,3049,3051,3053,3055,3057,3059],{"class":797,"line":798},[795,3044,802],{"class":801},[795,3046,806],{"class":805},[795,3048,810],{"class":809},[795,3050,813],{"class":805},[795,3052,816],{"class":801},[795,3054,819],{"class":805},[795,3056,823],{"class":822},[795,3058,826],{"class":805},[795,3060,829],{"class":805},[795,3062,3063,3065,3067,3069,3071,3073,3075,3077,3079,3081,3083],{"class":797,"line":832},[795,3064,802],{"class":801},[795,3066,806],{"class":805},[795,3068,839],{"class":809},[795,3070,1073],{"class":805},[795,3072,1837],{"class":809},[795,3074,813],{"class":805},[795,3076,816],{"class":801},[795,3078,819],{"class":805},[795,3080,848],{"class":822},[795,3082,826],{"class":805},[795,3084,829],{"class":805},[795,3086,3087],{"class":797,"line":855},[795,3088,858],{"emptyLinePlaceholder":223},[795,3090,3091,3093,3095,3097,3099,3101],{"class":797,"line":861},[795,3092,865],{"class":864},[795,3094,868],{"class":809},[795,3096,871],{"class":805},[795,3098,810],{"class":874},[795,3100,877],{"class":809},[795,3102,829],{"class":805},[795,3104,3105,3107,3109,3112,3114,3117,3119,3122,3124,3126,3128],{"class":797,"line":882},[795,3106,865],{"class":864},[795,3108,806],{"class":805},[795,3110,3111],{"class":809}," ref",[795,3113,1073],{"class":805},[795,3115,3116],{"class":809}," selector",[795,3118,1073],{"class":805},[795,3120,3121],{"class":809}," css ",[795,3123,979],{"class":805},[795,3125,982],{"class":805},[795,3127,1006],{"class":809},[795,3129,829],{"class":805},[795,3131,3132],{"class":797,"line":887},[795,3133,858],{"emptyLinePlaceholder":223},[795,3135,3136],{"class":797,"line":895},[795,3137,3139],{"class":3138},"sHwdD","\u002F\u002F Define a shadow color variable (OKLCH format: lightness chroma hue)\n",[795,3141,3142,3144,3147,3149,3151,3154,3157,3159,3161,3164,3166,3168,3170,3172,3174,3176],{"class":797,"line":904},[795,3143,865],{"class":864},[795,3145,3146],{"class":809}," boxShadowColor ",[795,3148,871],{"class":805},[795,3150,1006],{"class":809},[795,3152,3153],{"class":805},".",[795,3155,3156],{"class":874},"variable",[795,3158,1062],{"class":809},[795,3160,826],{"class":805},[795,3162,3163],{"class":822},"box-shadow-color",[795,3165,826],{"class":805},[795,3167,1073],{"class":805},[795,3169,819],{"class":805},[795,3171,1782],{"class":822},[795,3173,826],{"class":805},[795,3175,1082],{"class":809},[795,3177,829],{"class":805},[795,3179,3180],{"class":797,"line":912},[795,3181,858],{"emptyLinePlaceholder":223},[795,3183,3184],{"class":797,"line":920},[795,3185,3186],{"class":3138},"\u002F\u002F Use default shadows (which reference --box-shadow-color)\n",[795,3188,3189,3191,3193,3196,3198,3201,3203,3206,3208,3210,3212],{"class":797,"line":928},[795,3190,865],{"class":864},[795,3192,806],{"class":805},[795,3194,3195],{"class":809}," boxShadow",[795,3197,1073],{"class":805},[795,3199,3200],{"class":809}," boxShadowMd",[795,3202,1073],{"class":805},[795,3204,3205],{"class":809}," boxShadowLg ",[795,3207,979],{"class":805},[795,3209,982],{"class":805},[795,3211,839],{"class":874},[795,3213,3214],{"class":809},"(\n",[795,3216,3217,3220],{"class":797,"line":936},[795,3218,3219],{"class":809},"    s",[795,3221,901],{"class":805},[795,3223,3224],{"class":797,"line":944},[795,3225,3226],{"class":809},"    defaultBoxShadowValues\n",[795,3228,3229,3231],{"class":797,"line":952},[795,3230,1082],{"class":809},[795,3232,829],{"class":805},[795,3234,3235],{"class":797,"line":960},[795,3236,858],{"emptyLinePlaceholder":223},[795,3238,3239],{"class":797,"line":968},[795,3240,3241],{"class":3138},"\u002F\u002F Apply shadows to components\n",[795,3243,3244,3247,3249,3251,3254,3256,3258],{"class":797,"line":976},[795,3245,3246],{"class":874},"selector",[795,3248,1062],{"class":809},[795,3250,826],{"class":805},[795,3252,3253],{"class":822},".card",[795,3255,826],{"class":805},[795,3257,1073],{"class":805},[795,3259,892],{"class":805},[795,3261,3262,3264,3266,3268,3271],{"class":797,"line":992},[795,3263,898],{"class":1908},[795,3265,1023],{"class":805},[795,3267,3111],{"class":874},[795,3269,3270],{"class":809},"(boxShadow)",[795,3272,901],{"class":805},[795,3274,3275,3277,3279],{"class":797,"line":997},[795,3276,979],{"class":805},[795,3278,1082],{"class":809},[795,3280,829],{"class":805},[795,3282,3283],{"class":797,"line":2790},[795,3284,858],{"emptyLinePlaceholder":223},[795,3286,3288,3290,3292,3294,3297,3299,3301],{"class":797,"line":3287},21,[795,3289,3246],{"class":874},[795,3291,1062],{"class":809},[795,3293,826],{"class":805},[795,3295,3296],{"class":822},".modal",[795,3298,826],{"class":805},[795,3300,1073],{"class":805},[795,3302,892],{"class":805},[795,3304,3306,3308,3310,3312,3315],{"class":797,"line":3305},22,[795,3307,898],{"class":1908},[795,3309,1023],{"class":805},[795,3311,3111],{"class":874},[795,3313,3314],{"class":809},"(boxShadowLg)",[795,3316,901],{"class":805},[795,3318,3320,3322,3324],{"class":797,"line":3319},23,[795,3321,979],{"class":805},[795,3323,1082],{"class":809},[795,3325,829],{"class":805},[795,3327,3329],{"class":797,"line":3328},24,[795,3330,858],{"emptyLinePlaceholder":223},[795,3332,3334],{"class":797,"line":3333},25,[795,3335,3336],{"class":3138},"\u002F\u002F Override shadow color for specific contexts\n",[795,3338,3340,3342,3344,3346,3349,3351,3353,3355,3359,3361,3364],{"class":797,"line":3339},26,[795,3341,3246],{"class":874},[795,3343,1062],{"class":809},[795,3345,826],{"class":805},[795,3347,3348],{"class":822},".card-primary",[795,3350,826],{"class":805},[795,3352,1073],{"class":805},[795,3354,705],{"class":805},[795,3356,3358],{"class":3357},"sHdIc","ctx",[795,3360,1082],{"class":805},[795,3362,3363],{"class":864}," =>",[795,3365,892],{"class":805},[795,3367,3369,3372,3374,3376,3378,3381,3383,3385,3388,3390,3392,3395],{"class":797,"line":3368},27,[795,3370,3371],{"class":809},"    ctx",[795,3373,3153],{"class":805},[795,3375,3156],{"class":874},[795,3377,1062],{"class":1908},[795,3379,3380],{"class":809},"boxShadowColor",[795,3382,1073],{"class":805},[795,3384,819],{"class":805},[795,3386,3387],{"class":822},"0.6109 0.1903 263.71",[795,3389,826],{"class":805},[795,3391,1082],{"class":1908},[795,3393,3394],{"class":805},";",[795,3396,3397],{"class":3138}," \u002F\u002F Blue shadows in OKLCH\n",[795,3399,3401],{"class":797,"line":3400},28,[795,3402,3403],{"class":1908},"    \n",[795,3405,3407,3410],{"class":797,"line":3406},29,[795,3408,3409],{"class":801},"    return",[795,3411,892],{"class":805},[795,3413,3415,3418,3420,3422,3424,3427,3429],{"class":797,"line":3414},30,[795,3416,3417],{"class":1908},"        boxShadow",[795,3419,1023],{"class":805},[795,3421,3111],{"class":874},[795,3423,1062],{"class":1908},[795,3425,3426],{"class":809},"boxShadowMd",[795,3428,1082],{"class":1908},[795,3430,901],{"class":805},[795,3432,3434],{"class":797,"line":3433},31,[795,3435,3436],{"class":805},"    }\n",[795,3438,3440,3442,3444],{"class":797,"line":3439},32,[795,3441,979],{"class":805},[795,3443,1082],{"class":809},[795,3445,829],{"class":805},[795,3447,3449],{"class":797,"line":3448},33,[795,3450,858],{"emptyLinePlaceholder":223},[795,3452,3454,3456,3458,3460],{"class":797,"line":3453},34,[795,3455,1000],{"class":801},[795,3457,1003],{"class":801},[795,3459,1006],{"class":809},[795,3461,829],{"class":805},[781,3463,3464],{"icon":154,"label":326},[785,3465,3467],{"className":1013,"code":3466,"filename":1015,"language":1016,"meta":791,"style":791},":root {\n    --box-shadow-color: 0 0 0;\n    --box-shadow--none: none;\n    --box-shadow--xs: 0 1px 1px oklch(var(--box-shadow-color, 0 0 0) \u002F 0.12), 0 2px 2px -1px oklch(var(--box-shadow-color, 0 0 0) \u002F 0.06);\n    --box-shadow--sm: 0 1px 2px oklch(var(--box-shadow-color, 0 0 0) \u002F 0.14), 0 3px 6px -1px oklch(var(--box-shadow-color, 0 0 0) \u002F 0.10);\n    --box-shadow--md: 0 2px 4px oklch(var(--box-shadow-color, 0 0 0) \u002F 0.16), 0 8px 16px -4px oklch(var(--box-shadow-color, 0 0 0) \u002F 0.10);\n    --box-shadow--lg: 0 4px 8px oklch(var(--box-shadow-color, 0 0 0) \u002F 0.18), 0 16px 24px -8px oklch(var(--box-shadow-color, 0 0 0) \u002F 0.12);\n    --box-shadow: var(--box-shadow--md);\n}\n\n.card {\n    box-shadow: var(--box-shadow);\n}\n\n.modal {\n    box-shadow: var(--box-shadow--lg);\n}\n\n.card-primary {\n    --box-shadow-color: 0.6109 0.1903 263.71;\n    box-shadow: var(--box-shadow--md);\n}\n",[697,3468,3469,3477,3492,3502,3574,3646,3718,3790,3804,3808,3812,3822,3839,3843,3847,3856,3870,3874,3878,3887,3904,3918],{"__ignoreMap":791},[795,3470,3471,3473,3475],{"class":797,"line":798},[795,3472,1023],{"class":805},[795,3474,1026],{"class":864},[795,3476,892],{"class":805},[795,3478,3479,3482,3484,3486,3488,3490],{"class":797,"line":832},[795,3480,3481],{"class":809},"    --box-shadow-color",[795,3483,1023],{"class":805},[795,3485,1051],{"class":1050},[795,3487,1051],{"class":1050},[795,3489,1051],{"class":1050},[795,3491,829],{"class":805},[795,3493,3494,3496,3498,3500],{"class":797,"line":855},[795,3495,1033],{"class":809},[795,3497,1023],{"class":805},[795,3499,1038],{"class":809},[795,3501,829],{"class":805},[795,3503,3504,3506,3508,3510,3512,3514,3516,3518,3520,3522,3524,3526,3528,3530,3532,3534,3536,3538,3540,3542,3544,3546,3548,3550,3552,3554,3556,3558,3560,3562,3564,3566,3568,3570,3572],{"class":797,"line":861},[795,3505,1045],{"class":809},[795,3507,1023],{"class":805},[795,3509,1051],{"class":1050},[795,3511,1054],{"class":1050},[795,3513,1054],{"class":1050},[795,3515,1059],{"class":874},[795,3517,1062],{"class":805},[795,3519,1065],{"class":874},[795,3521,1062],{"class":805},[795,3523,1070],{"class":809},[795,3525,1073],{"class":805},[795,3527,1051],{"class":1050},[795,3529,1051],{"class":1050},[795,3531,1051],{"class":1050},[795,3533,1082],{"class":805},[795,3535,1085],{"class":809},[795,3537,1088],{"class":1050},[795,3539,1091],{"class":805},[795,3541,1051],{"class":1050},[795,3543,1096],{"class":1050},[795,3545,1096],{"class":1050},[795,3547,1101],{"class":1050},[795,3549,1059],{"class":874},[795,3551,1062],{"class":805},[795,3553,1065],{"class":874},[795,3555,1062],{"class":805},[795,3557,1070],{"class":809},[795,3559,1073],{"class":805},[795,3561,1051],{"class":1050},[795,3563,1051],{"class":1050},[795,3565,1051],{"class":1050},[795,3567,1082],{"class":805},[795,3569,1085],{"class":809},[795,3571,1126],{"class":1050},[795,3573,1129],{"class":805},[795,3575,3576,3578,3580,3582,3584,3586,3588,3590,3592,3594,3596,3598,3600,3602,3604,3606,3608,3610,3612,3614,3616,3618,3620,3622,3624,3626,3628,3630,3632,3634,3636,3638,3640,3642,3644],{"class":797,"line":882},[795,3577,1134],{"class":809},[795,3579,1023],{"class":805},[795,3581,1051],{"class":1050},[795,3583,1054],{"class":1050},[795,3585,1096],{"class":1050},[795,3587,1059],{"class":874},[795,3589,1062],{"class":805},[795,3591,1065],{"class":874},[795,3593,1062],{"class":805},[795,3595,1070],{"class":809},[795,3597,1073],{"class":805},[795,3599,1051],{"class":1050},[795,3601,1051],{"class":1050},[795,3603,1051],{"class":1050},[795,3605,1082],{"class":805},[795,3607,1085],{"class":809},[795,3609,1167],{"class":1050},[795,3611,1091],{"class":805},[795,3613,1051],{"class":1050},[795,3615,1174],{"class":1050},[795,3617,1177],{"class":1050},[795,3619,1101],{"class":1050},[795,3621,1059],{"class":874},[795,3623,1062],{"class":805},[795,3625,1065],{"class":874},[795,3627,1062],{"class":805},[795,3629,1070],{"class":809},[795,3631,1073],{"class":805},[795,3633,1051],{"class":1050},[795,3635,1051],{"class":1050},[795,3637,1051],{"class":1050},[795,3639,1082],{"class":805},[795,3641,1085],{"class":809},[795,3643,1204],{"class":1050},[795,3645,1129],{"class":805},[795,3647,3648,3650,3652,3654,3656,3658,3660,3662,3664,3666,3668,3670,3672,3674,3676,3678,3680,3682,3684,3686,3688,3690,3692,3694,3696,3698,3700,3702,3704,3706,3708,3710,3712,3714,3716],{"class":797,"line":887},[795,3649,1211],{"class":809},[795,3651,1023],{"class":805},[795,3653,1051],{"class":1050},[795,3655,1096],{"class":1050},[795,3657,1220],{"class":1050},[795,3659,1059],{"class":874},[795,3661,1062],{"class":805},[795,3663,1065],{"class":874},[795,3665,1062],{"class":805},[795,3667,1070],{"class":809},[795,3669,1073],{"class":805},[795,3671,1051],{"class":1050},[795,3673,1051],{"class":1050},[795,3675,1051],{"class":1050},[795,3677,1082],{"class":805},[795,3679,1085],{"class":809},[795,3681,1245],{"class":1050},[795,3683,1091],{"class":805},[795,3685,1051],{"class":1050},[795,3687,1252],{"class":1050},[795,3689,1255],{"class":1050},[795,3691,1258],{"class":1050},[795,3693,1059],{"class":874},[795,3695,1062],{"class":805},[795,3697,1065],{"class":874},[795,3699,1062],{"class":805},[795,3701,1070],{"class":809},[795,3703,1073],{"class":805},[795,3705,1051],{"class":1050},[795,3707,1051],{"class":1050},[795,3709,1051],{"class":1050},[795,3711,1082],{"class":805},[795,3713,1085],{"class":809},[795,3715,1204],{"class":1050},[795,3717,1129],{"class":805},[795,3719,3720,3722,3724,3726,3728,3730,3732,3734,3736,3738,3740,3742,3744,3746,3748,3750,3752,3754,3756,3758,3760,3762,3764,3766,3768,3770,3772,3774,3776,3778,3780,3782,3784,3786,3788],{"class":797,"line":895},[795,3721,1289],{"class":809},[795,3723,1023],{"class":805},[795,3725,1051],{"class":1050},[795,3727,1220],{"class":1050},[795,3729,1252],{"class":1050},[795,3731,1059],{"class":874},[795,3733,1062],{"class":805},[795,3735,1065],{"class":874},[795,3737,1062],{"class":805},[795,3739,1070],{"class":809},[795,3741,1073],{"class":805},[795,3743,1051],{"class":1050},[795,3745,1051],{"class":1050},[795,3747,1051],{"class":1050},[795,3749,1082],{"class":805},[795,3751,1085],{"class":809},[795,3753,1322],{"class":1050},[795,3755,1091],{"class":805},[795,3757,1051],{"class":1050},[795,3759,1255],{"class":1050},[795,3761,1331],{"class":1050},[795,3763,1334],{"class":1050},[795,3765,1059],{"class":874},[795,3767,1062],{"class":805},[795,3769,1065],{"class":874},[795,3771,1062],{"class":805},[795,3773,1070],{"class":809},[795,3775,1073],{"class":805},[795,3777,1051],{"class":1050},[795,3779,1051],{"class":1050},[795,3781,1051],{"class":1050},[795,3783,1082],{"class":805},[795,3785,1085],{"class":809},[795,3787,1088],{"class":1050},[795,3789,1129],{"class":805},[795,3791,3792,3794,3796,3798,3800,3802],{"class":797,"line":904},[795,3793,1672],{"class":809},[795,3795,1023],{"class":805},[795,3797,1677],{"class":874},[795,3799,1062],{"class":805},[795,3801,1682],{"class":809},[795,3803,1129],{"class":805},[795,3805,3806],{"class":797,"line":912},[795,3807,1689],{"class":805},[795,3809,3810],{"class":797,"line":920},[795,3811,858],{"emptyLinePlaceholder":223},[795,3813,3814,3816,3820],{"class":797,"line":928},[795,3815,3153],{"class":805},[795,3817,3819],{"class":3818},"sBMFI","card",[795,3821,892],{"class":805},[795,3823,3824,3828,3830,3832,3834,3837],{"class":797,"line":936},[795,3825,3827],{"class":3826},"sqsOY","    box-shadow",[795,3829,1023],{"class":805},[795,3831,1677],{"class":874},[795,3833,1062],{"class":805},[795,3835,3836],{"class":809},"--box-shadow",[795,3838,1129],{"class":805},[795,3840,3841],{"class":797,"line":944},[795,3842,1689],{"class":805},[795,3844,3845],{"class":797,"line":952},[795,3846,858],{"emptyLinePlaceholder":223},[795,3848,3849,3851,3854],{"class":797,"line":960},[795,3850,3153],{"class":805},[795,3852,3853],{"class":3818},"modal",[795,3855,892],{"class":805},[795,3857,3858,3860,3862,3864,3866,3868],{"class":797,"line":968},[795,3859,3827],{"class":3826},[795,3861,1023],{"class":805},[795,3863,1677],{"class":874},[795,3865,1062],{"class":805},[795,3867,2559],{"class":809},[795,3869,1129],{"class":805},[795,3871,3872],{"class":797,"line":976},[795,3873,1689],{"class":805},[795,3875,3876],{"class":797,"line":992},[795,3877,858],{"emptyLinePlaceholder":223},[795,3879,3880,3882,3885],{"class":797,"line":997},[795,3881,3153],{"class":805},[795,3883,3884],{"class":3818},"card-primary",[795,3886,892],{"class":805},[795,3888,3889,3891,3893,3896,3899,3902],{"class":797,"line":2790},[795,3890,3481],{"class":809},[795,3892,1023],{"class":805},[795,3894,3895],{"class":1050}," 0.6109",[795,3897,3898],{"class":1050}," 0.1903",[795,3900,3901],{"class":1050}," 263.71",[795,3903,829],{"class":805},[795,3905,3906,3908,3910,3912,3914,3916],{"class":797,"line":3287},[795,3907,3827],{"class":3826},[795,3909,1023],{"class":805},[795,3911,1677],{"class":874},[795,3913,1062],{"class":805},[795,3915,1682],{"class":809},[795,3917,1129],{"class":805},[795,3919,3920],{"class":797,"line":3305},[795,3921,1689],{"class":805},[3019,3923,3924,3926,3927,3929,3930,3933,3934,3936],{},[692,3925,3023],{}," The ",[697,3928,1070],{}," variable expects OKLCH values without the ",[697,3931,3932],{},"oklch()"," wrapper (e.g., ",[697,3935,1782],{}," for lightness, chroma, and hue). This format works with the modern CSS color syntax used in the shadow definitions.",[715,3938,3940],{"id":3939},"examples","Examples",[1785,3942,3944],{"id":3943},"custom-shadow-system","Custom Shadow System",[719,3946,3947],{},"Here's how to create a complete shadow system with semantic naming for different UI components:",[778,3949,3950,5040],{},[781,3951,3952],{"icon":783,"label":290},[785,3953,3955],{"className":787,"code":3954,"filename":789,"language":790,"meta":791,"style":791},"import { styleframe } from 'styleframe';\nimport { useBoxShadowDesignTokens } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\nconst { ref, selector, css, variable } = s;\n\n\u002F\u002F Create a box shadow color variable\nconst boxShadowColor = variable('box-shadow-color', '0 0 0');\n\n\u002F\u002F Create custom shadow system\nconst {\n    boxShadowNone,\n    boxShadowCard,\n    boxShadowButton,\n    boxShadowDropdown,\n    boxShadowModal,\n    boxShadowDrawer,\n    boxShadowToast,\n    boxShadowFocus,\n    boxShadowInset,\n} = useBoxShadowDesignTokens(s, {\n    none: 'none',\n    card: css`0 1px 3px oklch(${ ref(boxShadowColor) } \u002F 0.12), 0 1px 2px oklch(${ ref(boxShadowColor) } \u002F 0.06)`,\n    button: css`0 1px 2px oklch(${ ref(boxShadowColor) } \u002F 0.14), 0 2px 4px oklch(${ ref(boxShadowColor) } \u002F 0.10)`,\n    dropdown: css`0 4px 6px oklch(${ ref(boxShadowColor) } \u002F 0.16), 0 10px 20px -4px oklch(${ ref(boxShadowColor) } \u002F 0.10)`,\n    modal: css`0 8px 16px oklch(${ ref(boxShadowColor) } \u002F 0.18), 0 20px 40px -8px oklch(${ ref(boxShadowColor) } \u002F 0.12)`,\n    drawer: css`0 12px 24px oklch(${ ref(boxShadowColor) } \u002F 0.20), 0 30px 60px -12px oklch(${ ref(boxShadowColor) } \u002F 0.14)`,\n    toast: css`0 16px 32px oklch(${ ref(boxShadowColor) } \u002F 0.22), 0 40px 80px -16px oklch(${ ref(boxShadowColor) } \u002F 0.16)`,\n    focus: css`0 0 0 3px oklch(0.6109 0.1903 263.71 \u002F 0.3)`,\n    inset: css`inset 0 2px 4px oklch(${ ref(boxShadowColor) } \u002F 0.08)`,\n});\n\n\u002F\u002F Apply to components\nselector('.card', {\n    boxShadow: ref(boxShadowCard),\n    transition: 'box-shadow 0.2s ease',\n    '&:hover': {\n        boxShadow: ref(boxShadowButton),\n    },\n});\n\nselector('.btn', {\n    boxShadow: ref(boxShadowButton),\n    '&:active': {\n        boxShadow: ref(boxShadowNone),\n        transform: 'translateY(1px)',\n    },\n    '&:focus-visible': {\n        boxShadow: css`${boxShadowButton}, ${boxShadowFocus}`,\n    },\n});\n\nselector('.dropdown', {\n    boxShadow: ref(boxShadowDropdown),\n});\n\nselector('.modal', {\n    boxShadow: ref(boxShadowModal),\n});\n\nselector('.drawer', {\n    boxShadow: ref(boxShadowDrawer),\n});\n\nselector('.toast', {\n    boxShadow: ref(boxShadowToast),\n});\n\nselector('.input', {\n    '&:focus': {\n        boxShadow: ref(boxShadowFocus),\n    },\n});\n\nselector('.well', {\n    boxShadow: ref(boxShadowInset),\n});\n\nexport default s;\n",[697,3956,3957,3977,3997,4001,4015,4045,4049,4054,4085,4089,4094,4100,4106,4113,4120,4127,4134,4141,4148,4155,4162,4176,4190,4233,4273,4312,4352,4392,4432,4450,4479,4487,4491,4496,4512,4526,4543,4558,4572,4578,4587,4592,4610,4623,4637,4651,4668,4673,4687,4716,4721,4730,4735,4753,4767,4776,4781,4798,4812,4821,4826,4844,4858,4867,4872,4890,4904,4913,4918,4936,4950,4964,4969,4978,4983,5001,5015,5024,5029],{"__ignoreMap":791},[795,3958,3959,3961,3963,3965,3967,3969,3971,3973,3975],{"class":797,"line":798},[795,3960,802],{"class":801},[795,3962,806],{"class":805},[795,3964,810],{"class":809},[795,3966,813],{"class":805},[795,3968,816],{"class":801},[795,3970,819],{"class":805},[795,3972,823],{"class":822},[795,3974,826],{"class":805},[795,3976,829],{"class":805},[795,3978,3979,3981,3983,3985,3987,3989,3991,3993,3995],{"class":797,"line":832},[795,3980,802],{"class":801},[795,3982,806],{"class":805},[795,3984,839],{"class":809},[795,3986,813],{"class":805},[795,3988,816],{"class":801},[795,3990,819],{"class":805},[795,3992,848],{"class":822},[795,3994,826],{"class":805},[795,3996,829],{"class":805},[795,3998,3999],{"class":797,"line":855},[795,4000,858],{"emptyLinePlaceholder":223},[795,4002,4003,4005,4007,4009,4011,4013],{"class":797,"line":861},[795,4004,865],{"class":864},[795,4006,868],{"class":809},[795,4008,871],{"class":805},[795,4010,810],{"class":874},[795,4012,877],{"class":809},[795,4014,829],{"class":805},[795,4016,4017,4019,4021,4023,4025,4027,4029,4032,4034,4037,4039,4041,4043],{"class":797,"line":882},[795,4018,865],{"class":864},[795,4020,806],{"class":805},[795,4022,3111],{"class":809},[795,4024,1073],{"class":805},[795,4026,3116],{"class":809},[795,4028,1073],{"class":805},[795,4030,4031],{"class":809}," css",[795,4033,1073],{"class":805},[795,4035,4036],{"class":809}," variable ",[795,4038,979],{"class":805},[795,4040,982],{"class":805},[795,4042,1006],{"class":809},[795,4044,829],{"class":805},[795,4046,4047],{"class":797,"line":887},[795,4048,858],{"emptyLinePlaceholder":223},[795,4050,4051],{"class":797,"line":895},[795,4052,4053],{"class":3138},"\u002F\u002F Create a box shadow color variable\n",[795,4055,4056,4058,4060,4062,4065,4067,4069,4071,4073,4075,4077,4079,4081,4083],{"class":797,"line":904},[795,4057,865],{"class":864},[795,4059,3146],{"class":809},[795,4061,871],{"class":805},[795,4063,4064],{"class":874}," variable",[795,4066,1062],{"class":809},[795,4068,826],{"class":805},[795,4070,3163],{"class":822},[795,4072,826],{"class":805},[795,4074,1073],{"class":805},[795,4076,819],{"class":805},[795,4078,1782],{"class":822},[795,4080,826],{"class":805},[795,4082,1082],{"class":809},[795,4084,829],{"class":805},[795,4086,4087],{"class":797,"line":912},[795,4088,858],{"emptyLinePlaceholder":223},[795,4090,4091],{"class":797,"line":920},[795,4092,4093],{"class":3138},"\u002F\u002F Create custom shadow system\n",[795,4095,4096,4098],{"class":797,"line":928},[795,4097,865],{"class":864},[795,4099,892],{"class":805},[795,4101,4102,4104],{"class":797,"line":936},[795,4103,907],{"class":809},[795,4105,901],{"class":805},[795,4107,4108,4111],{"class":797,"line":944},[795,4109,4110],{"class":809},"    boxShadowCard",[795,4112,901],{"class":805},[795,4114,4115,4118],{"class":797,"line":952},[795,4116,4117],{"class":809},"    boxShadowButton",[795,4119,901],{"class":805},[795,4121,4122,4125],{"class":797,"line":960},[795,4123,4124],{"class":809},"    boxShadowDropdown",[795,4126,901],{"class":805},[795,4128,4129,4132],{"class":797,"line":968},[795,4130,4131],{"class":809},"    boxShadowModal",[795,4133,901],{"class":805},[795,4135,4136,4139],{"class":797,"line":976},[795,4137,4138],{"class":809},"    boxShadowDrawer",[795,4140,901],{"class":805},[795,4142,4143,4146],{"class":797,"line":992},[795,4144,4145],{"class":809},"    boxShadowToast",[795,4147,901],{"class":805},[795,4149,4150,4153],{"class":797,"line":997},[795,4151,4152],{"class":809},"    boxShadowFocus",[795,4154,901],{"class":805},[795,4156,4157,4160],{"class":797,"line":2790},[795,4158,4159],{"class":809},"    boxShadowInset",[795,4161,901],{"class":805},[795,4163,4164,4166,4168,4170,4172,4174],{"class":797,"line":3287},[795,4165,979],{"class":805},[795,4167,982],{"class":805},[795,4169,839],{"class":874},[795,4171,1889],{"class":809},[795,4173,1073],{"class":805},[795,4175,892],{"class":805},[795,4177,4178,4180,4182,4184,4186,4188],{"class":797,"line":3305},[795,4179,2717],{"class":1908},[795,4181,1023],{"class":805},[795,4183,819],{"class":805},[795,4185,1701],{"class":822},[795,4187,826],{"class":805},[795,4189,901],{"class":805},[795,4191,4192,4195,4197,4199,4202,4205,4208,4210,4213,4215,4218,4220,4222,4224,4226,4229,4231],{"class":797,"line":3319},[795,4193,4194],{"class":1908},"    card",[795,4196,1023],{"class":805},[795,4198,4031],{"class":874},[795,4200,4201],{"class":805},"`",[795,4203,4204],{"class":822},"0 1px 3px oklch(",[795,4206,4207],{"class":805},"${",[795,4209,3111],{"class":874},[795,4211,4212],{"class":809},"(boxShadowColor) ",[795,4214,979],{"class":805},[795,4216,4217],{"class":822}," \u002F 0.12), 0 1px 2px oklch(",[795,4219,4207],{"class":805},[795,4221,3111],{"class":874},[795,4223,4212],{"class":809},[795,4225,979],{"class":805},[795,4227,4228],{"class":822}," \u002F 0.06)",[795,4230,4201],{"class":805},[795,4232,901],{"class":805},[795,4234,4235,4238,4240,4242,4244,4247,4249,4251,4253,4255,4258,4260,4262,4264,4266,4269,4271],{"class":797,"line":3328},[795,4236,4237],{"class":1908},"    button",[795,4239,1023],{"class":805},[795,4241,4031],{"class":874},[795,4243,4201],{"class":805},[795,4245,4246],{"class":822},"0 1px 2px oklch(",[795,4248,4207],{"class":805},[795,4250,3111],{"class":874},[795,4252,4212],{"class":809},[795,4254,979],{"class":805},[795,4256,4257],{"class":822}," \u002F 0.14), 0 2px 4px oklch(",[795,4259,4207],{"class":805},[795,4261,3111],{"class":874},[795,4263,4212],{"class":809},[795,4265,979],{"class":805},[795,4267,4268],{"class":822}," \u002F 0.10)",[795,4270,4201],{"class":805},[795,4272,901],{"class":805},[795,4274,4275,4278,4280,4282,4284,4287,4289,4291,4293,4295,4298,4300,4302,4304,4306,4308,4310],{"class":797,"line":3333},[795,4276,4277],{"class":1908},"    dropdown",[795,4279,1023],{"class":805},[795,4281,4031],{"class":874},[795,4283,4201],{"class":805},[795,4285,4286],{"class":822},"0 4px 6px oklch(",[795,4288,4207],{"class":805},[795,4290,3111],{"class":874},[795,4292,4212],{"class":809},[795,4294,979],{"class":805},[795,4296,4297],{"class":822}," \u002F 0.16), 0 10px 20px -4px oklch(",[795,4299,4207],{"class":805},[795,4301,3111],{"class":874},[795,4303,4212],{"class":809},[795,4305,979],{"class":805},[795,4307,4268],{"class":822},[795,4309,4201],{"class":805},[795,4311,901],{"class":805},[795,4313,4314,4317,4319,4321,4323,4326,4328,4330,4332,4334,4337,4339,4341,4343,4345,4348,4350],{"class":797,"line":3339},[795,4315,4316],{"class":1908},"    modal",[795,4318,1023],{"class":805},[795,4320,4031],{"class":874},[795,4322,4201],{"class":805},[795,4324,4325],{"class":822},"0 8px 16px oklch(",[795,4327,4207],{"class":805},[795,4329,3111],{"class":874},[795,4331,4212],{"class":809},[795,4333,979],{"class":805},[795,4335,4336],{"class":822}," \u002F 0.18), 0 20px 40px -8px oklch(",[795,4338,4207],{"class":805},[795,4340,3111],{"class":874},[795,4342,4212],{"class":809},[795,4344,979],{"class":805},[795,4346,4347],{"class":822}," \u002F 0.12)",[795,4349,4201],{"class":805},[795,4351,901],{"class":805},[795,4353,4354,4357,4359,4361,4363,4366,4368,4370,4372,4374,4377,4379,4381,4383,4385,4388,4390],{"class":797,"line":3368},[795,4355,4356],{"class":1908},"    drawer",[795,4358,1023],{"class":805},[795,4360,4031],{"class":874},[795,4362,4201],{"class":805},[795,4364,4365],{"class":822},"0 12px 24px oklch(",[795,4367,4207],{"class":805},[795,4369,3111],{"class":874},[795,4371,4212],{"class":809},[795,4373,979],{"class":805},[795,4375,4376],{"class":822}," \u002F 0.20), 0 30px 60px -12px oklch(",[795,4378,4207],{"class":805},[795,4380,3111],{"class":874},[795,4382,4212],{"class":809},[795,4384,979],{"class":805},[795,4386,4387],{"class":822}," \u002F 0.14)",[795,4389,4201],{"class":805},[795,4391,901],{"class":805},[795,4393,4394,4397,4399,4401,4403,4406,4408,4410,4412,4414,4417,4419,4421,4423,4425,4428,4430],{"class":797,"line":3400},[795,4395,4396],{"class":1908},"    toast",[795,4398,1023],{"class":805},[795,4400,4031],{"class":874},[795,4402,4201],{"class":805},[795,4404,4405],{"class":822},"0 16px 32px oklch(",[795,4407,4207],{"class":805},[795,4409,3111],{"class":874},[795,4411,4212],{"class":809},[795,4413,979],{"class":805},[795,4415,4416],{"class":822}," \u002F 0.22), 0 40px 80px -16px oklch(",[795,4418,4207],{"class":805},[795,4420,3111],{"class":874},[795,4422,4212],{"class":809},[795,4424,979],{"class":805},[795,4426,4427],{"class":822}," \u002F 0.16)",[795,4429,4201],{"class":805},[795,4431,901],{"class":805},[795,4433,4434,4437,4439,4441,4443,4446,4448],{"class":797,"line":3406},[795,4435,4436],{"class":1908},"    focus",[795,4438,1023],{"class":805},[795,4440,4031],{"class":874},[795,4442,4201],{"class":805},[795,4444,4445],{"class":822},"0 0 0 3px oklch(0.6109 0.1903 263.71 \u002F 0.3)",[795,4447,4201],{"class":805},[795,4449,901],{"class":805},[795,4451,4452,4455,4457,4459,4461,4464,4466,4468,4470,4472,4475,4477],{"class":797,"line":3414},[795,4453,4454],{"class":1908},"    inset",[795,4456,1023],{"class":805},[795,4458,4031],{"class":874},[795,4460,4201],{"class":805},[795,4462,4463],{"class":822},"inset 0 2px 4px oklch(",[795,4465,4207],{"class":805},[795,4467,3111],{"class":874},[795,4469,4212],{"class":809},[795,4471,979],{"class":805},[795,4473,4474],{"class":822}," \u002F 0.08)",[795,4476,4201],{"class":805},[795,4478,901],{"class":805},[795,4480,4481,4483,4485],{"class":797,"line":3433},[795,4482,979],{"class":805},[795,4484,1082],{"class":809},[795,4486,829],{"class":805},[795,4488,4489],{"class":797,"line":3439},[795,4490,858],{"emptyLinePlaceholder":223},[795,4492,4493],{"class":797,"line":3448},[795,4494,4495],{"class":3138},"\u002F\u002F Apply to components\n",[795,4497,4498,4500,4502,4504,4506,4508,4510],{"class":797,"line":3453},[795,4499,3246],{"class":874},[795,4501,1062],{"class":809},[795,4503,826],{"class":805},[795,4505,3253],{"class":822},[795,4507,826],{"class":805},[795,4509,1073],{"class":805},[795,4511,892],{"class":805},[795,4513,4515,4517,4519,4521,4524],{"class":797,"line":4514},35,[795,4516,898],{"class":1908},[795,4518,1023],{"class":805},[795,4520,3111],{"class":874},[795,4522,4523],{"class":809},"(boxShadowCard)",[795,4525,901],{"class":805},[795,4527,4529,4532,4534,4536,4539,4541],{"class":797,"line":4528},36,[795,4530,4531],{"class":1908},"    transition",[795,4533,1023],{"class":805},[795,4535,819],{"class":805},[795,4537,4538],{"class":822},"box-shadow 0.2s ease",[795,4540,826],{"class":805},[795,4542,901],{"class":805},[795,4544,4546,4549,4552,4554,4556],{"class":797,"line":4545},37,[795,4547,4548],{"class":805},"    '",[795,4550,4551],{"class":1908},"&:hover",[795,4553,826],{"class":805},[795,4555,1023],{"class":805},[795,4557,892],{"class":805},[795,4559,4561,4563,4565,4567,4570],{"class":797,"line":4560},38,[795,4562,3417],{"class":1908},[795,4564,1023],{"class":805},[795,4566,3111],{"class":874},[795,4568,4569],{"class":809},"(boxShadowButton)",[795,4571,901],{"class":805},[795,4573,4575],{"class":797,"line":4574},39,[795,4576,4577],{"class":805},"    },\n",[795,4579,4581,4583,4585],{"class":797,"line":4580},40,[795,4582,979],{"class":805},[795,4584,1082],{"class":809},[795,4586,829],{"class":805},[795,4588,4590],{"class":797,"line":4589},41,[795,4591,858],{"emptyLinePlaceholder":223},[795,4593,4595,4597,4599,4601,4604,4606,4608],{"class":797,"line":4594},42,[795,4596,3246],{"class":874},[795,4598,1062],{"class":809},[795,4600,826],{"class":805},[795,4602,4603],{"class":822},".btn",[795,4605,826],{"class":805},[795,4607,1073],{"class":805},[795,4609,892],{"class":805},[795,4611,4613,4615,4617,4619,4621],{"class":797,"line":4612},43,[795,4614,898],{"class":1908},[795,4616,1023],{"class":805},[795,4618,3111],{"class":874},[795,4620,4569],{"class":809},[795,4622,901],{"class":805},[795,4624,4626,4628,4631,4633,4635],{"class":797,"line":4625},44,[795,4627,4548],{"class":805},[795,4629,4630],{"class":1908},"&:active",[795,4632,826],{"class":805},[795,4634,1023],{"class":805},[795,4636,892],{"class":805},[795,4638,4640,4642,4644,4646,4649],{"class":797,"line":4639},45,[795,4641,3417],{"class":1908},[795,4643,1023],{"class":805},[795,4645,3111],{"class":874},[795,4647,4648],{"class":809},"(boxShadowNone)",[795,4650,901],{"class":805},[795,4652,4654,4657,4659,4661,4664,4666],{"class":797,"line":4653},46,[795,4655,4656],{"class":1908},"        transform",[795,4658,1023],{"class":805},[795,4660,819],{"class":805},[795,4662,4663],{"class":822},"translateY(1px)",[795,4665,826],{"class":805},[795,4667,901],{"class":805},[795,4669,4671],{"class":797,"line":4670},47,[795,4672,4577],{"class":805},[795,4674,4676,4678,4681,4683,4685],{"class":797,"line":4675},48,[795,4677,4548],{"class":805},[795,4679,4680],{"class":1908},"&:focus-visible",[795,4682,826],{"class":805},[795,4684,1023],{"class":805},[795,4686,892],{"class":805},[795,4688,4690,4692,4694,4696,4699,4702,4704,4706,4708,4711,4714],{"class":797,"line":4689},49,[795,4691,3417],{"class":1908},[795,4693,1023],{"class":805},[795,4695,4031],{"class":874},[795,4697,4698],{"class":805},"`${",[795,4700,4701],{"class":809},"boxShadowButton",[795,4703,979],{"class":805},[795,4705,3011],{"class":822},[795,4707,4207],{"class":805},[795,4709,4710],{"class":809},"boxShadowFocus",[795,4712,4713],{"class":805},"}`",[795,4715,901],{"class":805},[795,4717,4719],{"class":797,"line":4718},50,[795,4720,4577],{"class":805},[795,4722,4724,4726,4728],{"class":797,"line":4723},51,[795,4725,979],{"class":805},[795,4727,1082],{"class":809},[795,4729,829],{"class":805},[795,4731,4733],{"class":797,"line":4732},52,[795,4734,858],{"emptyLinePlaceholder":223},[795,4736,4738,4740,4742,4744,4747,4749,4751],{"class":797,"line":4737},53,[795,4739,3246],{"class":874},[795,4741,1062],{"class":809},[795,4743,826],{"class":805},[795,4745,4746],{"class":822},".dropdown",[795,4748,826],{"class":805},[795,4750,1073],{"class":805},[795,4752,892],{"class":805},[795,4754,4756,4758,4760,4762,4765],{"class":797,"line":4755},54,[795,4757,898],{"class":1908},[795,4759,1023],{"class":805},[795,4761,3111],{"class":874},[795,4763,4764],{"class":809},"(boxShadowDropdown)",[795,4766,901],{"class":805},[795,4768,4770,4772,4774],{"class":797,"line":4769},55,[795,4771,979],{"class":805},[795,4773,1082],{"class":809},[795,4775,829],{"class":805},[795,4777,4779],{"class":797,"line":4778},56,[795,4780,858],{"emptyLinePlaceholder":223},[795,4782,4784,4786,4788,4790,4792,4794,4796],{"class":797,"line":4783},57,[795,4785,3246],{"class":874},[795,4787,1062],{"class":809},[795,4789,826],{"class":805},[795,4791,3296],{"class":822},[795,4793,826],{"class":805},[795,4795,1073],{"class":805},[795,4797,892],{"class":805},[795,4799,4801,4803,4805,4807,4810],{"class":797,"line":4800},58,[795,4802,898],{"class":1908},[795,4804,1023],{"class":805},[795,4806,3111],{"class":874},[795,4808,4809],{"class":809},"(boxShadowModal)",[795,4811,901],{"class":805},[795,4813,4815,4817,4819],{"class":797,"line":4814},59,[795,4816,979],{"class":805},[795,4818,1082],{"class":809},[795,4820,829],{"class":805},[795,4822,4824],{"class":797,"line":4823},60,[795,4825,858],{"emptyLinePlaceholder":223},[795,4827,4829,4831,4833,4835,4838,4840,4842],{"class":797,"line":4828},61,[795,4830,3246],{"class":874},[795,4832,1062],{"class":809},[795,4834,826],{"class":805},[795,4836,4837],{"class":822},".drawer",[795,4839,826],{"class":805},[795,4841,1073],{"class":805},[795,4843,892],{"class":805},[795,4845,4847,4849,4851,4853,4856],{"class":797,"line":4846},62,[795,4848,898],{"class":1908},[795,4850,1023],{"class":805},[795,4852,3111],{"class":874},[795,4854,4855],{"class":809},"(boxShadowDrawer)",[795,4857,901],{"class":805},[795,4859,4861,4863,4865],{"class":797,"line":4860},63,[795,4862,979],{"class":805},[795,4864,1082],{"class":809},[795,4866,829],{"class":805},[795,4868,4870],{"class":797,"line":4869},64,[795,4871,858],{"emptyLinePlaceholder":223},[795,4873,4875,4877,4879,4881,4884,4886,4888],{"class":797,"line":4874},65,[795,4876,3246],{"class":874},[795,4878,1062],{"class":809},[795,4880,826],{"class":805},[795,4882,4883],{"class":822},".toast",[795,4885,826],{"class":805},[795,4887,1073],{"class":805},[795,4889,892],{"class":805},[795,4891,4893,4895,4897,4899,4902],{"class":797,"line":4892},66,[795,4894,898],{"class":1908},[795,4896,1023],{"class":805},[795,4898,3111],{"class":874},[795,4900,4901],{"class":809},"(boxShadowToast)",[795,4903,901],{"class":805},[795,4905,4907,4909,4911],{"class":797,"line":4906},67,[795,4908,979],{"class":805},[795,4910,1082],{"class":809},[795,4912,829],{"class":805},[795,4914,4916],{"class":797,"line":4915},68,[795,4917,858],{"emptyLinePlaceholder":223},[795,4919,4921,4923,4925,4927,4930,4932,4934],{"class":797,"line":4920},69,[795,4922,3246],{"class":874},[795,4924,1062],{"class":809},[795,4926,826],{"class":805},[795,4928,4929],{"class":822},".input",[795,4931,826],{"class":805},[795,4933,1073],{"class":805},[795,4935,892],{"class":805},[795,4937,4939,4941,4944,4946,4948],{"class":797,"line":4938},70,[795,4940,4548],{"class":805},[795,4942,4943],{"class":1908},"&:focus",[795,4945,826],{"class":805},[795,4947,1023],{"class":805},[795,4949,892],{"class":805},[795,4951,4953,4955,4957,4959,4962],{"class":797,"line":4952},71,[795,4954,3417],{"class":1908},[795,4956,1023],{"class":805},[795,4958,3111],{"class":874},[795,4960,4961],{"class":809},"(boxShadowFocus)",[795,4963,901],{"class":805},[795,4965,4967],{"class":797,"line":4966},72,[795,4968,4577],{"class":805},[795,4970,4972,4974,4976],{"class":797,"line":4971},73,[795,4973,979],{"class":805},[795,4975,1082],{"class":809},[795,4977,829],{"class":805},[795,4979,4981],{"class":797,"line":4980},74,[795,4982,858],{"emptyLinePlaceholder":223},[795,4984,4986,4988,4990,4992,4995,4997,4999],{"class":797,"line":4985},75,[795,4987,3246],{"class":874},[795,4989,1062],{"class":809},[795,4991,826],{"class":805},[795,4993,4994],{"class":822},".well",[795,4996,826],{"class":805},[795,4998,1073],{"class":805},[795,5000,892],{"class":805},[795,5002,5004,5006,5008,5010,5013],{"class":797,"line":5003},76,[795,5005,898],{"class":1908},[795,5007,1023],{"class":805},[795,5009,3111],{"class":874},[795,5011,5012],{"class":809},"(boxShadowInset)",[795,5014,901],{"class":805},[795,5016,5018,5020,5022],{"class":797,"line":5017},77,[795,5019,979],{"class":805},[795,5021,1082],{"class":809},[795,5023,829],{"class":805},[795,5025,5027],{"class":797,"line":5026},78,[795,5028,858],{"emptyLinePlaceholder":223},[795,5030,5032,5034,5036,5038],{"class":797,"line":5031},79,[795,5033,1000],{"class":801},[795,5035,1003],{"class":801},[795,5037,1006],{"class":809},[795,5039,829],{"class":805},[781,5041,5042],{"icon":154,"label":326},[785,5043,5045],{"className":1013,"code":5044,"filename":1015,"language":1016,"meta":791,"style":791},":root {\n    --box-shadow-color: 0 0 0;\n    --box-shadow--none: none;\n    --box-shadow--card: 0 1px 3px oklch(var(--box-shadow-color) \u002F 0.12), 0 1px 2px oklch(var(--box-shadow-color) \u002F 0.06);\n    --box-shadow--button: 0 1px 2px oklch(var(--box-shadow-color) \u002F 0.14), 0 2px 4px oklch(var(--box-shadow-color) \u002F 0.10);\n    --box-shadow--dropdown: 0 4px 6px oklch(var(--box-shadow-color) \u002F 0.16), 0 10px 20px -4px oklch(var(--box-shadow-color) \u002F 0.10);\n    --box-shadow--modal: 0 8px 16px oklch(var(--box-shadow-color) \u002F 0.18), 0 20px 40px -8px oklch(var(--box-shadow-color) \u002F 0.12);\n    --box-shadow--drawer: 0 12px 24px oklch(var(--box-shadow-color) \u002F 0.20), 0 30px 60px -12px oklch(var(--box-shadow-color) \u002F 0.14);\n    --box-shadow--toast: 0 16px 32px oklch(var(--box-shadow-color) \u002F 0.22), 0 40px 80px -16px oklch(var(--box-shadow-color) \u002F 0.16);\n    --box-shadow--focus: 0 0 0 3px oklch(0.6109 0.1903 263.71 \u002F 0.3);\n    --box-shadow--inset: inset 0 2px 4px oklch(var(--box-shadow-color) \u002F 0.08);\n}\n\n.card {\n    box-shadow: var(--box-shadow--card);\n    transition: box-shadow 0.2s ease;\n\n    &:hover {\n        box-shadow: var(--box-shadow--button);\n    }\n}\n\n.btn {\n    box-shadow: var(--box-shadow--button);\n\n    &:active {\n        box-shadow: var(--box-shadow--none);\n        transform: translateY(1px);\n    }\n\n    &:focus-visible {\n        box-shadow: var(--box-shadow--button), var(--box-shadow--focus);\n    }\n}\n\n.dropdown {\n    box-shadow: var(--box-shadow--dropdown);\n}\n\n.modal {\n    box-shadow: var(--box-shadow--modal);\n}\n\n.drawer {\n    box-shadow: var(--box-shadow--drawer);\n}\n\n.toast {\n    box-shadow: var(--box-shadow--toast);\n}\n\n.input:focus {\n    box-shadow: var(--box-shadow--focus);\n}\n\n.well {\n    box-shadow: var(--box-shadow--inset);\n}\n",[697,5046,5047,5055,5069,5079,5134,5189,5248,5306,5365,5423,5456,5489,5493,5497,5505,5520,5537,5541,5551,5565,5569,5573,5577,5586,5600,5604,5613,5626,5642,5646,5650,5661,5685,5689,5693,5697,5706,5721,5725,5729,5737,5752,5756,5760,5769,5784,5788,5792,5801,5816,5820,5824,5838,5852,5856,5860,5869,5884],{"__ignoreMap":791},[795,5048,5049,5051,5053],{"class":797,"line":798},[795,5050,1023],{"class":805},[795,5052,1026],{"class":864},[795,5054,892],{"class":805},[795,5056,5057,5059,5061,5063,5065,5067],{"class":797,"line":832},[795,5058,3481],{"class":809},[795,5060,1023],{"class":805},[795,5062,1051],{"class":1050},[795,5064,1051],{"class":1050},[795,5066,1051],{"class":1050},[795,5068,829],{"class":805},[795,5070,5071,5073,5075,5077],{"class":797,"line":855},[795,5072,1033],{"class":809},[795,5074,1023],{"class":805},[795,5076,1038],{"class":809},[795,5078,829],{"class":805},[795,5080,5081,5084,5086,5088,5090,5092,5094,5096,5098,5100,5102,5104,5106,5108,5110,5112,5114,5116,5118,5120,5122,5124,5126,5128,5130,5132],{"class":797,"line":861},[795,5082,5083],{"class":809},"    --box-shadow--card",[795,5085,1023],{"class":805},[795,5087,1051],{"class":1050},[795,5089,1054],{"class":1050},[795,5091,1174],{"class":1050},[795,5093,1059],{"class":874},[795,5095,1062],{"class":805},[795,5097,1065],{"class":874},[795,5099,1062],{"class":805},[795,5101,1070],{"class":809},[795,5103,1082],{"class":805},[795,5105,1085],{"class":809},[795,5107,1088],{"class":1050},[795,5109,1091],{"class":805},[795,5111,1051],{"class":1050},[795,5113,1054],{"class":1050},[795,5115,1096],{"class":1050},[795,5117,1059],{"class":874},[795,5119,1062],{"class":805},[795,5121,1065],{"class":874},[795,5123,1062],{"class":805},[795,5125,1070],{"class":809},[795,5127,1082],{"class":805},[795,5129,1085],{"class":809},[795,5131,1126],{"class":1050},[795,5133,1129],{"class":805},[795,5135,5136,5139,5141,5143,5145,5147,5149,5151,5153,5155,5157,5159,5161,5163,5165,5167,5169,5171,5173,5175,5177,5179,5181,5183,5185,5187],{"class":797,"line":882},[795,5137,5138],{"class":809},"    --box-shadow--button",[795,5140,1023],{"class":805},[795,5142,1051],{"class":1050},[795,5144,1054],{"class":1050},[795,5146,1096],{"class":1050},[795,5148,1059],{"class":874},[795,5150,1062],{"class":805},[795,5152,1065],{"class":874},[795,5154,1062],{"class":805},[795,5156,1070],{"class":809},[795,5158,1082],{"class":805},[795,5160,1085],{"class":809},[795,5162,1167],{"class":1050},[795,5164,1091],{"class":805},[795,5166,1051],{"class":1050},[795,5168,1096],{"class":1050},[795,5170,1220],{"class":1050},[795,5172,1059],{"class":874},[795,5174,1062],{"class":805},[795,5176,1065],{"class":874},[795,5178,1062],{"class":805},[795,5180,1070],{"class":809},[795,5182,1082],{"class":805},[795,5184,1085],{"class":809},[795,5186,1204],{"class":1050},[795,5188,1129],{"class":805},[795,5190,5191,5194,5196,5198,5200,5202,5204,5206,5208,5210,5212,5214,5216,5218,5220,5222,5225,5228,5230,5232,5234,5236,5238,5240,5242,5244,5246],{"class":797,"line":887},[795,5192,5193],{"class":809},"    --box-shadow--dropdown",[795,5195,1023],{"class":805},[795,5197,1051],{"class":1050},[795,5199,1220],{"class":1050},[795,5201,1177],{"class":1050},[795,5203,1059],{"class":874},[795,5205,1062],{"class":805},[795,5207,1065],{"class":874},[795,5209,1062],{"class":805},[795,5211,1070],{"class":809},[795,5213,1082],{"class":805},[795,5215,1085],{"class":809},[795,5217,1245],{"class":1050},[795,5219,1091],{"class":805},[795,5221,1051],{"class":1050},[795,5223,5224],{"class":1050}," 10px",[795,5226,5227],{"class":1050}," 20px",[795,5229,1258],{"class":1050},[795,5231,1059],{"class":874},[795,5233,1062],{"class":805},[795,5235,1065],{"class":874},[795,5237,1062],{"class":805},[795,5239,1070],{"class":809},[795,5241,1082],{"class":805},[795,5243,1085],{"class":809},[795,5245,1204],{"class":1050},[795,5247,1129],{"class":805},[795,5249,5250,5253,5255,5257,5259,5261,5263,5265,5267,5269,5271,5273,5275,5277,5279,5281,5283,5286,5288,5290,5292,5294,5296,5298,5300,5302,5304],{"class":797,"line":895},[795,5251,5252],{"class":809},"    --box-shadow--modal",[795,5254,1023],{"class":805},[795,5256,1051],{"class":1050},[795,5258,1252],{"class":1050},[795,5260,1255],{"class":1050},[795,5262,1059],{"class":874},[795,5264,1062],{"class":805},[795,5266,1065],{"class":874},[795,5268,1062],{"class":805},[795,5270,1070],{"class":809},[795,5272,1082],{"class":805},[795,5274,1085],{"class":809},[795,5276,1322],{"class":1050},[795,5278,1091],{"class":805},[795,5280,1051],{"class":1050},[795,5282,5227],{"class":1050},[795,5284,5285],{"class":1050}," 40px",[795,5287,1334],{"class":1050},[795,5289,1059],{"class":874},[795,5291,1062],{"class":805},[795,5293,1065],{"class":874},[795,5295,1062],{"class":805},[795,5297,1070],{"class":809},[795,5299,1082],{"class":805},[795,5301,1085],{"class":809},[795,5303,1088],{"class":1050},[795,5305,1129],{"class":805},[795,5307,5308,5311,5313,5315,5317,5319,5321,5323,5325,5327,5329,5331,5333,5335,5337,5339,5342,5345,5347,5349,5351,5353,5355,5357,5359,5361,5363],{"class":797,"line":904},[795,5309,5310],{"class":809},"    --box-shadow--drawer",[795,5312,1023],{"class":805},[795,5314,1051],{"class":1050},[795,5316,1374],{"class":1050},[795,5318,1331],{"class":1050},[795,5320,1059],{"class":874},[795,5322,1062],{"class":805},[795,5324,1065],{"class":874},[795,5326,1062],{"class":805},[795,5328,1070],{"class":809},[795,5330,1082],{"class":805},[795,5332,1085],{"class":809},[795,5334,1399],{"class":1050},[795,5336,1091],{"class":805},[795,5338,1051],{"class":1050},[795,5340,5341],{"class":1050}," 30px",[795,5343,5344],{"class":1050}," 60px",[795,5346,1411],{"class":1050},[795,5348,1059],{"class":874},[795,5350,1062],{"class":805},[795,5352,1065],{"class":874},[795,5354,1062],{"class":805},[795,5356,1070],{"class":809},[795,5358,1082],{"class":805},[795,5360,1085],{"class":809},[795,5362,1167],{"class":1050},[795,5364,1129],{"class":805},[795,5366,5367,5370,5372,5374,5376,5378,5380,5382,5384,5386,5388,5390,5392,5394,5396,5398,5400,5403,5405,5407,5409,5411,5413,5415,5417,5419,5421],{"class":797,"line":912},[795,5368,5369],{"class":809},"    --box-shadow--toast",[795,5371,1023],{"class":805},[795,5373,1051],{"class":1050},[795,5375,1255],{"class":1050},[795,5377,1482],{"class":1050},[795,5379,1059],{"class":874},[795,5381,1062],{"class":805},[795,5383,1065],{"class":874},[795,5385,1062],{"class":805},[795,5387,1070],{"class":809},[795,5389,1082],{"class":805},[795,5391,1085],{"class":809},[795,5393,1475],{"class":1050},[795,5395,1091],{"class":805},[795,5397,1051],{"class":1050},[795,5399,5285],{"class":1050},[795,5401,5402],{"class":1050}," 80px",[795,5404,1488],{"class":1050},[795,5406,1059],{"class":874},[795,5408,1062],{"class":805},[795,5410,1065],{"class":874},[795,5412,1062],{"class":805},[795,5414,1070],{"class":809},[795,5416,1082],{"class":805},[795,5418,1085],{"class":809},[795,5420,1245],{"class":1050},[795,5422,1129],{"class":805},[795,5424,5425,5428,5430,5432,5434,5436,5438,5440,5442,5445,5447,5449,5451,5454],{"class":797,"line":920},[795,5426,5427],{"class":809},"    --box-shadow--focus",[795,5429,1023],{"class":805},[795,5431,1051],{"class":1050},[795,5433,1051],{"class":1050},[795,5435,1051],{"class":1050},[795,5437,1174],{"class":1050},[795,5439,1059],{"class":874},[795,5441,1062],{"class":805},[795,5443,5444],{"class":1050},"0.6109",[795,5446,3898],{"class":1050},[795,5448,3901],{"class":1050},[795,5450,1085],{"class":809},[795,5452,5453],{"class":1050},"0.3",[795,5455,1129],{"class":805},[795,5457,5458,5461,5463,5465,5467,5469,5471,5473,5475,5477,5479,5481,5483,5485,5487],{"class":797,"line":928},[795,5459,5460],{"class":809},"    --box-shadow--inset",[795,5462,1023],{"class":805},[795,5464,1524],{"class":809},[795,5466,1527],{"class":1050},[795,5468,1096],{"class":1050},[795,5470,1220],{"class":1050},[795,5472,1059],{"class":874},[795,5474,1062],{"class":805},[795,5476,1065],{"class":874},[795,5478,1062],{"class":805},[795,5480,1070],{"class":809},[795,5482,1082],{"class":805},[795,5484,1085],{"class":809},[795,5486,1556],{"class":1050},[795,5488,1129],{"class":805},[795,5490,5491],{"class":797,"line":936},[795,5492,1689],{"class":805},[795,5494,5495],{"class":797,"line":944},[795,5496,858],{"emptyLinePlaceholder":223},[795,5498,5499,5501,5503],{"class":797,"line":952},[795,5500,3153],{"class":805},[795,5502,3819],{"class":3818},[795,5504,892],{"class":805},[795,5506,5507,5509,5511,5513,5515,5518],{"class":797,"line":960},[795,5508,3827],{"class":3826},[795,5510,1023],{"class":805},[795,5512,1677],{"class":874},[795,5514,1062],{"class":805},[795,5516,5517],{"class":809},"--box-shadow--card",[795,5519,1129],{"class":805},[795,5521,5522,5524,5526,5529,5532,5535],{"class":797,"line":968},[795,5523,4531],{"class":3826},[795,5525,1023],{"class":805},[795,5527,5528],{"class":809}," box-shadow ",[795,5530,5531],{"class":1050},"0.2s",[795,5533,5534],{"class":809}," ease",[795,5536,829],{"class":805},[795,5538,5539],{"class":797,"line":976},[795,5540,858],{"emptyLinePlaceholder":223},[795,5542,5543,5546,5548],{"class":797,"line":992},[795,5544,5545],{"class":809},"    &",[795,5547,1023],{"class":805},[795,5549,5550],{"class":809},"hover {\n",[795,5552,5553,5556,5558,5560,5563],{"class":797,"line":997},[795,5554,5555],{"class":809},"        box-shadow: ",[795,5557,1065],{"class":874},[795,5559,1062],{"class":805},[795,5561,5562],{"class":809},"--box-shadow--button",[795,5564,1129],{"class":805},[795,5566,5567],{"class":797,"line":2790},[795,5568,3436],{"class":805},[795,5570,5571],{"class":797,"line":3287},[795,5572,1689],{"class":809},[795,5574,5575],{"class":797,"line":3305},[795,5576,858],{"emptyLinePlaceholder":223},[795,5578,5579,5581,5584],{"class":797,"line":3319},[795,5580,3153],{"class":805},[795,5582,5583],{"class":3818},"btn",[795,5585,892],{"class":805},[795,5587,5588,5590,5592,5594,5596,5598],{"class":797,"line":3328},[795,5589,3827],{"class":3826},[795,5591,1023],{"class":805},[795,5593,1677],{"class":874},[795,5595,1062],{"class":805},[795,5597,5562],{"class":809},[795,5599,1129],{"class":805},[795,5601,5602],{"class":797,"line":3333},[795,5603,858],{"emptyLinePlaceholder":223},[795,5605,5606,5608,5610],{"class":797,"line":3339},[795,5607,5545],{"class":809},[795,5609,1023],{"class":805},[795,5611,5612],{"class":809},"active {\n",[795,5614,5615,5617,5619,5621,5624],{"class":797,"line":3368},[795,5616,5555],{"class":809},[795,5618,1065],{"class":874},[795,5620,1062],{"class":805},[795,5622,5623],{"class":809},"--box-shadow--none",[795,5625,1129],{"class":805},[795,5627,5628,5630,5632,5635,5637,5640],{"class":797,"line":3400},[795,5629,4656],{"class":3826},[795,5631,1023],{"class":805},[795,5633,5634],{"class":874}," translateY",[795,5636,1062],{"class":805},[795,5638,5639],{"class":1050},"1px",[795,5641,1129],{"class":805},[795,5643,5644],{"class":797,"line":3406},[795,5645,3436],{"class":805},[795,5647,5648],{"class":797,"line":3414},[795,5649,858],{"emptyLinePlaceholder":223},[795,5651,5652,5654,5656,5659],{"class":797,"line":3433},[795,5653,5545],{"class":809},[795,5655,1023],{"class":805},[795,5657,5658],{"class":864},"focus-visible",[795,5660,892],{"class":805},[795,5662,5663,5666,5668,5670,5672,5674,5676,5678,5680,5683],{"class":797,"line":3439},[795,5664,5665],{"class":3826},"        box-shadow",[795,5667,1023],{"class":805},[795,5669,1677],{"class":874},[795,5671,1062],{"class":805},[795,5673,5562],{"class":809},[795,5675,1091],{"class":805},[795,5677,1677],{"class":874},[795,5679,1062],{"class":805},[795,5681,5682],{"class":809},"--box-shadow--focus",[795,5684,1129],{"class":805},[795,5686,5687],{"class":797,"line":3448},[795,5688,3436],{"class":805},[795,5690,5691],{"class":797,"line":3453},[795,5692,1689],{"class":809},[795,5694,5695],{"class":797,"line":4514},[795,5696,858],{"emptyLinePlaceholder":223},[795,5698,5699,5701,5704],{"class":797,"line":4528},[795,5700,3153],{"class":805},[795,5702,5703],{"class":3818},"dropdown",[795,5705,892],{"class":805},[795,5707,5708,5710,5712,5714,5716,5719],{"class":797,"line":4545},[795,5709,3827],{"class":3826},[795,5711,1023],{"class":805},[795,5713,1677],{"class":874},[795,5715,1062],{"class":805},[795,5717,5718],{"class":809},"--box-shadow--dropdown",[795,5720,1129],{"class":805},[795,5722,5723],{"class":797,"line":4560},[795,5724,1689],{"class":805},[795,5726,5727],{"class":797,"line":4574},[795,5728,858],{"emptyLinePlaceholder":223},[795,5730,5731,5733,5735],{"class":797,"line":4580},[795,5732,3153],{"class":805},[795,5734,3853],{"class":3818},[795,5736,892],{"class":805},[795,5738,5739,5741,5743,5745,5747,5750],{"class":797,"line":4589},[795,5740,3827],{"class":3826},[795,5742,1023],{"class":805},[795,5744,1677],{"class":874},[795,5746,1062],{"class":805},[795,5748,5749],{"class":809},"--box-shadow--modal",[795,5751,1129],{"class":805},[795,5753,5754],{"class":797,"line":4594},[795,5755,1689],{"class":805},[795,5757,5758],{"class":797,"line":4612},[795,5759,858],{"emptyLinePlaceholder":223},[795,5761,5762,5764,5767],{"class":797,"line":4625},[795,5763,3153],{"class":805},[795,5765,5766],{"class":3818},"drawer",[795,5768,892],{"class":805},[795,5770,5771,5773,5775,5777,5779,5782],{"class":797,"line":4639},[795,5772,3827],{"class":3826},[795,5774,1023],{"class":805},[795,5776,1677],{"class":874},[795,5778,1062],{"class":805},[795,5780,5781],{"class":809},"--box-shadow--drawer",[795,5783,1129],{"class":805},[795,5785,5786],{"class":797,"line":4653},[795,5787,1689],{"class":805},[795,5789,5790],{"class":797,"line":4670},[795,5791,858],{"emptyLinePlaceholder":223},[795,5793,5794,5796,5799],{"class":797,"line":4675},[795,5795,3153],{"class":805},[795,5797,5798],{"class":3818},"toast",[795,5800,892],{"class":805},[795,5802,5803,5805,5807,5809,5811,5814],{"class":797,"line":4689},[795,5804,3827],{"class":3826},[795,5806,1023],{"class":805},[795,5808,1677],{"class":874},[795,5810,1062],{"class":805},[795,5812,5813],{"class":809},"--box-shadow--toast",[795,5815,1129],{"class":805},[795,5817,5818],{"class":797,"line":4718},[795,5819,1689],{"class":805},[795,5821,5822],{"class":797,"line":4723},[795,5823,858],{"emptyLinePlaceholder":223},[795,5825,5826,5828,5831,5833,5836],{"class":797,"line":4732},[795,5827,3153],{"class":805},[795,5829,5830],{"class":3818},"input",[795,5832,1023],{"class":805},[795,5834,5835],{"class":864},"focus",[795,5837,892],{"class":805},[795,5839,5840,5842,5844,5846,5848,5850],{"class":797,"line":4737},[795,5841,3827],{"class":3826},[795,5843,1023],{"class":805},[795,5845,1677],{"class":874},[795,5847,1062],{"class":805},[795,5849,5682],{"class":809},[795,5851,1129],{"class":805},[795,5853,5854],{"class":797,"line":4755},[795,5855,1689],{"class":805},[795,5857,5858],{"class":797,"line":4769},[795,5859,858],{"emptyLinePlaceholder":223},[795,5861,5862,5864,5867],{"class":797,"line":4778},[795,5863,3153],{"class":805},[795,5865,5866],{"class":3818},"well",[795,5868,892],{"class":805},[795,5870,5871,5873,5875,5877,5879,5882],{"class":797,"line":4783},[795,5872,3827],{"class":3826},[795,5874,1023],{"class":805},[795,5876,1677],{"class":874},[795,5878,1062],{"class":805},[795,5880,5881],{"class":809},"--box-shadow--inset",[795,5883,1129],{"class":805},[795,5885,5886],{"class":797,"line":4800},[795,5887,1689],{"class":805},[1785,5889,5891],{"id":5890},"theme-aware-shadows","Theme-Aware Shadows",[719,5893,5894],{},"Create shadows that automatically adapt to light and dark themes by adjusting shadow opacity and color:",[778,5896,5897,6254],{},[781,5898,5899],{"icon":783,"label":290},[785,5900,5902],{"className":787,"code":5901,"filename":789,"language":790,"meta":791,"style":791},"import { styleframe } from 'styleframe';\nimport { useBoxShadowDesignTokens, defaultBoxShadowValues } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\nconst { ref, selector, theme } = s;\n\n\u002F\u002F Define shadow color (OKLCH format: lightness chroma hue)\nconst boxShadowColor = s.variable('box-shadow-color', '0 0 0');\n\n\u002F\u002F Use default shadows (which reference --box-shadow-color)\nconst { boxShadow, boxShadowMd, boxShadowLg } = useBoxShadowDesignTokens(\n    s,\n    defaultBoxShadowValues\n);\n\n\u002F\u002F Override shadow color in dark theme\ntheme('dark', (ctx) => {\n    \u002F\u002F Use lighter shadows in dark mode for better contrast\n    ctx.variable(boxShadowColor, '1 0 0');\n});\n\n\u002F\u002F Apply shadows\nselector('.card', {\n    boxShadow: ref(boxShadow),\n});\n\nselector('.modal', {\n    boxShadow: ref(boxShadowLg),\n});\n\nexport default s;\n",[697,5903,5904,5924,5948,5952,5966,5991,5995,6000,6034,6038,6042,6066,6072,6076,6082,6086,6091,6117,6122,6147,6155,6159,6164,6180,6192,6200,6204,6220,6232,6240,6244],{"__ignoreMap":791},[795,5905,5906,5908,5910,5912,5914,5916,5918,5920,5922],{"class":797,"line":798},[795,5907,802],{"class":801},[795,5909,806],{"class":805},[795,5911,810],{"class":809},[795,5913,813],{"class":805},[795,5915,816],{"class":801},[795,5917,819],{"class":805},[795,5919,823],{"class":822},[795,5921,826],{"class":805},[795,5923,829],{"class":805},[795,5925,5926,5928,5930,5932,5934,5936,5938,5940,5942,5944,5946],{"class":797,"line":832},[795,5927,802],{"class":801},[795,5929,806],{"class":805},[795,5931,839],{"class":809},[795,5933,1073],{"class":805},[795,5935,1837],{"class":809},[795,5937,813],{"class":805},[795,5939,816],{"class":801},[795,5941,819],{"class":805},[795,5943,848],{"class":822},[795,5945,826],{"class":805},[795,5947,829],{"class":805},[795,5949,5950],{"class":797,"line":855},[795,5951,858],{"emptyLinePlaceholder":223},[795,5953,5954,5956,5958,5960,5962,5964],{"class":797,"line":861},[795,5955,865],{"class":864},[795,5957,868],{"class":809},[795,5959,871],{"class":805},[795,5961,810],{"class":874},[795,5963,877],{"class":809},[795,5965,829],{"class":805},[795,5967,5968,5970,5972,5974,5976,5978,5980,5983,5985,5987,5989],{"class":797,"line":882},[795,5969,865],{"class":864},[795,5971,806],{"class":805},[795,5973,3111],{"class":809},[795,5975,1073],{"class":805},[795,5977,3116],{"class":809},[795,5979,1073],{"class":805},[795,5981,5982],{"class":809}," theme ",[795,5984,979],{"class":805},[795,5986,982],{"class":805},[795,5988,1006],{"class":809},[795,5990,829],{"class":805},[795,5992,5993],{"class":797,"line":887},[795,5994,858],{"emptyLinePlaceholder":223},[795,5996,5997],{"class":797,"line":895},[795,5998,5999],{"class":3138},"\u002F\u002F Define shadow color (OKLCH format: lightness chroma hue)\n",[795,6001,6002,6004,6006,6008,6010,6012,6014,6016,6018,6020,6022,6024,6026,6028,6030,6032],{"class":797,"line":904},[795,6003,865],{"class":864},[795,6005,3146],{"class":809},[795,6007,871],{"class":805},[795,6009,1006],{"class":809},[795,6011,3153],{"class":805},[795,6013,3156],{"class":874},[795,6015,1062],{"class":809},[795,6017,826],{"class":805},[795,6019,3163],{"class":822},[795,6021,826],{"class":805},[795,6023,1073],{"class":805},[795,6025,819],{"class":805},[795,6027,1782],{"class":822},[795,6029,826],{"class":805},[795,6031,1082],{"class":809},[795,6033,829],{"class":805},[795,6035,6036],{"class":797,"line":912},[795,6037,858],{"emptyLinePlaceholder":223},[795,6039,6040],{"class":797,"line":920},[795,6041,3186],{"class":3138},[795,6043,6044,6046,6048,6050,6052,6054,6056,6058,6060,6062,6064],{"class":797,"line":928},[795,6045,865],{"class":864},[795,6047,806],{"class":805},[795,6049,3195],{"class":809},[795,6051,1073],{"class":805},[795,6053,3200],{"class":809},[795,6055,1073],{"class":805},[795,6057,3205],{"class":809},[795,6059,979],{"class":805},[795,6061,982],{"class":805},[795,6063,839],{"class":874},[795,6065,3214],{"class":809},[795,6067,6068,6070],{"class":797,"line":936},[795,6069,3219],{"class":809},[795,6071,901],{"class":805},[795,6073,6074],{"class":797,"line":944},[795,6075,3226],{"class":809},[795,6077,6078,6080],{"class":797,"line":952},[795,6079,1082],{"class":809},[795,6081,829],{"class":805},[795,6083,6084],{"class":797,"line":960},[795,6085,858],{"emptyLinePlaceholder":223},[795,6087,6088],{"class":797,"line":968},[795,6089,6090],{"class":3138},"\u002F\u002F Override shadow color in dark theme\n",[795,6092,6093,6096,6098,6100,6103,6105,6107,6109,6111,6113,6115],{"class":797,"line":976},[795,6094,6095],{"class":874},"theme",[795,6097,1062],{"class":809},[795,6099,826],{"class":805},[795,6101,6102],{"class":822},"dark",[795,6104,826],{"class":805},[795,6106,1073],{"class":805},[795,6108,705],{"class":805},[795,6110,3358],{"class":3357},[795,6112,1082],{"class":805},[795,6114,3363],{"class":864},[795,6116,892],{"class":805},[795,6118,6119],{"class":797,"line":992},[795,6120,6121],{"class":3138},"    \u002F\u002F Use lighter shadows in dark mode for better contrast\n",[795,6123,6124,6126,6128,6130,6132,6134,6136,6138,6141,6143,6145],{"class":797,"line":997},[795,6125,3371],{"class":809},[795,6127,3153],{"class":805},[795,6129,3156],{"class":874},[795,6131,1062],{"class":1908},[795,6133,3380],{"class":809},[795,6135,1073],{"class":805},[795,6137,819],{"class":805},[795,6139,6140],{"class":822},"1 0 0",[795,6142,826],{"class":805},[795,6144,1082],{"class":1908},[795,6146,829],{"class":805},[795,6148,6149,6151,6153],{"class":797,"line":2790},[795,6150,979],{"class":805},[795,6152,1082],{"class":809},[795,6154,829],{"class":805},[795,6156,6157],{"class":797,"line":3287},[795,6158,858],{"emptyLinePlaceholder":223},[795,6160,6161],{"class":797,"line":3305},[795,6162,6163],{"class":3138},"\u002F\u002F Apply shadows\n",[795,6165,6166,6168,6170,6172,6174,6176,6178],{"class":797,"line":3319},[795,6167,3246],{"class":874},[795,6169,1062],{"class":809},[795,6171,826],{"class":805},[795,6173,3253],{"class":822},[795,6175,826],{"class":805},[795,6177,1073],{"class":805},[795,6179,892],{"class":805},[795,6181,6182,6184,6186,6188,6190],{"class":797,"line":3328},[795,6183,898],{"class":1908},[795,6185,1023],{"class":805},[795,6187,3111],{"class":874},[795,6189,3270],{"class":809},[795,6191,901],{"class":805},[795,6193,6194,6196,6198],{"class":797,"line":3333},[795,6195,979],{"class":805},[795,6197,1082],{"class":809},[795,6199,829],{"class":805},[795,6201,6202],{"class":797,"line":3339},[795,6203,858],{"emptyLinePlaceholder":223},[795,6205,6206,6208,6210,6212,6214,6216,6218],{"class":797,"line":3368},[795,6207,3246],{"class":874},[795,6209,1062],{"class":809},[795,6211,826],{"class":805},[795,6213,3296],{"class":822},[795,6215,826],{"class":805},[795,6217,1073],{"class":805},[795,6219,892],{"class":805},[795,6221,6222,6224,6226,6228,6230],{"class":797,"line":3400},[795,6223,898],{"class":1908},[795,6225,1023],{"class":805},[795,6227,3111],{"class":874},[795,6229,3314],{"class":809},[795,6231,901],{"class":805},[795,6233,6234,6236,6238],{"class":797,"line":3406},[795,6235,979],{"class":805},[795,6237,1082],{"class":809},[795,6239,829],{"class":805},[795,6241,6242],{"class":797,"line":3414},[795,6243,858],{"emptyLinePlaceholder":223},[795,6245,6246,6248,6250,6252],{"class":797,"line":3433},[795,6247,1000],{"class":801},[795,6249,1003],{"class":801},[795,6251,1006],{"class":809},[795,6253,829],{"class":805},[781,6255,6256],{"icon":154,"label":326},[785,6257,6259],{"className":1013,"code":6258,"filename":1015,"language":1016,"meta":791,"style":791},":root {\n    --box-shadow-color: 0 0 0;\n    --box-shadow--none: none;\n    --box-shadow--xs: 0 1px 1px oklch(var(--box-shadow-color) \u002F 0.12), 0 2px 2px -1px oklch(var(--box-shadow-color) \u002F 0.06);\n    --box-shadow--sm: 0 1px 2px oklch(var(--box-shadow-color) \u002F 0.14), 0 3px 6px -1px oklch(var(--box-shadow-color) \u002F 0.10);\n    --box-shadow--md: 0 2px 4px oklch(var(--box-shadow-color) \u002F 0.16), 0 8px 16px -4px oklch(var(--box-shadow-color) \u002F 0.10);\n    --box-shadow--lg: 0 4px 8px oklch(var(--box-shadow-color) \u002F 0.18), 0 16px 24px -8px oklch(var(--box-shadow-color) \u002F 0.12);\n    --box-shadow: var(--box-shadow--md);\n}\n\n[data-theme=\"dark\"] {\n    --box-shadow-color: 1 0 96;\n}\n\n.card {\n    box-shadow: var(--box-shadow);\n}\n\n.modal {\n    box-shadow: var(--box-shadow--lg);\n}\n",[697,6260,6261,6269,6283,6293,6349,6405,6461,6517,6531,6535,6539,6561,6577,6581,6585,6593,6607,6611,6615,6623,6637],{"__ignoreMap":791},[795,6262,6263,6265,6267],{"class":797,"line":798},[795,6264,1023],{"class":805},[795,6266,1026],{"class":864},[795,6268,892],{"class":805},[795,6270,6271,6273,6275,6277,6279,6281],{"class":797,"line":832},[795,6272,3481],{"class":809},[795,6274,1023],{"class":805},[795,6276,1051],{"class":1050},[795,6278,1051],{"class":1050},[795,6280,1051],{"class":1050},[795,6282,829],{"class":805},[795,6284,6285,6287,6289,6291],{"class":797,"line":855},[795,6286,1033],{"class":809},[795,6288,1023],{"class":805},[795,6290,1038],{"class":809},[795,6292,829],{"class":805},[795,6294,6295,6297,6299,6301,6303,6305,6307,6309,6311,6313,6315,6317,6319,6321,6323,6325,6327,6329,6331,6333,6335,6337,6339,6341,6343,6345,6347],{"class":797,"line":861},[795,6296,1045],{"class":809},[795,6298,1023],{"class":805},[795,6300,1051],{"class":1050},[795,6302,1054],{"class":1050},[795,6304,1054],{"class":1050},[795,6306,1059],{"class":874},[795,6308,1062],{"class":805},[795,6310,1065],{"class":874},[795,6312,1062],{"class":805},[795,6314,1070],{"class":809},[795,6316,1082],{"class":805},[795,6318,1085],{"class":809},[795,6320,1088],{"class":1050},[795,6322,1091],{"class":805},[795,6324,1051],{"class":1050},[795,6326,1096],{"class":1050},[795,6328,1096],{"class":1050},[795,6330,1101],{"class":1050},[795,6332,1059],{"class":874},[795,6334,1062],{"class":805},[795,6336,1065],{"class":874},[795,6338,1062],{"class":805},[795,6340,1070],{"class":809},[795,6342,1082],{"class":805},[795,6344,1085],{"class":809},[795,6346,1126],{"class":1050},[795,6348,1129],{"class":805},[795,6350,6351,6353,6355,6357,6359,6361,6363,6365,6367,6369,6371,6373,6375,6377,6379,6381,6383,6385,6387,6389,6391,6393,6395,6397,6399,6401,6403],{"class":797,"line":882},[795,6352,1134],{"class":809},[795,6354,1023],{"class":805},[795,6356,1051],{"class":1050},[795,6358,1054],{"class":1050},[795,6360,1096],{"class":1050},[795,6362,1059],{"class":874},[795,6364,1062],{"class":805},[795,6366,1065],{"class":874},[795,6368,1062],{"class":805},[795,6370,1070],{"class":809},[795,6372,1082],{"class":805},[795,6374,1085],{"class":809},[795,6376,1167],{"class":1050},[795,6378,1091],{"class":805},[795,6380,1051],{"class":1050},[795,6382,1174],{"class":1050},[795,6384,1177],{"class":1050},[795,6386,1101],{"class":1050},[795,6388,1059],{"class":874},[795,6390,1062],{"class":805},[795,6392,1065],{"class":874},[795,6394,1062],{"class":805},[795,6396,1070],{"class":809},[795,6398,1082],{"class":805},[795,6400,1085],{"class":809},[795,6402,1204],{"class":1050},[795,6404,1129],{"class":805},[795,6406,6407,6409,6411,6413,6415,6417,6419,6421,6423,6425,6427,6429,6431,6433,6435,6437,6439,6441,6443,6445,6447,6449,6451,6453,6455,6457,6459],{"class":797,"line":887},[795,6408,1211],{"class":809},[795,6410,1023],{"class":805},[795,6412,1051],{"class":1050},[795,6414,1096],{"class":1050},[795,6416,1220],{"class":1050},[795,6418,1059],{"class":874},[795,6420,1062],{"class":805},[795,6422,1065],{"class":874},[795,6424,1062],{"class":805},[795,6426,1070],{"class":809},[795,6428,1082],{"class":805},[795,6430,1085],{"class":809},[795,6432,1245],{"class":1050},[795,6434,1091],{"class":805},[795,6436,1051],{"class":1050},[795,6438,1252],{"class":1050},[795,6440,1255],{"class":1050},[795,6442,1258],{"class":1050},[795,6444,1059],{"class":874},[795,6446,1062],{"class":805},[795,6448,1065],{"class":874},[795,6450,1062],{"class":805},[795,6452,1070],{"class":809},[795,6454,1082],{"class":805},[795,6456,1085],{"class":809},[795,6458,1204],{"class":1050},[795,6460,1129],{"class":805},[795,6462,6463,6465,6467,6469,6471,6473,6475,6477,6479,6481,6483,6485,6487,6489,6491,6493,6495,6497,6499,6501,6503,6505,6507,6509,6511,6513,6515],{"class":797,"line":895},[795,6464,1289],{"class":809},[795,6466,1023],{"class":805},[795,6468,1051],{"class":1050},[795,6470,1220],{"class":1050},[795,6472,1252],{"class":1050},[795,6474,1059],{"class":874},[795,6476,1062],{"class":805},[795,6478,1065],{"class":874},[795,6480,1062],{"class":805},[795,6482,1070],{"class":809},[795,6484,1082],{"class":805},[795,6486,1085],{"class":809},[795,6488,1322],{"class":1050},[795,6490,1091],{"class":805},[795,6492,1051],{"class":1050},[795,6494,1255],{"class":1050},[795,6496,1331],{"class":1050},[795,6498,1334],{"class":1050},[795,6500,1059],{"class":874},[795,6502,1062],{"class":805},[795,6504,1065],{"class":874},[795,6506,1062],{"class":805},[795,6508,1070],{"class":809},[795,6510,1082],{"class":805},[795,6512,1085],{"class":809},[795,6514,1088],{"class":1050},[795,6516,1129],{"class":805},[795,6518,6519,6521,6523,6525,6527,6529],{"class":797,"line":904},[795,6520,1672],{"class":809},[795,6522,1023],{"class":805},[795,6524,1677],{"class":874},[795,6526,1062],{"class":805},[795,6528,1682],{"class":809},[795,6530,1129],{"class":805},[795,6532,6533],{"class":797,"line":912},[795,6534,1689],{"class":805},[795,6536,6537],{"class":797,"line":920},[795,6538,858],{"emptyLinePlaceholder":223},[795,6540,6541,6544,6547,6549,6552,6554,6556,6559],{"class":797,"line":928},[795,6542,6543],{"class":805},"[",[795,6545,6546],{"class":864},"data-theme",[795,6548,871],{"class":805},[795,6550,6551],{"class":805},"\"",[795,6553,6102],{"class":822},[795,6555,6551],{"class":805},[795,6557,6558],{"class":805},"]",[795,6560,892],{"class":805},[795,6562,6563,6565,6567,6570,6572,6575],{"class":797,"line":936},[795,6564,3481],{"class":809},[795,6566,1023],{"class":805},[795,6568,6569],{"class":1050}," 1",[795,6571,1051],{"class":1050},[795,6573,6574],{"class":1050}," 96",[795,6576,829],{"class":805},[795,6578,6579],{"class":797,"line":944},[795,6580,1689],{"class":805},[795,6582,6583],{"class":797,"line":952},[795,6584,858],{"emptyLinePlaceholder":223},[795,6586,6587,6589,6591],{"class":797,"line":960},[795,6588,3153],{"class":805},[795,6590,3819],{"class":3818},[795,6592,892],{"class":805},[795,6594,6595,6597,6599,6601,6603,6605],{"class":797,"line":968},[795,6596,3827],{"class":3826},[795,6598,1023],{"class":805},[795,6600,1677],{"class":874},[795,6602,1062],{"class":805},[795,6604,3836],{"class":809},[795,6606,1129],{"class":805},[795,6608,6609],{"class":797,"line":976},[795,6610,1689],{"class":805},[795,6612,6613],{"class":797,"line":992},[795,6614,858],{"emptyLinePlaceholder":223},[795,6616,6617,6619,6621],{"class":797,"line":997},[795,6618,3153],{"class":805},[795,6620,3853],{"class":3818},[795,6622,892],{"class":805},[795,6624,6625,6627,6629,6631,6633,6635],{"class":797,"line":2790},[795,6626,3827],{"class":3826},[795,6628,1023],{"class":805},[795,6630,1677],{"class":874},[795,6632,1062],{"class":805},[795,6634,2559],{"class":809},[795,6636,1129],{"class":805},[795,6638,6639],{"class":797,"line":3287},[795,6640,1689],{"class":805},[689,6642,6643,6645],{},[692,6644,1771],{}," In dark themes, you may want to use lighter, more subtle shadows or even inverted shadows (white) with very low opacity. This helps maintain visual hierarchy without overpowering the dark background.",[1785,6647,6649],{"id":6648},"custom-shadow-colors","Custom Shadow Colors",[719,6651,6652],{},"Create colored shadows that match your brand colors for special components:",[778,6654,6655],{},[781,6656,6657],{"icon":783,"label":290},[785,6658,6660],{"className":787,"code":6659,"filename":789,"language":790,"meta":791,"style":791},"import { styleframe } from 'styleframe';\nimport { useColorDesignTokens, useBoxShadowDesignTokens } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\nconst { ref, selector, css } = s;\n\n\u002F\u002F Define shadow colors\nconst { colorPrimary, colorSuccess, colorWarning, colorError } = useColorDesignTokens(s, {\n    primary: '#3b82f6',\n    success: '#10b981',\n    warning: '#f59e0b',\n    error: '#ef4444',\n});\n\n\u002F\u002F Create colored shadows\nconst {\n    boxShadowPrimary,\n    boxShadowSuccess,\n    boxShadowWarning,\n    boxShadowError,\n} = useBoxShadowDesignTokens(s, {\n    primary: css`0 4px 8px oklch(from ${colorPrimary} l c h \u002F 0.3), 0 2px 4px oklch(0.6109 0.1903 263.71 \u002F 0.2)`,\n    success: css`0 4px 8px oklch(from ${colorSuccess} l c h \u002F 0.3), 0 2px 4px oklch(0.7051 0.1654 165.47 \u002F 0.2)`,\n    warning: css`0 4px 8px oklch(from ${colorWarning} l c h \u002F 0.3), 0 2px 4px oklch(0.7768 0.1504 75.49 \u002F 0.2)`,\n    error: css`0 4px 8px oklch(from ${colorError} l c h \u002F 0.3), 0 2px 4px oklch(0.6278 0.2158 27.33 \u002F 0.2)`,\n});\n\n\u002F\u002F Apply colored shadows\nselector('.btn-primary', {\n    backgroundColor: ref(colorPrimary),\n    boxShadow: ref(boxShadowPrimary),\n    '&:hover': {\n        boxShadow: css`0 8px 16px oklch(from ${colorPrimary} l c h \u002F 0.4), 0 4px 8px oklch(from ${colorPrimary} l c h \u002F 0.25)`,\n    },\n});\n\nselector('.btn-success', {\n    backgroundColor: ref(colorSuccess),\n    boxShadow: ref(boxShadowSuccess),\n});\n\nselector('.btn-warning', {\n    backgroundColor: ref(colorWarning),\n    boxShadow: ref(boxShadowWarning),\n});\n\nselector('.btn-error', {\n    backgroundColor: ref(colorError),\n    boxShadow: ref(boxShadowError),\n});\n\nexport default s;\n",[697,6661,6662,6682,6707,6711,6725,6749,6753,6758,6794,6810,6826,6842,6858,6866,6870,6875,6881,6888,6895,6902,6909,6923,6950,6976,7002,7028,7036,7040,7045,7062,7076,7089,7101,7136,7140,7148,7152,7169,7182,7195,7203,7207,7224,7237,7250,7258,7262,7279,7292,7305,7313,7317],{"__ignoreMap":791},[795,6663,6664,6666,6668,6670,6672,6674,6676,6678,6680],{"class":797,"line":798},[795,6665,802],{"class":801},[795,6667,806],{"class":805},[795,6669,810],{"class":809},[795,6671,813],{"class":805},[795,6673,816],{"class":801},[795,6675,819],{"class":805},[795,6677,823],{"class":822},[795,6679,826],{"class":805},[795,6681,829],{"class":805},[795,6683,6684,6686,6688,6691,6693,6695,6697,6699,6701,6703,6705],{"class":797,"line":832},[795,6685,802],{"class":801},[795,6687,806],{"class":805},[795,6689,6690],{"class":809}," useColorDesignTokens",[795,6692,1073],{"class":805},[795,6694,839],{"class":809},[795,6696,813],{"class":805},[795,6698,816],{"class":801},[795,6700,819],{"class":805},[795,6702,848],{"class":822},[795,6704,826],{"class":805},[795,6706,829],{"class":805},[795,6708,6709],{"class":797,"line":855},[795,6710,858],{"emptyLinePlaceholder":223},[795,6712,6713,6715,6717,6719,6721,6723],{"class":797,"line":861},[795,6714,865],{"class":864},[795,6716,868],{"class":809},[795,6718,871],{"class":805},[795,6720,810],{"class":874},[795,6722,877],{"class":809},[795,6724,829],{"class":805},[795,6726,6727,6729,6731,6733,6735,6737,6739,6741,6743,6745,6747],{"class":797,"line":882},[795,6728,865],{"class":864},[795,6730,806],{"class":805},[795,6732,3111],{"class":809},[795,6734,1073],{"class":805},[795,6736,3116],{"class":809},[795,6738,1073],{"class":805},[795,6740,3121],{"class":809},[795,6742,979],{"class":805},[795,6744,982],{"class":805},[795,6746,1006],{"class":809},[795,6748,829],{"class":805},[795,6750,6751],{"class":797,"line":887},[795,6752,858],{"emptyLinePlaceholder":223},[795,6754,6755],{"class":797,"line":895},[795,6756,6757],{"class":3138},"\u002F\u002F Define shadow colors\n",[795,6759,6760,6762,6764,6767,6769,6772,6774,6777,6779,6782,6784,6786,6788,6790,6792],{"class":797,"line":904},[795,6761,865],{"class":864},[795,6763,806],{"class":805},[795,6765,6766],{"class":809}," colorPrimary",[795,6768,1073],{"class":805},[795,6770,6771],{"class":809}," colorSuccess",[795,6773,1073],{"class":805},[795,6775,6776],{"class":809}," colorWarning",[795,6778,1073],{"class":805},[795,6780,6781],{"class":809}," colorError ",[795,6783,979],{"class":805},[795,6785,982],{"class":805},[795,6787,6690],{"class":874},[795,6789,1889],{"class":809},[795,6791,1073],{"class":805},[795,6793,892],{"class":805},[795,6795,6796,6799,6801,6803,6806,6808],{"class":797,"line":912},[795,6797,6798],{"class":1908},"    primary",[795,6800,1023],{"class":805},[795,6802,819],{"class":805},[795,6804,6805],{"class":822},"#3b82f6",[795,6807,826],{"class":805},[795,6809,901],{"class":805},[795,6811,6812,6815,6817,6819,6822,6824],{"class":797,"line":920},[795,6813,6814],{"class":1908},"    success",[795,6816,1023],{"class":805},[795,6818,819],{"class":805},[795,6820,6821],{"class":822},"#10b981",[795,6823,826],{"class":805},[795,6825,901],{"class":805},[795,6827,6828,6831,6833,6835,6838,6840],{"class":797,"line":928},[795,6829,6830],{"class":1908},"    warning",[795,6832,1023],{"class":805},[795,6834,819],{"class":805},[795,6836,6837],{"class":822},"#f59e0b",[795,6839,826],{"class":805},[795,6841,901],{"class":805},[795,6843,6844,6847,6849,6851,6854,6856],{"class":797,"line":936},[795,6845,6846],{"class":1908},"    error",[795,6848,1023],{"class":805},[795,6850,819],{"class":805},[795,6852,6853],{"class":822},"#ef4444",[795,6855,826],{"class":805},[795,6857,901],{"class":805},[795,6859,6860,6862,6864],{"class":797,"line":944},[795,6861,979],{"class":805},[795,6863,1082],{"class":809},[795,6865,829],{"class":805},[795,6867,6868],{"class":797,"line":952},[795,6869,858],{"emptyLinePlaceholder":223},[795,6871,6872],{"class":797,"line":960},[795,6873,6874],{"class":3138},"\u002F\u002F Create colored shadows\n",[795,6876,6877,6879],{"class":797,"line":968},[795,6878,865],{"class":864},[795,6880,892],{"class":805},[795,6882,6883,6886],{"class":797,"line":976},[795,6884,6885],{"class":809},"    boxShadowPrimary",[795,6887,901],{"class":805},[795,6889,6890,6893],{"class":797,"line":992},[795,6891,6892],{"class":809},"    boxShadowSuccess",[795,6894,901],{"class":805},[795,6896,6897,6900],{"class":797,"line":997},[795,6898,6899],{"class":809},"    boxShadowWarning",[795,6901,901],{"class":805},[795,6903,6904,6907],{"class":797,"line":2790},[795,6905,6906],{"class":809},"    boxShadowError",[795,6908,901],{"class":805},[795,6910,6911,6913,6915,6917,6919,6921],{"class":797,"line":3287},[795,6912,979],{"class":805},[795,6914,982],{"class":805},[795,6916,839],{"class":874},[795,6918,1889],{"class":809},[795,6920,1073],{"class":805},[795,6922,892],{"class":805},[795,6924,6925,6927,6929,6931,6933,6936,6938,6941,6943,6946,6948],{"class":797,"line":3305},[795,6926,6798],{"class":1908},[795,6928,1023],{"class":805},[795,6930,4031],{"class":874},[795,6932,4201],{"class":805},[795,6934,6935],{"class":822},"0 4px 8px oklch(from ",[795,6937,4207],{"class":805},[795,6939,6940],{"class":809},"colorPrimary",[795,6942,979],{"class":805},[795,6944,6945],{"class":822}," l c h \u002F 0.3), 0 2px 4px oklch(0.6109 0.1903 263.71 \u002F 0.2)",[795,6947,4201],{"class":805},[795,6949,901],{"class":805},[795,6951,6952,6954,6956,6958,6960,6962,6964,6967,6969,6972,6974],{"class":797,"line":3319},[795,6953,6814],{"class":1908},[795,6955,1023],{"class":805},[795,6957,4031],{"class":874},[795,6959,4201],{"class":805},[795,6961,6935],{"class":822},[795,6963,4207],{"class":805},[795,6965,6966],{"class":809},"colorSuccess",[795,6968,979],{"class":805},[795,6970,6971],{"class":822}," l c h \u002F 0.3), 0 2px 4px oklch(0.7051 0.1654 165.47 \u002F 0.2)",[795,6973,4201],{"class":805},[795,6975,901],{"class":805},[795,6977,6978,6980,6982,6984,6986,6988,6990,6993,6995,6998,7000],{"class":797,"line":3328},[795,6979,6830],{"class":1908},[795,6981,1023],{"class":805},[795,6983,4031],{"class":874},[795,6985,4201],{"class":805},[795,6987,6935],{"class":822},[795,6989,4207],{"class":805},[795,6991,6992],{"class":809},"colorWarning",[795,6994,979],{"class":805},[795,6996,6997],{"class":822}," l c h \u002F 0.3), 0 2px 4px oklch(0.7768 0.1504 75.49 \u002F 0.2)",[795,6999,4201],{"class":805},[795,7001,901],{"class":805},[795,7003,7004,7006,7008,7010,7012,7014,7016,7019,7021,7024,7026],{"class":797,"line":3333},[795,7005,6846],{"class":1908},[795,7007,1023],{"class":805},[795,7009,4031],{"class":874},[795,7011,4201],{"class":805},[795,7013,6935],{"class":822},[795,7015,4207],{"class":805},[795,7017,7018],{"class":809},"colorError",[795,7020,979],{"class":805},[795,7022,7023],{"class":822}," l c h \u002F 0.3), 0 2px 4px oklch(0.6278 0.2158 27.33 \u002F 0.2)",[795,7025,4201],{"class":805},[795,7027,901],{"class":805},[795,7029,7030,7032,7034],{"class":797,"line":3339},[795,7031,979],{"class":805},[795,7033,1082],{"class":809},[795,7035,829],{"class":805},[795,7037,7038],{"class":797,"line":3368},[795,7039,858],{"emptyLinePlaceholder":223},[795,7041,7042],{"class":797,"line":3400},[795,7043,7044],{"class":3138},"\u002F\u002F Apply colored shadows\n",[795,7046,7047,7049,7051,7053,7056,7058,7060],{"class":797,"line":3406},[795,7048,3246],{"class":874},[795,7050,1062],{"class":809},[795,7052,826],{"class":805},[795,7054,7055],{"class":822},".btn-primary",[795,7057,826],{"class":805},[795,7059,1073],{"class":805},[795,7061,892],{"class":805},[795,7063,7064,7067,7069,7071,7074],{"class":797,"line":3414},[795,7065,7066],{"class":1908},"    backgroundColor",[795,7068,1023],{"class":805},[795,7070,3111],{"class":874},[795,7072,7073],{"class":809},"(colorPrimary)",[795,7075,901],{"class":805},[795,7077,7078,7080,7082,7084,7087],{"class":797,"line":3433},[795,7079,898],{"class":1908},[795,7081,1023],{"class":805},[795,7083,3111],{"class":874},[795,7085,7086],{"class":809},"(boxShadowPrimary)",[795,7088,901],{"class":805},[795,7090,7091,7093,7095,7097,7099],{"class":797,"line":3439},[795,7092,4548],{"class":805},[795,7094,4551],{"class":1908},[795,7096,826],{"class":805},[795,7098,1023],{"class":805},[795,7100,892],{"class":805},[795,7102,7103,7105,7107,7109,7111,7114,7116,7118,7120,7123,7125,7127,7129,7132,7134],{"class":797,"line":3448},[795,7104,3417],{"class":1908},[795,7106,1023],{"class":805},[795,7108,4031],{"class":874},[795,7110,4201],{"class":805},[795,7112,7113],{"class":822},"0 8px 16px oklch(from ",[795,7115,4207],{"class":805},[795,7117,6940],{"class":809},[795,7119,979],{"class":805},[795,7121,7122],{"class":822}," l c h \u002F 0.4), 0 4px 8px oklch(from ",[795,7124,4207],{"class":805},[795,7126,6940],{"class":809},[795,7128,979],{"class":805},[795,7130,7131],{"class":822}," l c h \u002F 0.25)",[795,7133,4201],{"class":805},[795,7135,901],{"class":805},[795,7137,7138],{"class":797,"line":3453},[795,7139,4577],{"class":805},[795,7141,7142,7144,7146],{"class":797,"line":4514},[795,7143,979],{"class":805},[795,7145,1082],{"class":809},[795,7147,829],{"class":805},[795,7149,7150],{"class":797,"line":4528},[795,7151,858],{"emptyLinePlaceholder":223},[795,7153,7154,7156,7158,7160,7163,7165,7167],{"class":797,"line":4545},[795,7155,3246],{"class":874},[795,7157,1062],{"class":809},[795,7159,826],{"class":805},[795,7161,7162],{"class":822},".btn-success",[795,7164,826],{"class":805},[795,7166,1073],{"class":805},[795,7168,892],{"class":805},[795,7170,7171,7173,7175,7177,7180],{"class":797,"line":4560},[795,7172,7066],{"class":1908},[795,7174,1023],{"class":805},[795,7176,3111],{"class":874},[795,7178,7179],{"class":809},"(colorSuccess)",[795,7181,901],{"class":805},[795,7183,7184,7186,7188,7190,7193],{"class":797,"line":4574},[795,7185,898],{"class":1908},[795,7187,1023],{"class":805},[795,7189,3111],{"class":874},[795,7191,7192],{"class":809},"(boxShadowSuccess)",[795,7194,901],{"class":805},[795,7196,7197,7199,7201],{"class":797,"line":4580},[795,7198,979],{"class":805},[795,7200,1082],{"class":809},[795,7202,829],{"class":805},[795,7204,7205],{"class":797,"line":4589},[795,7206,858],{"emptyLinePlaceholder":223},[795,7208,7209,7211,7213,7215,7218,7220,7222],{"class":797,"line":4594},[795,7210,3246],{"class":874},[795,7212,1062],{"class":809},[795,7214,826],{"class":805},[795,7216,7217],{"class":822},".btn-warning",[795,7219,826],{"class":805},[795,7221,1073],{"class":805},[795,7223,892],{"class":805},[795,7225,7226,7228,7230,7232,7235],{"class":797,"line":4612},[795,7227,7066],{"class":1908},[795,7229,1023],{"class":805},[795,7231,3111],{"class":874},[795,7233,7234],{"class":809},"(colorWarning)",[795,7236,901],{"class":805},[795,7238,7239,7241,7243,7245,7248],{"class":797,"line":4625},[795,7240,898],{"class":1908},[795,7242,1023],{"class":805},[795,7244,3111],{"class":874},[795,7246,7247],{"class":809},"(boxShadowWarning)",[795,7249,901],{"class":805},[795,7251,7252,7254,7256],{"class":797,"line":4639},[795,7253,979],{"class":805},[795,7255,1082],{"class":809},[795,7257,829],{"class":805},[795,7259,7260],{"class":797,"line":4653},[795,7261,858],{"emptyLinePlaceholder":223},[795,7263,7264,7266,7268,7270,7273,7275,7277],{"class":797,"line":4670},[795,7265,3246],{"class":874},[795,7267,1062],{"class":809},[795,7269,826],{"class":805},[795,7271,7272],{"class":822},".btn-error",[795,7274,826],{"class":805},[795,7276,1073],{"class":805},[795,7278,892],{"class":805},[795,7280,7281,7283,7285,7287,7290],{"class":797,"line":4675},[795,7282,7066],{"class":1908},[795,7284,1023],{"class":805},[795,7286,3111],{"class":874},[795,7288,7289],{"class":809},"(colorError)",[795,7291,901],{"class":805},[795,7293,7294,7296,7298,7300,7303],{"class":797,"line":4689},[795,7295,898],{"class":1908},[795,7297,1023],{"class":805},[795,7299,3111],{"class":874},[795,7301,7302],{"class":809},"(boxShadowError)",[795,7304,901],{"class":805},[795,7306,7307,7309,7311],{"class":797,"line":4718},[795,7308,979],{"class":805},[795,7310,1082],{"class":809},[795,7312,829],{"class":805},[795,7314,7315],{"class":797,"line":4723},[795,7316,858],{"emptyLinePlaceholder":223},[795,7318,7319,7321,7323,7325],{"class":797,"line":4732},[795,7320,1000],{"class":801},[795,7322,1003],{"class":801},[795,7324,1006],{"class":809},[795,7326,829],{"class":805},[715,7328,7330],{"id":7329},"best-practices","Best Practices",[730,7332,7333,7339,7345,7351,7361,7367,7373,7379,7385],{},[733,7334,7335,7338],{},[692,7336,7337],{},"Establish a clear hierarchy",": Use progressively larger shadows to indicate higher elevation. Don't skip levels arbitrarily.",[733,7340,7341,7344],{},[692,7342,7343],{},"Use layered shadows",": Combine multiple shadow layers (a sharp close shadow + soft distant shadow) for more realistic depth.",[733,7346,7347,7350],{},[692,7348,7349],{},"Keep opacity consistent",": Within your shadow scale, maintain consistent opacity ratios between layers for visual harmony.",[733,7352,7353,7356,7357,7360],{},[692,7354,7355],{},"Consider performance",": Shadows can be expensive to render. Use ",[697,7358,7359],{},"will-change: box-shadow"," sparingly and only for animated shadows.",[733,7362,7363,7366],{},[692,7364,7365],{},"Don't overuse large shadows",": Reserve the largest shadows (xl, 2xl) for only the highest elevation elements like modals and toasts.",[733,7368,7369,7372],{},[692,7370,7371],{},"Use the shadow color variable",": Leverage a color variable for dynamic theming rather than creating completely separate shadow scales.",[733,7374,7375,7378],{},[692,7376,7377],{},"Test in dark mode",": Shadows that look great in light mode may need adjustment for dark themes. Consider lighter, more subtle shadows.",[733,7380,7381,7384],{},[692,7382,7383],{},"Combine with z-index",": Elevation and z-index should work together. Higher shadows should correspond to higher z-index values.",[733,7386,7387,7390],{},[692,7388,7389],{},"Use inset shadows sparingly",": Inset shadows are great for pressed states and wells, but can look dated if overused.",[3019,7392,7393,7395],{},[692,7394,3023],{}," For the most natural-looking shadows, use two layers: one tight shadow (1-2px blur) and one diffuse shadow (larger blur with negative spread). This mimics how real-world shadows work with both sharp and soft components.",[715,7397,7399],{"id":7398},"faq","FAQ",[7401,7402,7403,7414,7456,7460,7484],"accordion",{},[7404,7405,7408,7410,7411,7413],"accordion-item",{"icon":7406,"label":7407},"i-lucide-circle-help","Why use useBoxShadowDesignTokens instead of writing shadows directly?",[697,7409,2575],{}," centralizes your shadow system, making it easy to maintain consistency and update shadows globally. It also enables powerful features like dynamic shadow colors through ",[697,7412,1070],{},", theme-aware shadows, and semantic naming that makes your intent clear.",[7404,7415,7417,7420,7453],{"icon":7406,"label":7416},"What's the difference between the default shadow sizes?",[719,7418,7419],{},"Each shadow size represents a different elevation level:",[730,7421,7422,7427,7433,7438,7443,7448],{},[733,7423,7424,7426],{},[692,7425,1717],{},": Subtle cards and surfaces (1-2px)",[733,7428,7429,7432],{},[692,7430,7431],{},"default",": Standard elevated elements (1-6px)",[733,7434,7435,7437],{},[692,7436,1725],{},": Popovers and raised buttons (2-16px)",[733,7439,7440,7442],{},[692,7441,1733],{},": Modals and floating panels (4-24px)",[733,7444,7445,7447],{},[692,7446,1741],{},": Drawers and high elevation (8-48px)",[733,7449,7450,7452],{},[692,7451,1749],{},": Toasts and maximum elevation (12-64px)",[719,7454,7455],{},"The size progression ensures clear visual hierarchy in your interface.",[7404,7457,7459],{"icon":7406,"label":7458},"Should I use inset shadows or regular shadows?","Regular (outset) shadows create elevation by making elements appear raised above the page. Use them for cards, buttons, modals, and any element that should feel like it's floating. Inset shadows create depth by making elements appear pressed into the page. Use them for input fields, wells, pressed button states, and recessed areas.",[7404,7461,7463,7466,7481],{"icon":7406,"label":7462},"How do shadows work in dark mode?",[719,7464,7465],{},"In dark mode, traditional black shadows can be too harsh or invisible. You have three approaches:",[7467,7468,7469,7475,7478],"ol",{},[733,7470,7471,7472,7474],{},"Use a color variable (such as ",[697,7473,1070],{},") to switch to lighter shadows (very subtle white shadows)",[733,7476,7477],{},"Reduce shadow opacity in dark mode while keeping black shadows",[733,7479,7480],{},"Use lighter backgrounds for elevated elements instead of relying solely on shadows",[719,7482,7483],{},"Many designs combine approaches 2 and 3 for best results.",[7404,7485,7487,7490,7504],{"icon":7406,"label":7486},"How many shadow levels should my design system have?",[719,7488,7489],{},"Most design systems work well with 5-8 shadow levels:",[730,7491,7492,7495,7498,7501],{},[733,7493,7494],{},"1 level for flat\u002Fnone",[733,7496,7497],{},"3-4 levels for standard elevation (subtle → medium)",[733,7499,7500],{},"2-3 levels for high elevation (modals → toasts)",[733,7502,7503],{},"Optional: specialized shadows (inset, focus rings)",[719,7505,7506],{},"Too many levels create inconsistency; too few limit flexibility. Start with the defaults and adjust based on your needs.",[7508,7509,7510],"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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}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 .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}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}",{"title":791,"searchDepth":832,"depth":832,"links":7512},[7513,7514,7515,7519,7520,7525,7526],{"id":717,"depth":832,"text":78},{"id":724,"depth":832,"text":725},{"id":771,"depth":832,"text":699,"children":7516},[7517,7518],{"id":1787,"depth":855,"text":1788},{"id":2568,"depth":855,"text":2569},{"id":3027,"depth":832,"text":3028},{"id":3939,"depth":832,"text":3940,"children":7521},[7522,7523,7524],{"id":3943,"depth":855,"text":3944},{"id":5890,"depth":855,"text":5891},{"id":6648,"depth":855,"text":6649},{"id":7329,"depth":832,"text":7330},{"id":7398,"depth":832,"text":7399},"Create and manage box shadow design tokens with CSS variables for consistent elevation and depth effects across your application.",null,{},{"title":185,"icon":188},{"title":684,"description":7527},"MFwqGSgkobVcfDHNxCSMlh00uj-FUFag7-pUD88nMXc",[7534,7536],{"title":180,"path":181,"stem":182,"description":7535,"icon":183,"children":-1},"Create and manage border design tokens with CSS variables for consistent border styles, widths, and colors across your application.",{"title":190,"path":191,"stem":192,"description":7537,"icon":193,"children":-1},"Create and manage responsive breakpoint design tokens with CSS variables for consistent media query handling and adaptive layouts across your application.",1781596321842]