/*
  styles.css — Google Material Design inspired
  - Clean palette with Google blue primary
  - Roboto/system font stack for performance
  - Elevation-based shadows (Material Design)
  - Responsive grid, generous spacing
  - Smooth micro-interactions respecting reduced-motion
  - Dark mode via prefers-color-scheme OR manual toggle OR time-based (18h-6h)
*/

:root{
  /* Google-inspired palette - Light theme */
  --primary:#1a73e8;      /* Google Blue */
  --primary-dark:#1557b0;
  --primary-light:#4285f4;
  --surface:#ffffff;
  --background:#f8f9fa;
  --on-surface:#202124;
  --on-surface-variant:#5f6368;
  --outline:#dadce0;
  --error:#d93025;
  --success:#1e8e3e;
  
  /* Elevation shadows (Material) - Light */
  --elevation-1: 0 1px 2px 0 rgba(60,64,67,0.3), 0 1px 3px 1px rgba(60,64,67,0.15);
  --elevation-2: 0 1px 2px 0 rgba(60,64,67,0.3), 0 2px 6px 2px rgba(60,64,67,0.15);
  --elevation-3: 0 4px 8px 3px rgba(60,64,67,0.15), 0 1px 3px 0 rgba(60,64,67,0.3);
  
  /* Spacing */
  --space-xs:4px;
  --space-sm:8px;
  --space-md:16px;
  --space-lg:24px;
  --space-xl:32px;
  
  /* Typography scale (Google Product Sans inspired) */
  --text-display:2rem;
  --text-headline:1.5rem;
  --text-title:1.25rem;
  --text-body:1rem;
  --text-caption:0.875rem;
  
  /* Radius */
  --radius-sm:4px;
  --radius-md:8px;
  --radius-lg:12px;
}

/* Dark theme - applied via .dark-theme class OR prefers-color-scheme */
@media (prefers-color-scheme:dark){
  :root:not(.light-theme){
    --primary:#8ab4f8;
    --primary-dark:#669df6;
    --surface:#202124;
    --background:#17181a;
    --on-surface:#e8eaed;
    --on-surface-variant:#9aa0a6;
    --outline:#5f6368;
    --elevation-1: 0 1px 2px 0 rgba(0,0,0,0.3), 0 1px 3px 1px rgba(0,0,0,0.15);
    --elevation-2: 0 1px 2px 0 rgba(0,0,0,0.3), 0 2px 6px 2px rgba(0,0,0,0.15);
    --elevation-3: 0 4px 8px 3px rgba(0,0,0,0.15), 0 1px 3px 0 rgba(0,0,0,0.3);
  }
}

/* Force dark theme via class (used by JS for time-based switching) */
html.dark-theme{
  --primary:#8ab4f8;
  --primary-dark:#669df6;
  --surface:#202124;
  --background:#17181a;
  --on-surface:#e8eaed;
  --on-surface-variant:#9aa0a6;
  --outline:#5f6368;
  --elevation-1: 0 1px 2px 0 rgba(0,0,0,0.3), 0 1px 3px 1px rgba(0,0,0,0.15);
  --elevation-2: 0 1px 2px 0 rgba(0,0,0,0.3), 0 2px 6px 2px rgba(0,0,0,0.15);
  --elevation-3: 0 4px 8px 3px rgba(0,0,0,0.15), 0 1px 3px 0 rgba(0,0,0,0.3);
}

/* Force light theme via class */
html.light-theme{
  --primary:#1a73e8;
  --primary-dark:#1557b0;
  --primary-light:#4285f4;
  --surface:#ffffff;
  --background:#f8f9fa;
  --on-surface:#202124;
  --on-surface-variant:#5f6368;
  --outline:#dadce0;
  --elevation-1: 0 1px 2px 0 rgba(60,64,67,0.3), 0 1px 3px 1px rgba(60,64,67,0.15);
  --elevation-2: 0 1px 2px 0 rgba(60,64,67,0.3), 0 2px 6px 2px rgba(60,64,67,0.15);
  --elevation-3: 0 4px 8px 3px rgba(60,64,67,0.15), 0 1px 3px 0 rgba(60,64,67,0.3);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;scroll-behavior:smooth}

/* Smooth theme transitions */
html{
  transition:background-color 0.3s ease, color 0.3s ease;
}

body{
  font-family:'Google Sans', Roboto, 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  font-size:var(--text-body);
  line-height:1.5;
  color:var(--on-surface);
  background:var(--background);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  transition:background-color 0.3s ease, color 0.3s ease;
}

/* Layout */
.wrap{
  max-width:1200px;
  margin:0 auto;
  padding:var(--space-lg);
}

.app-header{
  margin-bottom:var(--space-xl);
}

.app-title{
  font-size:var(--text-headline);
  font-weight:400;
  color:var(--on-surface);
  margin-bottom:var(--space-xs);
  letter-spacing:-0.02em;
}

.lead{
  font-size:var(--text-body);
  color:var(--on-surface-variant);
  font-weight:400;
}

/* Main grid: form + results side-by-side */
#calculator{
  display:grid;
  grid-template-columns:1fr 420px;
  gap:var(--space-lg);
  align-items:start;
  margin-bottom:var(--space-lg);
}

/* Cards with Material elevation */
.card{
  background:var(--surface);
  border-radius:var(--radius-lg);
  padding:var(--space-lg);
  box-shadow:var(--elevation-1);
  border:1px solid var(--outline);
  transition:box-shadow 0.2s cubic-bezier(0.4,0,0.2,1), background-color 0.3s ease, border-color 0.3s ease;
}

.card:hover{
  box-shadow:var(--elevation-2);
}

/* Theme toggle button */
#themeToggle{
  padding:8px;
  min-width:auto;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
}

#themeToggle svg{
  transition:transform 0.3s ease;
}

#themeToggle:hover svg{
  transform:rotate(20deg);
}

html.dark-theme #themeToggle svg{
  fill:var(--primary);
}

/* Form layout */
.form .grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:var(--space-md);
  margin-bottom:var(--space-md);
}

label{
  display:block;
  font-size:var(--text-caption);
  font-weight:500;
  color:var(--on-surface);
  margin-bottom:var(--space-xs);
  letter-spacing:0.01em;
}

input, select{
  width:100%;
  padding:12px 16px;
  border:1px solid var(--outline);
  border-radius:var(--radius-sm);
  background:var(--surface);
  color:var(--on-surface);
  font-size:var(--text-body);
  font-family:inherit;
  transition:border-color 0.2s, box-shadow 0.2s, background-color 0.3s ease, color 0.3s ease;
}

input::placeholder{
  color:var(--on-surface-variant);
  opacity:0.6;
}

input:hover, select:hover{
  border-color:var(--on-surface);
}

input:focus, select:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 4px rgba(26,115,232,0.1);
}

/* Buttons - Material style */
.form-actions{
  display:flex;
  gap:var(--space-sm);
  margin-top:var(--space-lg);
  flex-wrap:wrap;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-xs);
  padding:10px 24px;
  border:none;
  border-radius:var(--radius-sm);
  font-size:var(--text-body);
  font-weight:500;
  font-family:inherit;
  cursor:pointer;
  transition:background 0.2s, box-shadow 0.2s, transform 0.1s;
  text-transform:none;
  letter-spacing:0.02em;
}

.btn:active{
  transform:translateY(1px);
}

.btn.primary{
  background:var(--primary);
  color:#fff;
  box-shadow:0 1px 2px 0 rgba(60,64,67,0.3), 0 1px 3px 1px rgba(60,64,67,0.15);
}

.btn.primary:hover{
  background:var(--primary-dark);
  box-shadow:0 1px 3px 0 rgba(60,64,67,0.3), 0 4px 8px 3px rgba(60,64,67,0.15);
}

.btn.primary:focus{
  outline:none;
  box-shadow:0 0 0 4px rgba(26,115,232,0.2);
}

.btn:not(.primary){
  background:transparent;
  color:var(--primary);
  border:1px solid var(--outline);
}

.btn:not(.primary):hover{
  background:rgba(26,115,232,0.04);
}

.btn.link{
  border:none;
  color:var(--on-surface-variant);
  padding:8px 12px;
}

.btn.link:hover{
  background:rgba(95,99,104,0.04);
}

.required{
  color:var(--error);
  font-weight:500;
}

/* Results section */
.card.results{
  min-height:200px;
}

.results h2{
  font-size:var(--text-title);
  font-weight:400;
  color:var(--on-surface);
  margin-bottom:var(--space-md);
}

.results h3{
  font-size:var(--text-body);
  font-weight:500;
  color:var(--on-surface);
  margin-top:var(--space-md);
  margin-bottom:var(--space-sm);
  padding-top:var(--space-sm);
  border-top:1px solid var(--outline);
}

.results h3:first-of-type{
  border-top:none;
  margin-top:0;
  padding-top:0;
}

.results p{
  font-size:var(--text-body);
  color:var(--on-surface-variant);
  margin-bottom:var(--space-sm);
  line-height:1.6;
}

.results p strong{
  color:var(--on-surface);
  font-weight:500;
}

.muted, small.muted{
  color:var(--on-surface-variant);
  font-size:var(--text-caption);
}

/* Notes section */
.notes h3{
  font-size:var(--text-body);
  font-weight:500;
  margin-bottom:var(--space-sm);
}

.notes ul{
  padding-left:var(--space-lg);
  color:var(--on-surface-variant);
  font-size:var(--text-caption);
  line-height:1.6;
}

.notes ul li{
  margin-bottom:var(--space-xs);
}

/* Persist checkbox */
.persist{
  display:flex;
  align-items:center;
  gap:var(--space-sm);
  margin-top:var(--space-md);
  font-size:var(--text-caption);
  color:var(--on-surface-variant);
}

.persist input[type="checkbox"]{
  width:auto;
  margin:0;
}

/* Ad reserved space */
.ad-reserved{
  height:90px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--on-surface-variant);
  font-size:var(--text-caption);
  background:rgba(95,99,104,0.04);
}

/* Footer */
.foot{
  text-align:center;
  font-size:var(--text-caption);
  color:var(--on-surface-variant);
  padding:var(--space-lg) 0;
  border-top:1px solid var(--outline);
  margin-top:var(--space-xl);
}

/* Sticky results on desktop */
@media (min-width:900px){
  .card.results{
    position:sticky;
    top:var(--space-lg);
  }
}

/* Responsive: stack on mobile */
@media (max-width:899px){
  #calculator{
    grid-template-columns:1fr;
  }
  .form .grid{
    grid-template-columns:1fr;
  }
  .wrap{
    padding:var(--space-md);
  }
  .app-title{
    font-size:var(--text-title);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  *{
    transition:none !important;
    animation:none !important;
  }
  html{
    scroll-behavior:auto;
  }
  #themeToggle svg{
    transition:none !important;
  }
}