/**
 * Design system structural tokens (theme colors come from theme-tokens-base + runtime partial).
 */
:root {
    --ds-space-1: 4px;
    --ds-space-2: 8px;
    --ds-space-3: 12px;
    --ds-space-4: 16px;
    --ds-space-5: 20px;
    --ds-space-6: 24px;
    --ds-space-8: 32px;
    --ds-space-10: 40px;

    --ds-radius-sm: 4px;
    --ds-radius-md: 8px;
    --ds-radius-lg: 14px;
    --ds-radius-xl: 20px;
    --ds-radius-pill: 999px;

    --ds-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
    --ds-shadow-md: 0 2px 8px rgba(16, 24, 40, 0.08);
    --ds-shadow-lg: 0 8px 24px rgba(16, 24, 40, 0.12);

    --ds-sidebar-width: 280px;
    --ds-topbar-height: 56px;
    --ds-z-sidebar: 1040;
    --ds-z-overlay: 1035;
    --ds-z-modal: 1050;
    --ds-z-filter: 25;
    --ds-z-filter-menu: 1200;

    --ds-font-size-xs: 11px;
    --ds-font-size-sm: 13px;
    --ds-font-size-md: 15px;
    --ds-font-size-lg: 18px;
    --ds-font-size-xl: 22px;
    --ds-font-size-2xl: 28px;

    --ds-line-height: 1.5;

    --ds-ring-width: 2px;
    --ds-ring-offset: 2px;
    --ds-ring-color: var(--theme-accent, #db2777);
    --ds-duration: 180ms;
    --ds-ease: ease;
}

:focus-visible {
    outline: var(--ds-ring-width) solid var(--ds-ring-color);
    outline-offset: var(--ds-ring-offset);
}