/* ========================================
   Base CSS - T&R Cleaning Service KG
   ======================================== */

/* Brand Color Variables */
:root {
  --tr-red: #D83E26;
  --tr-dark: #332f30;
  --tr-pink: #ffa5b1;
  --tr-danger: #dc3545;
  --tr-white: #ffffff;
  --tr-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  --tr-shadow-hover: 0 4px 8px rgba(0, 0, 0, 0.2);
  
  /* Spacing & Layout */
  --tr-spacing-sm: 0.5rem;
  --tr-spacing-md: 1rem;
  --tr-spacing-lg: 1.5rem;
  --tr-spacing-xl: 3rem;
  
  /* Border Radius */
  --tr-radius-sm: 0.25rem;
  --tr-radius-md: 0.375rem;
  --tr-radius-lg: 0.5rem;
  --tr-radius-xl: 1rem;
  
  /* Transitions */
  --tr-transition-fast: 0.15s ease;
  --tr-transition-normal: 0.3s ease;
  --tr-transition-slow: 0.5s ease;
}

/* Reset & Base Styles */
* {
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  color: var(--tr-dark);
  margin: 0;
  padding: 0;
}

/* Smooth Scrolling */
html {
  scroll-behavior: smooth;
}

/* Focus Visible Styles */
:focus-visible {
  outline: 2px solid var(--tr-red);
  outline-offset: 2px;
}

/* Skip Link for Accessibility */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--tr-red);
  color: white;
  padding: 8px;
  text-decoration: none;
  z-index: 1000;
}

.skip-link:focus {
  top: 0;
}

/* Responsive Typography */
@media (max-width: 576px) {
  body {
    font-size: 0.9375rem;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  body {
    font-size: 1rem;
  }
}

@media (min-width: 992px) {
  body {
    font-size: 1.0625rem;
  }
}

/* Main Content Area */
main {
  position: relative;
  z-index: 1;
}

/* Footer Base Styles */
footer {
  background-color: var(--tr-dark);
  color: var(--tr-white);
  padding: var(--tr-spacing-xl) 0;
  margin-top: var(--tr-spacing-xl);
}

/* Ensure muted text in the footer stays readable on the dark background */
footer .text-muted {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* Text Selection */
::selection {
  background-color: var(--tr-pink);
  color: var(--tr-dark);
}