/*
===========================================
DESERT COMMERCIAL SWEEPING - DESIGN SYSTEM
===========================================

-----01 Typography System 
FONT SIZE SYSTEM (px)
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98

FONT WEIGHTS: 
Default: 400
Medium: 500
Semi-bold: 600
Bold: 700

LINE HEIGHTS:
Default: 1 
Small: 1.05
Medium: 1.2
Paragraph default: 1.6
Large: 1.8

LETTER SPACING:
-0.5px
0.5px
0.75px

--------------------------------------------------------------------
-----02 Color System
Primary Brand: #2f3c69
Secondary: #4a5a8a
Accent: #6a8cbc

Tints (lighter): 
#f9f9fb (ultra-light background)
#e8ecf5 (light background)

Shades (darker): 
#24345a
#1b2540

Text Colors:
#212121 (primary text - WCAG AAA)
#555555 (secondary text - WCAG AA)
#757575 (tertiary text)

Status/Interactive:
Success: #2e7d32
Warning: #f57c00
Error: #c62828
Info: #1976d2

---------------------------------------------
-----03 Shadows (Modern, Subtle)
xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05)
sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)
md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)
lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)
xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)

--------------------------------------
-----04 Border-Radius (Modern)
sm: 6px
md: 8px
lg: 12px
xl: 16px
round: 9999px (pills/badges)

-----------------------------------------
-----05 Whitespace
SPACING SYSTEM (px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128

-----------------------------------------
-----06 Transitions
Fast: 150ms
Normal: 250ms
Slow: 350ms
*/

/* ===========================================
   CSS CUSTOM PROPERTIES (VARIABLES)
   =========================================== */
:root {
   /* Colors */
   --color-primary: #2f3c69;
   --color-primary-dark: #24345a;
   --color-primary-darker: #1b2540;
   --color-secondary: #4a5a8a;
   --color-accent: #6a8cbc;

   --color-bg-light: #f9f9fb;
   --color-bg-lighter: #ffffff;
   --color-bg-dark: #e8ecf5;

   --color-text-primary: #212121;
   --color-text-secondary: #555555;
   --color-text-tertiary: #757575;

   /* Shadows */
   --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
   --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
   --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
   --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

   /* Border Radius */
   --radius-sm: 6px;
   --radius-md: 8px;
   --radius-lg: 12px;
   --radius-xl: 16px;
   --radius-round: 9999px;

   /* Transitions */
   --transition-fast: 150ms ease-in-out;
   --transition-normal: 250ms ease-in-out;
   --transition-slow: 350ms ease-in-out;

   /* Z-index layers */
   --z-dropdown: 1000;
   --z-sticky: 1020;
   --z-fixed: 1030;
   --z-modal: 1040;
   --z-tooltip: 1050;
}

/* ===========================================
   RESET & BASE STYLES
   =========================================== */
*,
*::before,
*::after {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
}

html {
   font-size: 62.5%; /* 1rem = 10px for easy calculations */
   overflow-x: hidden;
   scroll-behavior: smooth;
   /* Improved text rendering */
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

body {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Rubik", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
      "Helvetica Neue", sans-serif;
   line-height: 1.6;
   font-weight: 400;
   color: var(--color-text-primary);
   background-color: var(--color-bg-lighter);
   min-height: 100vh;
   display: flex;
   flex-direction: column;
}

main {
   flex: 1; /* Sticky footer solution */
}

/* ===========================================
   ACCESSIBILITY IMPROVEMENTS
   =========================================== */

/* Skip to main content link for keyboard users */
.skip-to-main {
   position: absolute;
   top: -100px;
   left: 0;
   background: var(--color-primary);
   color: white;
   padding: 1rem 2rem;
   text-decoration: none;
   z-index: var(--z-tooltip);
   border-radius: var(--radius-md);
}

.skip-to-main:focus {
   top: 1rem;
   left: 1rem;
}

/* Focus visible for better keyboard navigation */
*:focus-visible {
   outline: 3px solid var(--color-accent);
   outline-offset: 3px;
   border-radius: var(--radius-sm);
}

/* Remove default focus outline but keep for keyboard users */
*:focus:not(:focus-visible) {
   outline: none;
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
   *,
   *::before,
   *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
   }
}

/* ===========================================
   UTILITY CLASSES
   =========================================== */

/* Screen reader only content */
.sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border-width: 0;
}

/* Responsive images */
img,
picture,
video,
canvas,
svg {
   display: block;
   max-width: 100%;
   height: auto;
}

/* Remove default button styles */
button {
   font-family: inherit;
   cursor: pointer;
}

/* Improve form elements */
input,
button,
textarea,
select {
   font: inherit;
}

/* Better list defaults */
ul[role="list"],
ol[role="list"] {
   list-style: none;
}

/* Better link defaults */
a {
   color: inherit;
   text-decoration: none;
}

/* Prevent text overflow */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
   overflow-wrap: break-word;
   hyphens: auto;
}