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