/*
 * Origin shadows, elevation, focus rings and backdrop blurs
 *
 * Load order:
 *   1. Radzen theme CSS
 *   2. app.css
 *   3. origin-layout.css
 *   4. origin-motion.css
 *   5. origin-semantic-theme.css
 *   6. origin-effects.css
 *   7. origin-typography.css
 *
 * Dark is the default. Effects use px intentionally so their geometry remains
 * stable when the root font size changes.
 */

:root {
    /* Shadow primitives — Figma Shadows/Light. */
    --shadow-none: none;
    --shadow-light-xs: 0 1px 2px 0 rgba(10, 13, 18, 0.05);
    --shadow-light-sm: 0 1px 2px -1px rgba(10, 13, 18, 0.10), 0 1px 3px 0 rgba(10, 13, 18, 0.10);
    --shadow-light-md: 0 2px 4px -2px rgba(10, 13, 18, 0.06), 0 4px 6px -1px rgba(10, 13, 18, 0.10);
    --shadow-light-lg: 0 2px 2px -1px rgba(10, 13, 18, 0.04), 0 4px 6px -2px rgba(10, 13, 18, 0.03), 0 12px 16px -4px rgba(10, 13, 18, 0.08);
    --shadow-light-xl: 0 3px 3px -1.5px rgba(10, 13, 18, 0.04), 0 8px 8px -4px rgba(10, 13, 18, 0.03), 0 20px 24px -4px rgba(10, 13, 18, 0.08);
    --shadow-light-2xl: 0 4px 4px -2px rgba(10, 13, 18, 0.04), 0 24px 48px -12px rgba(10, 13, 18, 0.18);
    --shadow-light-3xl: 0 5px 5px -2.5px rgba(10, 13, 18, 0.04), 0 32px 64px -12px rgba(10, 13, 18, 0.14);

    /* Shadow primitives — Figma Shadows/Dark. */
    --shadow-dark-xs: 0 1px 2px 0 rgba(130, 247, 215, 0.05);
    --shadow-dark-sm: 0 1px 2px -1px rgba(130, 247, 215, 0.10), 0 1px 3px 0 rgba(130, 247, 215, 0.10);
    --shadow-dark-md: 0 2px 4px -2px rgba(130, 247, 215, 0.06), 0 4px 6px -1px rgba(130, 247, 215, 0.10);
    --shadow-dark-lg: 0 2px 2px -1px rgba(130, 247, 215, 0.04), 0 4px 6px -2px rgba(130, 247, 215, 0.03), 0 12px 16px -4px rgba(130, 247, 215, 0.08);
    --shadow-dark-xl: 0 3px 3px -1.5px rgba(130, 247, 215, 0.04), 0 8px 8px -4px rgba(130, 247, 215, 0.03), 0 20px 24px -4px rgba(130, 247, 215, 0.08);
    --shadow-dark-2xl: 0 4px 4px -2px rgba(130, 247, 215, 0.04), 0 24px 48px -12px rgba(130, 247, 215, 0.18);
    --shadow-dark-3xl: 0 5px 5px -2.5px rgba(130, 247, 215, 0.04), 0 32px 64px -12px rgba(130, 247, 215, 0.14);

    /* Theme shadow aliases — dark by default. */
    --shadow-xs: var(--shadow-dark-xs);
    --shadow-sm: var(--shadow-dark-sm);
    --shadow-md: var(--shadow-dark-md);
    --shadow-lg: var(--shadow-dark-lg);
    --shadow-xl: var(--shadow-dark-xl);
    --shadow-2xl: var(--shadow-dark-2xl);
    --shadow-3xl: var(--shadow-dark-3xl);

    /* Focus-ring primitives and composites. */
    --focus-ring-brand-figma: #81F7D7;
    --focus-ring-error-figma: #F04438;
    --focus-ring-brand-colour: var(--border-focus, var(--focus-ring-brand-figma));
    --focus-ring-error-colour: var(--border-error, var(--focus-ring-error-figma));
    --focus-ring-separation-colour: #FFFFFF;
    --focus-ring-separation-width: 2px;
    --focus-ring-width: 4px;
    --focus-ring: 0 0 0 var(--focus-ring-separation-width) var(--focus-ring-separation-colour), 0 0 0 var(--focus-ring-width) var(--focus-ring-brand-colour);
    --focus-ring-error: 0 0 0 var(--focus-ring-separation-width) var(--focus-ring-separation-colour), 0 0 0 var(--focus-ring-width) var(--focus-ring-error-colour);
    --focus-ring-shadow-xs: 0 0 0 var(--focus-ring-separation-width) var(--focus-ring-separation-colour), 0 0 0 var(--focus-ring-width) var(--focus-ring-brand-colour), var(--shadow-xs);
    --focus-ring-shadow-sm: 0 0 0 var(--focus-ring-separation-width) var(--focus-ring-separation-colour), 0 0 0 var(--focus-ring-width) var(--focus-ring-brand-colour), var(--shadow-sm);
    --focus-ring-error-shadow-xs: 0 0 0 var(--focus-ring-separation-width) var(--focus-ring-separation-colour), 0 0 0 var(--focus-ring-width) var(--focus-ring-error-colour), var(--shadow-xs);
    --focus-ring-shadow-xs-skeuomorphic: 0 0 0 var(--focus-ring-separation-width) var(--focus-ring-separation-colour), 0 0 0 var(--focus-ring-width) var(--focus-ring-brand-colour), var(--shadow-xs), inset 0 -2px 0 0 rgba(10, 13, 18, 0.05), inset 0 0 0 1px rgba(10, 13, 18, 0.18);
    --focus-ring-error-shadow-xs-skeuomorphic: 0 0 0 var(--focus-ring-separation-width) var(--focus-ring-separation-colour), 0 0 0 var(--focus-ring-width) var(--focus-ring-error-colour), var(--shadow-xs), inset 0 -2px 0 0 rgba(10, 13, 18, 0.05), inset 0 0 0 1px rgba(10, 13, 18, 0.18);
    
    /* Backdrop-blur primitives. */
    --backdrop-blur-none: 0;
    --backdrop-blur-sm: 8px;
    --backdrop-blur-md: 16px;
    --backdrop-blur-lg: 24px;
    --backdrop-blur-xl: 40px;
    
    /* Semantic elevation links — use these in product components. */
    --elevation-flat: var(--shadow-none);
    --elevation-card: var(--shadow-xs);
    --elevation-raised: var(--shadow-sm);
    --elevation-floating: var(--shadow-md);
    --elevation-popover: var(--shadow-lg);
    --elevation-toast: var(--shadow-xl);
    --elevation-dialog: var(--shadow-2xl);
    --elevation-dragged: var(--shadow-3xl);
    
    /* Semantic focus and blur links. */
    --focus-control: var(--focus-ring);
    --focus-control-error: var(--focus-ring-error);
    --focus-action: var(--focus-ring-shadow-xs);
    --focus-action-raised: var(--focus-ring-shadow-sm);
    --focus-action-error: var(--focus-ring-error-shadow-xs);
    --focus-action-skeuomorphic: var(--focus-ring-shadow-xs-skeuomorphic);
    --focus-action-error-skeuomorphic: var(--focus-ring-error-shadow-xs-skeuomorphic);
    --blur-overlay-subtle: var(--backdrop-blur-sm);
    --blur-overlay-default: var(--backdrop-blur-md);
    --blur-overlay-strong: var(--backdrop-blur-lg);
    --blur-overlay-intense: var(--backdrop-blur-xl);
   
    /* Radzen bridge links through semantic roles. */
    --rz-shadow-0: var(--elevation-flat);
    --rz-shadow-1: var(--elevation-card);
    --rz-shadow-2: var(--elevation-raised);
    --rz-shadow-3: var(--elevation-floating);
    --rz-shadow-4: var(--elevation-popover);
    --rz-shadow-5: var(--elevation-toast);
    --rz-shadow-6: var(--elevation-dialog);
    --rz-shadow-7: var(--elevation-dragged);
    --rz-shadow-8: var(--elevation-dragged);
    --rz-shadow-9: var(--elevation-dragged);
    --rz-shadow-10: var(--elevation-dragged);
    --rz-focus-ring-color: var(--focus-ring-brand-colour);
    --rz-input-shadow: var(--elevation-flat);
    --rz-input-focus-shadow: var(--focus-control);
    --rz-switch-box-shadow: var(--elevation-raised);
    --rz-header-shadow: var(--elevation-floating);
    --rz-context-menu-box-shadow: var(--elevation-popover);
    --rz-datepicker-panel-shadow: var(--elevation-popover);
    --rz-timespanpicker-popup-shadow: var(--elevation-popover);
    
    /* Existing application links retained for migration compatibility. */
    --origin-card-shadow: var(--elevation-card);
    --origin-raised-shadow: var(--elevation-raised);
    --origin-popover-shadow: var(--elevation-popover);
    --origin-dialog-shadow: var(--elevation-dialog);
    --origin-backdrop-blur: var(--blur-overlay-default);
}

[data-theme="light"] {
    --shadow-xs: var(--shadow-light-xs);
    --shadow-sm: var(--shadow-light-sm);
    --shadow-md: var(--shadow-light-md);
    --shadow-lg: var(--shadow-light-lg);
    --shadow-xl: var(--shadow-light-xl);
    --shadow-2xl: var(--shadow-light-2xl);
    --shadow-3xl: var(--shadow-light-3xl);
}

/* Origin utilities. */
.origin-shadow-none {
    box-shadow: var(--shadow-none);
}

.origin-shadow-xs {
    box-shadow: var(--shadow-xs);
}

.origin-shadow-sm {
    box-shadow: var(--shadow-sm);
}

.origin-shadow-md {
    box-shadow: var(--shadow-md);
}

.origin-shadow-lg {
    box-shadow: var(--shadow-lg);
}

.origin-shadow-xl {
    box-shadow: var(--shadow-xl);
}

.origin-shadow-2xl {
    box-shadow: var(--shadow-2xl);
}

.origin-shadow-3xl {
    box-shadow: var(--shadow-3xl);
}

.origin-backdrop-blur-sm {
    -webkit-backdrop-filter: blur(var(--backdrop-blur-sm));
    backdrop-filter: blur(var(--backdrop-blur-sm));
}

.origin-backdrop-blur-md {
    -webkit-backdrop-filter: blur(var(--backdrop-blur-md));
    backdrop-filter: blur(var(--backdrop-blur-md));
}

.origin-backdrop-blur-lg {
    -webkit-backdrop-filter: blur(var(--backdrop-blur-lg));
    backdrop-filter: blur(var(--backdrop-blur-lg));
}

.origin-backdrop-blur-xl {
    -webkit-backdrop-filter: blur(var(--backdrop-blur-xl));
    backdrop-filter: blur(var(--backdrop-blur-xl));
}

.origin-focus-ring:focus-visible {
    outline: none;
    box-shadow: var(--focus-control);
}

.origin-focus-ring-error:focus-visible,
.origin-focus-ring-error:focus-within {
    outline: none;
    box-shadow: var(--focus-control-error);
}

/* Radzen focus bridges. */
.rz-button:focus-visible,
:where(.rz-paginator-element, .rz-tabview-nav-link, .rz-panel-menu .rz-navigation-item-link, .rz-menuitem):focus-visible {
    outline: none;
    box-shadow: var(--focus-action);
}

.rz-button.rz-danger:focus-visible,
.rz-button.button-destructive:focus-visible {
    outline: none;
    box-shadow: var(--focus-action-error);
}

:where(.rz-textbox, .rz-textarea, .rz-dropdown, .rz-multiselect, .rz-autocomplete, .rz-numeric, .rz-datepicker, .rz-password):focus-visible,
:where(.rz-dropdown, .rz-multiselect, .rz-autocomplete, .rz-numeric, .rz-datepicker, .rz-password):focus-within {
    outline: none;
    box-shadow: var(--focus-control);
}

:where(.rz-textbox, .rz-textarea, .rz-dropdown, .rz-multiselect, .rz-autocomplete, .rz-numeric, .rz-datepicker, .rz-password).rz-state-invalid:focus-visible,
:where(.rz-dropdown, .rz-multiselect, .rz-autocomplete, .rz-numeric, .rz-datepicker, .rz-password).rz-state-invalid:focus-within {
    box-shadow: var(--focus-control-error);
}

/* Radzen elevation and blur bridges. */
.rz-dialog {
    box-shadow: var(--elevation-dialog);
}

:where(.rz-context-menu, .rz-menu-list, .rz-dropdown-panel, .rz-multiselect-panel, .rz-autocomplete-panel, .rz-datepicker-calendar, .rz-popup) {
    box-shadow: var(--elevation-popover);
}

:where(.rz-notification, .rz-toast) {
    box-shadow: var(--elevation-toast);
}

:where(.rz-dialog-mask, .rz-sidebar-mask, .origin-backdrop) {
    -webkit-backdrop-filter: blur(var(--blur-overlay-default));
    backdrop-filter: blur(var(--blur-overlay-default));
}

:where(.rz-state-disabled, [disabled], [aria-disabled="true"]) {
    box-shadow: none;
}

@media (forced-colors: active) {
    :where(.origin-focus-ring, .origin-focus-ring-error, .rz-button, .rz-paginator-element, .rz-tabview-nav-link, .rz-navigation-item-link, .rz-menuitem, .rz-textbox, .rz-textarea, .rz-dropdown, .rz-multiselect, .rz-autocomplete, .rz-numeric, .rz-datepicker, .rz-password):focus-visible {
        outline: 2px solid CanvasText;
        outline-offset: 2px;
        box-shadow: none;
    }
}

@media (prefers-reduced-transparency: reduce) {
    :where(.origin-backdrop-blur-sm, .origin-backdrop-blur-md, .origin-backdrop-blur-lg, .origin-backdrop-blur-xl, .rz-dialog-mask, .rz-sidebar-mask, .origin-backdrop) {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}