{"version":3,"file":"box.css.cjs","names":[],"sources":["../../../src/layout/box/box.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_bg: var(--box-bg, var(--color-canvas));\n    --_color: var(--box-color, var(--color-contrast-900));\n    --_border-width: var(--box-border, var(--border));\n    --_border-color: var(--box-border-color, var(--color-divider));\n    --_radius: var(--box-radius, var(--rounded-lg));\n    --_padding: var(--box-padding, var(--size-4));\n    --_shadow: var(--box-shadow, var(--shadow-sm));\n\n    position: relative;\n    display: block;\n  }\n\n  .box {\n    position: relative;\n    box-sizing: border-box;\n    width: 100%;\n    height: 100%;\n    padding: var(--_padding);\n    color: var(--_color);\n    background: var(--_bg);\n    border: var(--_border-width) solid var(--_border-color);\n    border-radius: var(--_radius);\n    box-shadow: var(--_shadow);\n    backdrop-filter: blur(var(--blur-md));\n    transition:\n      backdrop-filter var(--transition-fast),\n      box-shadow var(--transition-normal),\n      background var(--transition-normal),\n      border-color var(--transition-normal);\n  }\n}\n\n@layer refine.variants {\n  /* Color theme integration — custom props still take priority */\n  :host([color]) {\n    --_bg: var(--box-bg, var(--_theme-backdrop));\n    --_border-color: var(--box-border-color, var(--_theme-border));\n  }\n\n  /* Flat - border only, no shadow */\n  :host([variant='flat']) {\n    --_shadow: none;\n  }\n\n  /* Glass */\n  :host([variant='glass']:not([color])) {\n    --_bg: color-mix(in oklch, var(--color-secondary) 20%, transparent);\n    --_border-color: color-mix(in oklch, var(--color-secondary-contrast) 15%, transparent);\n  }\n\n  :host([variant='glass'][color]) {\n    --_bg: color-mix(in oklch, var(--_theme-base) 20%, transparent);\n    --_border-color: color-mix(in oklch, var(--_theme-contrast) 15%, transparent);\n    --_color: var(--_theme-content);\n  }\n\n  :host([variant='glass']) .box {\n    box-shadow: var(--shadow-md), var(--inset-shadow-xs);\n    backdrop-filter: blur(var(--blur-lg)) saturate(180%) brightness(1.05);\n  }\n\n  /* Subtle hover for solid/default + color (glass & frost manage their own hover) */\n  :host([color]:not([variant='glass'], [variant='frost']):hover) {\n    --_bg: color-mix(in oklch, var(--_theme-base) 16%, var(--color-contrast-50));\n    --_border-color: var(--_theme-focus);\n  }\n}\n\n@layer refine.utilities {\n  :host([fullwidth]) {\n    width: 100%;\n  }\n}\n"],"mappings":""}