/* UPWORK - layout.css */
:root {
  /* Spacing Scale - Clean and spacious */
  --up-spacing-xs: 4px;
  --up-spacing-sm: 8px;
  --up-spacing-md: 16px;
  --up-spacing-lg: 24px;
  --up-spacing-xl: 32px;
  --up-spacing-2xl: 48px; /* Medium spacing */
  --up-spacing-3xl: 64px;
  --up-spacing-4xl: 80px;
  --up-spacing-5xl: 100px;
  
  /* Sizing - Radii (Soft but professional) */
  --up-border-radius-sm: 8px;
  --up-border-radius-md: 12px;
  --up-border-radius-lg: 16px;
  --up-border-radius-pill: 100px;
  --up-border-radius-circle: 50%;

  /* Header & Heights */
  --up-size-header-height: 80px;
  --up-size-input-height: 44px;
  --up-size-button-height: 44px;
  --up-banner-height-medium: 400px;
  --up-banner-padding-y: 60px;

  /* Constraints */
  --up-size-max-width: 1440px;
  --up-size-container-width: 1280px;
  --up-size-container-padding-mobile: 24px;
  --up-size-container-padding-desktop: 40px;
  
  /* Z-Index mapping */
  --up-z-index-background: -1;
  --up-z-index-base: 0;
  --up-z-index-sticky: 100;
  --up-z-index-nav: 200;
  --up-z-index-dropdown: 300;
  --up-z-index-overlay: 400;
  --up-z-index-modal: 500;
  --up-z-index-popover: 600;
  --up-z-index-toast: 9999;
}

/* Enhanced Layout Components */
.banner-medium {
    padding-top: var(--up-banner-padding-y);
    padding-bottom: var(--up-banner-padding-y);
    min-height: var(--up-banner-height-medium);
    display: flex;
    align-items: center;
}

.card-medium {
    padding: var(--up-spacing-lg);
    border-radius: var(--up-border-radius-lg);
}

.container-tight {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}