/* /common/ui/ui.css */

:root {
  /* Base font and sizing */
  --font-size: 16px;
  --font-family: 'Arial', sans-serif;
  
  /* Layout and spacing */
  --menu-padding: 15px 0;
  --menu-item-margin: 15px;
  --menu-item-padding: 10px 15px;
  --menu-item-padding-collapsed: 12px 15px;
  --menu-link-padding: 8px 15px;
  --menu-container-padding: 0 15px;
  --menu-collapsed-padding: 15px 0;
  --page-container-padding-top: 80px;
  --page-container-padding-top-large: 90px;
  
  /* Border radius */
  --border-radius: 4px;
  --border-radius-large: 5px;
  --border-radius-button: 0.5rem;
  
  /* Z-index values */
  --z-index-menu: 1000;
  --z-index-menu-collapsed: 999;
  --z-index-overlay: 9900;
  --z-index-modal: 1055;
  --z-index-loading: 9990;
  
  /* Box shadows */
  --box-shadow-menu: 0 2px 6px rgba(0, 0, 0, 0.15);
  --box-shadow-menu-strong: 0 2px 6px rgba(0, 0, 0, 0.2);
  
  /* Transitions */
  --transition-fast: 0.3s ease;
  
  /* Menu toggle */
  --menu-toggle-size: 40px;
  --menu-toggle-border-radius: 4px;
  
  /* Language menu */
  --lang-menu-min-width: 150px;
  --lang-menu-max-height: 300px;
  --lang-menu-padding: 5px 0;
  --lang-menu-scrollbar-width: 8px;
  
  /* Modal dimensions */
  --modal-max-width: 400px;
  --modal-padding: 20px;
  --modal-margin: 10px;
  --modal-button-margin: 0 5px;
  
  /* Image preview */
  --image-preview-max-width: 90%;
  --image-preview-max-height: 90%;
  
  /* Spinner */
  --spinner-size: 1.5rem;
  --spinner-size-large: 3rem;
  --spinner-border-width: 4px;
  --spinner-border-width-large: 6px;
  --spinner-animation: spin 1s linear infinite;
  
  /* Button sizing */
  --btn-primary-padding: 0.75rem 1.5rem;
  --btn-secondary-padding: 0.5rem 1rem;
  
  /* Alert padding */
  --alert-padding: 0.75rem;
  --alert-margin-bottom: 1rem;
  
  /* Overlay backgrounds */
  --overlay-bg-light: rgba(0, 0, 0, 0.5);
  --overlay-bg-dark: rgba(0, 0, 0, 0.8);
  --overlay-bg-white: rgba(255, 255, 255, 0.1);
  
  /* Text colors */
  --text-white: #ffffff;
  --text-black: #000000;
  --text-muted: #4b5563;
  
  /* Background colors */
  --bg-white: #ffffff;
  --bg-transparent: transparent;
  
  /* Border colors */
  --border-white-light: rgba(255, 255, 255, 0.1);
  
  /* Font weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  
  /* Font sizes */
  --font-size-small: 14px;
  --font-size-large: 1.5rem;
  
  /* Line heights */
  --line-height-normal: 1.5;
  
  /* Icon spacing */
  --icon-margin-right: 5px;
  
  /* Collapsed menu */
  --collapsed-menu-min-width: 200px;
  --collapsed-menu-right-offset: 15px;
}
