/* CSS Variables for theming */
:root {
  /* Light theme colors */
  --bg-primary: #4A90E2;
  --calc-bg-light: rgba(255, 255, 255, 0.25);
  --calc-bg-dark: rgba(0, 0, 0, 0.25);
  --calc-shadow: rgba(0, 0, 0, 0.1);
  --text-primary: #333;
  --text-secondary: #666;
  --text-light: #fff;
  --btn-number-bg: rgba(255, 255, 255, 0.8);
  --btn-operator-bg: rgba(100, 150, 200, 0.8);
  --btn-equals-bg: #4A90E2;
  --btn-shadow: rgba(0, 0, 0, 0.1);
  --btn-inset: rgba(255, 255, 255, 0.3);
}

/* Dark theme colors */
[data-theme="dark"] {
  --calc-bg-light: rgba(0, 0, 0, 0.4);
  --calc-bg-dark: rgba(0, 0, 0, 0.4);
  --calc-shadow: rgba(0, 0, 0, 0.3);
  --text-primary: #fff;
  --text-secondary: #ccc;
  --btn-number-bg: rgba(60, 60, 60, 0.8);
  --btn-operator-bg: rgba(30, 80, 120, 0.8);
  --btn-equals-bg: #4A90E2;
  --btn-shadow: rgba(0, 0, 0, 0.3);
  --btn-inset: rgba(255, 255, 255, 0.1);
}

/* Reset and base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  background: var(--bg-primary);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  position: relative;
}

/* Theme toggle */
.theme-toggle {
  position: absolute;
  top: 2rem;
  right: 2rem;
  z-index: 10;
}

#themeBtn {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
  font-size: 1.5rem;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

#themeBtn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
}

/* Calculator container */
.calculator {
  background: linear-gradient(135deg, var(--calc-bg-light) 0%, var(--calc-bg-dark) 100%);
  backdrop-filter: blur(20px);
  border-radius: 2rem;
  padding: 2rem;
  box-shadow: 0 20px 40px var(--calc-shadow);
  border: 1px solid rgba(255, 255, 255, 0.1);
  max-width: 400px;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.calculator::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
}

/* Display area */
.display {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 1rem;
  padding: 1.5rem;
  margin-bottom: 2rem;
  text-align: right;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.equation {
  font-size: 1rem;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
  opacity: 0.8;
  font-weight: 400;
}

.result {
  font-size: 2rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1;
}

/* Button grid */
.buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 1rem;
  height: 400px;
}

/* Base button styles */
.btn {
  border: none;
  border-radius: 1rem;
  font-size: 1.2rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 
    0 4px 15px var(--btn-shadow),
    inset 0 1px 0 var(--btn-inset);
}

.btn:active {
  transform: translateY(1px);
  box-shadow: 
    0 2px 8px var(--btn-shadow),
    inset 0 1px 0 var(--btn-inset);
}

/* Number buttons */
.btn.number {
  background: var(--btn-number-bg);
  color: var(--text-primary);
}

.btn.number:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: translateY(-1px);
}

[data-theme="dark"] .btn.number:hover {
  background: rgba(80, 80, 80, 0.9);
}

/* Special function buttons */
.btn.special {
  background: var(--btn-number-bg);
  color: var(--text-primary);
  font-size: 1rem;
}

.btn.special:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: translateY(-1px);
}

[data-theme="dark"] .btn.special:hover {
  background: rgba(80, 80, 80, 0.9);
}

/* Operator buttons */
.btn.operator {
  background: var(--btn-operator-bg);
  color: var(--text-light);
  font-size: 1.3rem;
}

.btn.operator:hover {
  background: rgba(80, 130, 180, 0.9);
  transform: translateY(-1px);
}

[data-theme="dark"] .btn.operator {
  background: var(--btn-operator-bg);
}

[data-theme="dark"] .btn.operator:hover {
  background: rgba(50, 100, 140, 0.9);
}

/* Plus button */
.btn.plus {
  background: var(--btn-operator-bg);
  color: var(--text-light);
  font-size: 1.3rem;
}

.btn.plus:hover {
  background: rgba(80, 130, 180, 0.9);
  transform: translateY(-1px);
}

[data-theme="dark"] .btn.plus:hover {
  background: rgba(50, 100, 140, 0.9);
}

/* Equals button */
.btn.equals {
  background: var(--btn-equals-bg);
  color: var(--text-light);
  font-size: 1.5rem;
  font-weight: 600;
}

.btn.equals:hover {
  background: #3A7BC8;
  transform: translateY(-1px);
}

/* Zero button - spans 2 columns */
.btn.zero {
  grid-column: span 2;
}

/* Button positioning adjustments */
.buttons {
  grid-template-areas: 
    "special special special special"
    "number number number operator"
    "number number number operator"
    "number number number operator"
    "zero zero number operator";
}

.btn.special:nth-child(1) { grid-area: 1 / 1; }
.btn.special:nth-child(2) { grid-area: 1 / 2; }
.btn.special:nth-child(3) { grid-area: 1 / 3; }
.btn.special:nth-child(4) { grid-area: 1 / 4; }

.btn.number:nth-child(5) { grid-area: 2 / 1; } /* 7 */
.btn.number:nth-child(6) { grid-area: 2 / 2; } /* 8 */
.btn.number:nth-child(7) { grid-area: 2 / 3; } /* 9 */
.btn.operator:nth-child(8) { grid-area: 2 / 4; } /* / */

.btn.number:nth-child(9) { grid-area: 3 / 1; } /* 4 */
.btn.number:nth-child(10) { grid-area: 3 / 2; } /* 5 */
.btn.number:nth-child(11) { grid-area: 3 / 3; } /* 6 */
.btn.operator:nth-child(12) { grid-area: 3 / 4; } /* * */

.btn.number:nth-child(13) { grid-area: 4 / 1; } /* 1 */
.btn.number:nth-child(14) { grid-area: 4 / 2; } /* 2 */
.btn.number:nth-child(15) { grid-area: 4 / 3; } /* 3 */
.btn.operator:nth-child(16) { grid-area: 4 / 4; } /* - */

.btn.zero { grid-area: 5 / 1 / 5 / 3; } /* 0 spans 2 columns */
.btn.number:nth-child(18) { grid-area: 5 / 3; } /* . */
.btn.plus { grid-area: 4 / 4 / 5 / 4; } /* + spans 1 row */
.btn.equals { grid-area: 5 / 4 / 6 / 4; } /* = spans 1 row */

/* Responsive design */
@media (max-width: 480px) {
  body {
    padding: 1rem;
  }
  
  .calculator {
    padding: 1.5rem;
    max-width: 350px;
  }
  
  .buttons {
    gap: 0.75rem;
    height: 350px;
  }
  
  .btn {
    font-size: 1.1rem;
  }
  
  .result {
    font-size: 1.8rem;
  }
}

/* Focus styles for accessibility */
.btn:focus {
  outline: 2px solid rgba(74, 144, 226, 0.5);
  outline-offset: 2px;
}

/* Animation for button press */
@keyframes buttonPress {
  0% { transform: scale(1); }
  50% { transform: scale(0.95); }
  100% { transform: scale(1); }
}

.btn:active {
  animation: buttonPress 0.1s ease;
}