:root {
    --client-bg-primary: #0F172A; 
    --client-bg-secondary: #162B1D; 
    --client-bg-tertiary: #2D4030; 
    
    --client-text-primary: #F1F5F9;
    --client-text-secondary: #CBD5E1; 
    
    --client-accent-primary: #D42426; 
    --client-accent-secondary: #1E5935; 
    --client-accent-gold: #FFD700;
    
    --client-font-family: 'Lato', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body.client-light-theme {
    --client-bg-primary: #FFFFFF; 
    --client-bg-secondary: #F8F9FA; 
    --client-bg-tertiary: #E2E8F0; 
    
    --client-text-primary: #162B1D; 
    --client-text-secondary: #475569; 
    
    --client-accent-primary: #C41E3A; 
    --client-accent-secondary: #2E8B57;
}

body {
    font-family: var(--client-font-family);
    background-color: var(--client-bg-primary);
    color: var(--client-text-primary);
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: background-color 0.3s, color 0.3s;
}

main {
    flex-grow: 1;
    padding: 20px 0;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

.switch {
  font-size: 14px;
  position: relative;
  display: inline-block;
  width: 3.5em;
  height: 2em;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  border: 2px solid var(--client-bg-tertiary);
  border-radius: 50px;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.slider:before {
  position: absolute;
  content: "";
  height: 1.4em;
  width: 1.4em;
  left: 0.2em;
  bottom: 0.2em;
  background-color: var(--client-text-primary);
  border-radius: inherit;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);
}

body.client-light-theme .slider:before {
    background-color: var(--client-text-primary);
}

.switch input:checked + .slider {
  box-shadow: 0 0 10px var(--client-accent-primary);
  border: 2px solid var(--client-accent-primary);
}

.switch input:checked + .slider:before {
  transform: translateX(1.5em);
}