/**
 * Design Tokens — CSS custom properties.
 * Single source of truth for radius, content widths, and sidebar sizing.
 *
 * Breakpoint reference (defined in inc/design-tokens.php + js/design-tokens.js):
 *   Mobile:          max-width: 600px
 *   Tablet+below:    max-width: 1024px
 *   Desktop:         min-width: 1025px
 *   XL:              min-width: 1441px
 *   Keep unchanged:  594px (WC gallery), 782px (WP admin bar)
 */
:root {
    /* Radius — short aliases for theme.json custom properties */
    --radius-sm: var(--wp--custom--radius--sm, 8px);
    --radius-md: var(--wp--custom--radius--md, 14px);
    --radius-lg: var(--wp--custom--radius--lg, 20px);
    --radius-xl: var(--wp--custom--radius--xl, 28px);
    --radius-full: var(--wp--custom--radius--full, 9999px);

    /* Content widths */
    --content-width: 1280px;
    --content-narrow: 640px;
    --content-checkout: 1080px;

    /* Sidebar sizing */
    --sidebar-compact: 64px;
    --sidebar-expanded: 240px;
}