/**
 * @license
 * ws-system
 * Copyright (C) 2025  WebSocket System
 *
 * WSS Design Tokens - GENERATED FILE
 * Source: src/tokens/definitions.ts
 * Run: npm run generate:tokens
 */

:root {
  /* color */
  --wss-color-primary: rgba(60, 115, 115, 1);
  --wss-color-primary-hover: rgba(48, 100, 98, 1);
  --wss-color-primary-active: rgba(35, 80, 78, 1);
  --wss-color-primary-light: rgba(85, 138, 135, 1);
  --wss-color-primary-lighter: rgba(237, 246, 245, 1);
  --wss-color-primary-dark: rgba(48, 100, 98, 1);
  --wss-color-secondary: rgba(107, 70, 193, 1);
  --wss-color-secondary-hover: rgba(85, 58, 154, 1);
  --wss-color-secondary-active: rgba(64, 46, 115, 1);
  --wss-color-accent: rgba(255, 107, 53, 1);
  --wss-color-accent-hover: rgba(229, 90, 42, 1);
  --wss-color-accent-active: rgba(204, 73, 31, 1);
  --wss-color-accent-light: rgba(255, 237, 213, 1);
  --wss-color-accent-dark: rgba(229, 90, 42, 1);
  --wss-color-success: rgba(4, 120, 87, 1);
  --wss-color-success-light: rgba(209, 250, 229, 1);
  --wss-color-success-dark: rgba(6, 95, 70, 1);
  --wss-color-warning: rgba(180, 83, 9, 1);
  --wss-color-warning-light: rgba(254, 243, 199, 1);
  --wss-color-warning-dark: rgba(146, 64, 14, 1);
  --wss-color-error: rgba(220, 38, 38, 1);
  --wss-color-error-light: rgba(254, 226, 226, 1);
  --wss-color-error-dark: rgba(153, 27, 27, 1);
  --wss-color-info: rgba(37, 99, 235, 1);
  --wss-color-info-light: rgba(219, 234, 254, 1);
  --wss-color-info-dark: rgba(30, 64, 175, 1);

  /* neutrals */
  --wss-neutrals-white: rgba(255, 255, 255, 1);
  --wss-neutrals-black: rgba(0, 0, 0, 1);
  --wss-neutrals-gray50: rgba(250, 250, 250, 1);
  --wss-neutrals-gray100: rgba(244, 244, 245, 1);
  --wss-neutrals-gray200: rgba(228, 228, 231, 1);
  --wss-neutrals-gray300: rgba(212, 212, 216, 1);
  --wss-neutrals-gray400: rgba(161, 161, 170, 1);
  --wss-neutrals-gray500: rgba(113, 113, 122, 1);
  --wss-neutrals-gray600: rgba(82, 82, 91, 1);
  --wss-neutrals-gray700: rgba(63, 63, 70, 1);
  --wss-neutrals-gray800: rgba(39, 39, 42, 1);
  --wss-neutrals-gray900: rgba(24, 24, 27, 1);

  /* text */
  --wss-text-primary: rgba(24, 24, 27, 1);
  --wss-text-secondary: rgba(82, 82, 91, 1);
  --wss-text-muted: rgba(113, 113, 122, 1);
  --wss-text-tertiary: rgba(113, 113, 122, 1);
  --wss-text-disabled: rgba(161, 161, 170, 1);
  --wss-text-inverse: rgba(255, 255, 255, 1);

  /* backgrounds */
  --wss-bg-primary: rgba(255, 255, 255, 1);
  --wss-bg-secondary: rgba(250, 250, 250, 1);
  --wss-bg-tertiary: rgba(244, 244, 245, 1);
  --wss-bg-inverse: rgba(24, 24, 27, 1);
  --wss-bg-overlay: rgba(0, 0, 0, 0.50);
  --wss-bg-overlay-light: rgba(255, 255, 255, 0.10);
  --wss-bg-overlay-lighter: rgba(255, 255, 255, 0.20);

  /* borders */
  --wss-border-color: rgba(0, 0, 0, 0.10);
  --wss-border-color-light: rgba(0, 0, 0, 0.06);
  --wss-border-color-dark: rgba(0, 0, 0, 0.15);
  --wss-border-color-focus: rgba(60, 115, 115, 1);

  /* focus */
  --wss-focus-ring-color: rgba(60, 115, 115, 1);
  --wss-focus-ring-color-error: rgba(220, 38, 38, 1);
  --wss-focus-ring-width: 2px;
  --wss-focus-ring-offset: 2px;

  /* space */
  --wss-space-0: 0;
  --wss-space-1: 0.25rem;
  --wss-space-2: 0.5rem;
  --wss-space-3: 0.75rem;
  --wss-space-4: 1rem;
  --wss-space-5: 1.5rem;
  --wss-space-6: 2rem;
  --wss-space-7: 3rem;
  --wss-space-8: 4rem;
  --wss-space-10: 2.5rem;
  --wss-space-12: 3rem;
  --wss-space-16: 4rem;
  --wss-space-20: 5rem;
  --wss-space-24: 6rem;
  --wss-space-32: 8rem;
  --wss-space-0-5: 0.125rem;

  /* fontFamily */
  --wss-font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --wss-font-family-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
  --wss-font-family-icon: wss-icons;

  /* fontSize */
  --wss-font-size-xs: 0.75rem;
  --wss-font-size-sm: 0.875rem;
  --wss-font-size-base: 1rem;
  --wss-font-size-lg: 1.125rem;
  --wss-font-size-xl: 1.25rem;
  --wss-font-size-2xl: 1.5rem;
  --wss-font-size-3xl: 1.875rem;
  --wss-font-size-4xl: 2.25rem;

  /* fontWeight */
  --wss-font-weight-normal: 400;
  --wss-font-weight-medium: 500;
  --wss-font-weight-semibold: 600;
  --wss-font-weight-bold: 700;

  /* lineHeight */
  --wss-line-height-tight: 1.25;
  --wss-line-height-normal: 1.5;
  --wss-line-height-relaxed: 1.75;

  /* borderWidth */
  --wss-border-width-thin: 1px;
  --wss-border-width-medium: 2px;
  --wss-border-width-thick: 4px;

  /* borderRadius */
  --wss-border-radius-none: 0;
  --wss-border-radius-sm: 0.25rem;
  --wss-border-radius-base: 0.5rem;
  --wss-border-radius-md: 0.75rem;
  --wss-border-radius-lg: 1rem;
  --wss-border-radius-xl: 1.5rem;
  --wss-border-radius-2xl: 2rem;
  --wss-border-radius-full: 9999px;

  /* iconSize */
  --wss-icon-size-xs: 1rem;
  --wss-icon-size-sm: 1.25rem;
  --wss-icon-size-md: 1.5rem;
  --wss-icon-size-lg: 2rem;
  --wss-icon-size-xl: 2.5rem;
  --wss-icon-size-2xl: 3rem;
  --wss-icon-size-3xl: 4rem;

  /* shadow */
  --wss-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --wss-shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --wss-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --wss-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --wss-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --wss-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --wss-shadow-focus: 0 0 0 3px rgba(71, 85, 105, 0.3);
  --wss-shadow-focus-error: 0 0 0 3px rgba(220, 38, 38, 0.3);

  /* transition */
  --wss-transition-fast: 150ms ease-in-out;
  --wss-transition-base: 200ms ease-in-out;
  --wss-transition-slow: 300ms ease-in-out;

  /* transitionProperty */
  --wss-transition-property-colors: background-color, border-color, color, fill, stroke;
  --wss-transition-property-opacity: opacity;
  --wss-transition-property-shadow: box-shadow;
  --wss-transition-property-transform: transform;

  /* animation */
  --wss-animation-instant: 100ms;
  --wss-animation-fast: 150ms;
  --wss-animation-base: 200ms;
  --wss-animation-slow: 300ms;
  --wss-animation-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --wss-animation-ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --wss-animation-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* zIndex */
  --wss-z-index-base: 0;
  --wss-z-index-dropdown: 1000;
  --wss-z-index-sticky: 1100;
  --wss-z-index-fixed: 1200;
  --wss-z-index-drawer: 1300;
  --wss-z-index-modal-backdrop: 1400;
  --wss-z-index-modal: 1500;
  --wss-z-index-popover: 1600;
  --wss-z-index-toast: 1700;
  --wss-z-index-tooltip: 1800;

  /* layout */
  --wss-layout-container-sm: 640px;
  --wss-layout-container-md: 768px;
  --wss-layout-container-lg: 1024px;
  --wss-layout-container-xl: 1280px;
  --wss-layout-container2xl: 1600px;
  --wss-layout-container-full: 100%;
  --wss-layout-page-max-width: 1920px;
  --wss-layout-header-height: 4rem;
  --wss-layout-gutter-sm: 1rem;
  --wss-layout-gutter-md: 1.5rem;
  --wss-layout-gutter-lg: 2rem;
  --wss-layout-gutter-xl: 2.5rem;
  --wss-layout-breakpoint-xs: 0px;
  --wss-layout-breakpoint-sm: 641px;
  --wss-layout-breakpoint-md: 769px;
  --wss-layout-breakpoint-lg: 1025px;
  --wss-layout-breakpoint-xl: 1281px;
  --wss-layout-breakpoint2xl: 1601px;
  --wss-layout-breakpoint3xl: 1921px;
  --wss-layout-breakpoint4xl: 2561px;
  --wss-layout-breakpoint5xl: 3841px;
  --wss-layout-aspect-ratio-portrait: 3/4;
  --wss-layout-aspect-ratio-square: 1/1;
  --wss-layout-aspect-ratio-landscape: 4/3;
  --wss-layout-aspect-ratio-wide: 16/9;
  --wss-layout-aspect-ratio-ultrawide: 21/9;
  --wss-layout-aspect-ratio-superwide: 32/9;

  /* components */
  /* input */
  --wss-input-padding-x: 1rem;
  --wss-input-padding-y: 0.75rem;
  --wss-input-border-radius: 0.5rem;
  --wss-input-border-width: 1px;
  --wss-input-border-color: rgba(0, 0, 0, 0.15);
  --wss-input-bg: rgba(255, 255, 255, 1);
  --wss-input-focus-border-color: rgba(60, 115, 115, 1);

  /* button */
  --wss-button-padding-x: 1rem;
  --wss-button-padding-y: 0.75rem;
  --wss-button-border-radius: 0.5rem;
  --wss-button-font-weight: 500;

  /* card */
  --wss-card-padding: 1rem;
  --wss-card-border-radius: 0.75rem;
  --wss-card-border-width: 1px;
  --wss-card-border-color: rgba(0, 0, 0, 0.06);
  --wss-card-bg: rgba(255, 255, 255, 1);
  --wss-card-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);

  /* toast */
  --wss-toast-width: 22rem;
  --wss-toast-padding: 1rem;
  --wss-toast-border-radius: 0.75rem;
  --wss-toast-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

  /* modal */
  --wss-modal-max-width: 32rem;
  --wss-modal-padding: 2rem;
  --wss-modal-border-radius: 1.5rem;
  --wss-modal-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --wss-modal-bg: rgba(255, 255, 255, 1);

  /* table */
  --wss-table-bg: rgba(255, 255, 255, 1);
  --wss-table-border-radius: 0.5rem;
  --wss-table-border-width: 1px;
  --wss-table-border-color: rgba(0, 0, 0, 0.06);
  --wss-table-cell-gap: 0;
  --wss-table-cell-padding: 0.75rem;
  --wss-table-cell-padding-compact: 0.5rem;
  --wss-table-cell-text-color: rgba(24, 24, 27, 1);
  --wss-table-header-bg: rgba(250, 250, 250, 1);
  --wss-table-header-font-weight: 600;
  --wss-table-header-padding: 0.75rem;
  --wss-table-header-text-color: rgba(24, 24, 27, 1);
  --wss-table-loading-bg: rgba(255, 255, 255, 0.80);
  --wss-table-row-bg: rgba(255, 255, 255, 1);
  --wss-table-row-hover-bg: rgba(250, 250, 250, 1);
  --wss-table-stripe-bg: rgba(250, 250, 250, 1);
  --wss-table-selected-bg: rgba(237, 246, 245, 1);
  --wss-table-selected-hover-bg: rgba(210, 232, 230, 1);
  --wss-table-sort-icon-color: rgba(161, 161, 170, 1);
  --wss-table-sort-icon-active-color: rgba(60, 115, 115, 1);
  --wss-table-transition: background-color 150ms ease-in-out;

  /* form */
  --wss-form-gap: 1rem;
  --wss-form-label-color: rgba(63, 63, 70, 1);
  --wss-form-label-font-weight: 500;
  --wss-form-input-bg: rgba(255, 255, 255, 1);
  --wss-form-input-border: rgba(0, 0, 0, 0.15);
  --wss-form-input-border-hover: rgba(0, 0, 0, 0.20);
  --wss-form-input-border-focus: rgba(60, 115, 115, 1);
  --wss-form-input-font-size: 1rem;
  --wss-form-input-padding: 0.75rem 1rem;
  --wss-form-input-radius: 0.5rem;
  --wss-form-input-text-color: rgba(24, 24, 27, 1);
  --wss-form-error-bg: rgba(254, 226, 226, 1);
  --wss-form-error-color: rgba(153, 27, 27, 1);
  --wss-form-helper-color: rgba(113, 113, 122, 1);
  --wss-form-helper-font-size: 0.875rem;
  --wss-form-disabled-opacity: 0.5;
  --wss-form-disabled-cursor: not-allowed;
  --wss-form-checkbox-size: 1.125rem;
  --wss-form-switch-width: 2.75rem;
  --wss-form-switch-height: 1.5rem;
  --wss-form-switch-knob-size: 1.25rem;
  --wss-form-transition: all 150ms ease-in-out;

  /* layer */
  --wss-layer-overlay-background: rgba(0, 0, 0, 0.50);
  --wss-layer-overlay-backdrop-filter: blur(8px);
  --wss-layer-modal-bg: rgba(255, 255, 255, 1);
  --wss-layer-modal-color: rgba(0, 0, 0, 1);
  --wss-layer-modal-padding: 2rem;
  --wss-layer-modal-border-radius: 1.5rem;
  --wss-layer-modal-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --wss-layer-modal-max-width: 32rem;
  --wss-layer-modal-max-height: 90vh;
  --wss-layer-modal-header-padding: 1rem 1.5rem;
  --wss-layer-modal-header-border-color: rgba(0, 0, 0, 0.06);
  --wss-layer-modal-title-font-size: 1.25rem;
  --wss-layer-modal-title-font-weight: 600;
  --wss-layer-modal-duration: 300ms;
  --wss-layer-modal-size-sm-max: 25rem;
  --wss-layer-modal-size-sm-min: 20rem;
  --wss-layer-modal-size-md-max: 37.5rem;
  --wss-layer-modal-size-md-min: 25rem;
  --wss-layer-modal-size-lg-max: 50rem;
  --wss-layer-modal-size-lg-min: 37.5rem;
  --wss-layer-modal-size-xl-max: 62.5rem;
  --wss-layer-modal-size-xl-min: 50rem;
  --wss-layer-modal-immersive-header-bg: linear-gradient(to bottom, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.35) 60%, transparent 100%);
  --wss-layer-modal-immersive-header-color: rgba(255, 255, 255, 1);
  --wss-layer-modal-immersive-header-padding: 0.75rem 1rem;
  --wss-layer-modal-immersive-header-hide-offset: -0.5rem;
  --wss-layer-modal-immersive-title-text-shadow: 0 1px 3px rgba(0, 0, 0, 0.50);
  --wss-layer-modal-immersive-transition-duration: 300ms;
  --wss-layer-modal-immersive-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --wss-layer-modal-immersive-content-inset: 6rem;
  --wss-layer-modal-immersive-light-overlay-bg: rgba(245, 245, 245, 0.60);
  --wss-layer-modal-immersive-light-header-bg: linear-gradient(to bottom, rgba(255, 255, 255, 0.40) 0%, rgba(255, 255, 255, 0.30) 60%, transparent 100%);
  --wss-layer-modal-immersive-light-header-color: rgba(24, 24, 27, 1);
  --wss-layer-modal-immersive-light-title-text-shadow: none;
  --wss-layer-modal-immersive-chrome-bg: rgba(0, 0, 0, 0.60);
  --wss-layer-modal-immersive-chrome-color: rgba(255, 255, 255, 1);
  --wss-layer-modal-immersive-chrome-hover-bg: rgba(255, 255, 255, 0.15);
  --wss-layer-modal-immersive-chrome-blur: blur(8px);
  --wss-layer-modal-immersive-light-chrome-bg: rgba(0, 0, 0, 0.08);
  --wss-layer-modal-immersive-light-chrome-color: rgba(24, 24, 27, 1);
  --wss-layer-modal-immersive-light-chrome-hover-bg: rgba(0, 0, 0, 0.12);
  --wss-layer-dialog-bg: rgba(255, 255, 255, 1);
  --wss-layer-dialog-color: rgba(0, 0, 0, 1);
  --wss-layer-dialog-padding: 1.5rem;
  --wss-layer-dialog-border-radius: 1.5rem;
  --wss-layer-dialog-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --wss-layer-dialog-max-width: 31.25rem;
  --wss-layer-dialog-max-height: 90vh;
  --wss-layer-dialog-header-padding: 1rem 1.5rem;
  --wss-layer-dialog-header-border-color: rgba(0, 0, 0, 0.06);
  --wss-layer-dialog-title-font-size: 1.25rem;
  --wss-layer-dialog-title-font-weight: 600;
  --wss-layer-dialog-duration: 300ms;
  --wss-layer-dialog-size-sm-max: 21.875rem;
  --wss-layer-dialog-size-md-max: 28.125rem;
  --wss-layer-dialog-size-lg-max: 34.375rem;
  --wss-layer-dialog-size-xl-max: 40.625rem;
  --wss-layer-drawer-bg: rgba(255, 255, 255, 1);
  --wss-layer-drawer-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --wss-layer-drawer-header-padding: 1rem 1.5rem;
  --wss-layer-drawer-header-border-color: rgba(0, 0, 0, 0.06);
  --wss-layer-drawer-title-font-size: 1.125rem;
  --wss-layer-drawer-title-font-weight: 600;
  --wss-layer-drawer-width: 25rem;
  --wss-layer-drawer-height: 100vh;
  --wss-layer-drawer-duration: 300ms;
  --wss-layer-toast-bg: rgba(0, 0, 0, 1);
  --wss-layer-toast-color: rgba(255, 255, 255, 1);
  --wss-layer-toast-border-radius: 1rem;
  --wss-layer-toast-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --wss-layer-toast-padding: 1rem;
  --wss-layer-toast-width: 22rem;
  --wss-layer-toast-font-size: 1rem;
  --wss-layer-toast-font-weight: 700;
  --wss-layer-toast-action-color: rgba(255, 255, 255, 1);
  --wss-layer-toast-action-hover-opacity: 0.8;
  --wss-layer-toast-action-focus-opacity: 0.9;
  --wss-layer-toast-duration: 200ms;
  --wss-layer-popover-bg: rgba(255, 255, 255, 1);
  --wss-layer-popover-border-radius: 1rem;
  --wss-layer-popover-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --wss-layer-popover-padding: 0.75rem;
  --wss-layer-popover-arrow-size: 0.75rem;
  --wss-layer-popover-border-color: rgba(0, 0, 0, 0.06);
  --wss-layer-popover-duration: 150ms;
  --wss-layer-context-bg: rgba(255, 255, 255, 1);
  --wss-layer-context-border-radius: 0.75rem;
  --wss-layer-context-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --wss-layer-context-padding: 0.5rem;
  --wss-layer-context-item-hover-bg: rgba(250, 250, 250, 1);
  --wss-layer-context-item-danger-color: rgba(220, 38, 38, 1);
  --wss-layer-context-divider-color: rgba(0, 0, 0, 0.06);
  --wss-layer-context-duration: 150ms;
  --wss-layer-tooltip-bg: rgba(0, 0, 0, 1);
  --wss-layer-tooltip-color: rgba(255, 255, 255, 1);
  --wss-layer-tooltip-border-radius: 0.25rem;
  --wss-layer-tooltip-padding: 0.5rem 0.75rem;
  --wss-layer-tooltip-font-size: 0.875rem;
  --wss-layer-tooltip-line-height: 1.5;
  --wss-layer-tooltip-arrow-size: 0.5rem;
  --wss-layer-tooltip-duration: 100ms;
  --wss-layer-animation-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --wss-layer-animation-ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --wss-layer-modal-mobile-max-width: 100vw;
  --wss-layer-modal-mobile-max-height: 100vh;
  --wss-layer-drawer-mobile-width: 85vw;
  --wss-layer-drawer-mobile-height: 100vh;

  /* image-viewer */
  --wss-image-viewer-controls-bg: rgba(0, 0, 0, 0.60);
  --wss-image-viewer-controls-color: rgba(255, 255, 255, 1);
  --wss-image-viewer-controls-radius: 1rem;
  --wss-image-viewer-controls-backdrop-filter: blur(8px);
  --wss-image-viewer-controls-button-size: 2rem;
  --wss-image-viewer-controls-button-radius: 0.75rem;
  --wss-image-viewer-controls-button-hover-bg: rgba(255, 255, 255, 0.15);
  --wss-image-viewer-controls-zoom-width: 3rem;
  --wss-image-viewer-controls-transition: opacity 200ms ease-in-out;
  --wss-image-viewer-controls-button-transition: background-color 150ms ease-in-out;

  /* file-preview */
  --wss-file-preview-gallery-nav-color: rgba(255, 255, 255, 1);
  --wss-file-preview-gallery-nav-transition: opacity 200ms ease-in-out;

}

/* Dark Mode - Color and shadow overrides only */
:root[data-wss-theme="dark"] {
  /* color */
  --wss-color-primary: rgba(130, 178, 175, 1);
  --wss-color-primary-hover: rgba(176, 210, 207, 1);
  --wss-color-primary-active: rgba(210, 232, 230, 1);
  --wss-color-primary-light: rgba(130, 178, 175, 1);
  --wss-color-primary-lighter: rgba(35, 80, 78, 1);
  --wss-color-primary-dark: rgba(176, 210, 207, 1);
  --wss-color-secondary: rgba(139, 92, 246, 1);
  --wss-color-secondary-hover: rgba(167, 139, 250, 1);
  --wss-color-secondary-active: rgba(196, 181, 253, 1);
  --wss-color-accent: rgba(251, 146, 60, 1);
  --wss-color-accent-hover: rgba(253, 186, 116, 1);
  --wss-color-accent-active: rgba(254, 215, 170, 1);
  --wss-color-accent-light: rgba(124, 45, 18, 1);
  --wss-color-accent-dark: rgba(253, 186, 116, 1);
  --wss-color-success: rgba(52, 211, 153, 1);
  --wss-color-success-light: rgba(6, 78, 59, 1);
  --wss-color-success-dark: rgba(110, 231, 183, 1);
  --wss-color-warning: rgba(251, 191, 36, 1);
  --wss-color-warning-light: rgba(120, 53, 15, 1);
  --wss-color-warning-dark: rgba(252, 211, 77, 1);
  --wss-color-error: rgba(248, 113, 113, 1);
  --wss-color-error-light: rgba(127, 29, 29, 1);
  --wss-color-error-dark: rgba(252, 165, 165, 1);
  --wss-color-info: rgba(96, 165, 250, 1);
  --wss-color-info-light: rgba(30, 58, 138, 1);
  --wss-color-info-dark: rgba(147, 197, 253, 1);

  /* text */
  --wss-text-primary: rgba(244, 244, 245, 1);
  --wss-text-secondary: rgba(212, 212, 216, 1);
  --wss-text-muted: rgba(212, 212, 216, 1);
  --wss-text-tertiary: rgba(212, 212, 216, 1);
  --wss-text-disabled: rgba(113, 113, 122, 1);
  --wss-text-inverse: rgba(15, 15, 15, 1);

  /* backgrounds */
  --wss-bg-primary: rgba(20, 20, 22, 1);
  --wss-bg-secondary: rgba(26, 26, 28, 1);
  --wss-bg-tertiary: rgba(63, 63, 70, 1);
  --wss-bg-inverse: rgba(250, 250, 250, 1);
  --wss-bg-overlay: rgba(0, 0, 0, 0.75);
  --wss-bg-overlay-light: rgba(255, 255, 255, 0.10);
  --wss-bg-overlay-lighter: rgba(255, 255, 255, 0.20);

  /* borders */
  --wss-border-color: rgba(255, 255, 255, 0.12);
  --wss-border-color-light: rgba(255, 255, 255, 0.08);
  --wss-border-color-dark: rgba(255, 255, 255, 0.18);
  --wss-border-color-focus: rgba(130, 178, 175, 1);

  /* focus */
  --wss-focus-ring-color: rgba(130, 178, 175, 1);
  --wss-focus-ring-color-error: rgba(248, 113, 113, 1);

  /* shadow */
  --wss-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --wss-shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --wss-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --wss-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
  --wss-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
  --wss-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
  --wss-shadow-focus: 0 0 0 3px rgba(148, 163, 184, 0.4);
  --wss-shadow-focus-error: 0 0 0 3px rgba(248, 113, 113, 0.4);

  /* components */
  /* input */
  --wss-input-border-color: rgba(255, 255, 255, 0.18);
  --wss-input-bg: rgba(26, 26, 28, 1);
  --wss-input-focus-border-color: rgba(130, 178, 175, 1);

  /* card */
  --wss-card-border-color: rgba(255, 255, 255, 0.08);
  --wss-card-bg: rgba(26, 26, 28, 1);
  --wss-card-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4);

  /* toast */
  --wss-toast-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4);

  /* modal */
  --wss-modal-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
  --wss-modal-bg: rgba(26, 26, 28, 1);

  /* table */
  --wss-table-bg: rgba(15, 15, 15, 1);
  --wss-table-border-color: rgba(255, 255, 255, 0.08);
  --wss-table-cell-text-color: rgba(244, 244, 245, 1);
  --wss-table-header-bg: rgba(26, 26, 28, 1);
  --wss-table-header-text-color: rgba(244, 244, 245, 1);
  --wss-table-loading-bg: rgba(0, 0, 0, 0.80);
  --wss-table-row-bg: rgba(15, 15, 15, 1);
  --wss-table-row-hover-bg: rgba(26, 26, 28, 1);
  --wss-table-stripe-bg: rgba(26, 26, 28, 1);
  --wss-table-selected-bg: rgba(35, 80, 78, 1);
  --wss-table-selected-hover-bg: rgba(48, 100, 98, 1);
  --wss-table-sort-icon-color: rgba(161, 161, 170, 1);
  --wss-table-sort-icon-active-color: rgba(130, 178, 175, 1);

  /* form */
  --wss-form-label-color: rgba(244, 244, 245, 1);
  --wss-form-input-bg: rgba(26, 26, 28, 1);
  --wss-form-input-border: rgba(255, 255, 255, 0.18);
  --wss-form-input-border-hover: rgba(255, 255, 255, 0.25);
  --wss-form-input-border-focus: rgba(130, 178, 175, 1);
  --wss-form-input-text-color: rgba(244, 244, 245, 1);
  --wss-form-error-bg: rgba(127, 29, 29, 1);
  --wss-form-error-color: rgba(252, 165, 165, 1);
  --wss-form-helper-color: rgba(161, 161, 170, 1);

  /* layer */
  --wss-layer-modal-bg: rgba(26, 26, 28, 1);
  --wss-layer-modal-color: rgba(244, 244, 245, 1);
  --wss-layer-modal-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
  --wss-layer-modal-header-border-color: rgba(255, 255, 255, 0.08);
  --wss-layer-dialog-bg: rgba(26, 26, 28, 1);
  --wss-layer-dialog-color: rgba(244, 244, 245, 1);
  --wss-layer-dialog-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
  --wss-layer-dialog-header-border-color: rgba(255, 255, 255, 0.08);
  --wss-layer-drawer-bg: rgba(26, 26, 28, 1);
  --wss-layer-drawer-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
  --wss-layer-drawer-header-border-color: rgba(255, 255, 255, 0.08);
  --wss-layer-popover-bg: rgba(26, 26, 28, 1);
  --wss-layer-popover-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --wss-layer-popover-border-color: rgba(255, 255, 255, 0.08);
  --wss-layer-context-bg: rgba(20, 20, 22, 1);
  --wss-layer-context-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --wss-layer-context-item-hover-bg: rgba(63, 63, 70, 1);
  --wss-layer-context-item-danger-color: rgba(248, 113, 113, 1);
  --wss-layer-context-divider-color: rgba(255, 255, 255, 0.08);

  /* image-viewer */
  --wss-image-viewer-controls-bg: rgba(0, 0, 0, 0.75);
  --wss-image-viewer-controls-color: rgba(244, 244, 245, 1);
  --wss-image-viewer-controls-button-hover-bg: rgba(255, 255, 255, 0.20);

  /* file-preview */
  --wss-file-preview-gallery-nav-color: rgba(244, 244, 245, 1);

}

/* Pointer modality — suppress focus ring on mouse/touch interaction */
:root[data-modality="pointer"] {
  --wss-focus-ring-width: 0px;
}

/* WCAG 2.1 SC 2.3.3 — Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
  :root,
  :root[data-wss-theme="dark"] {
  /* transition */
  --wss-transition-fast: 0ms ease-in-out;
  --wss-transition-base: 0ms ease-in-out;
  --wss-transition-slow: 0ms ease-in-out;

  /* animation */
  --wss-animation-instant: 0ms;
  --wss-animation-fast: 0ms;
  --wss-animation-base: 0ms;
  --wss-animation-slow: 0ms;

  /* components */
  /* layer */
  --wss-layer-modal-duration: 0ms;
  --wss-layer-drawer-duration: 0ms;
  --wss-layer-toast-duration: 0ms;
  --wss-layer-popover-duration: 0ms;
  --wss-layer-context-duration: 0ms;
  --wss-layer-dialog-duration: 0ms;
  --wss-layer-tooltip-duration: 0ms;

  }
}