/* =========================================================
   VARIÁVEIS GLOBAIS (CSS Custom Properties)
   Definem a paleta de cores e valores reutilizáveis.
   Altere aqui para mudar o tema inteiro de uma vez.
   ========================================================= */
:root {
  --bg:            #0f0f0f;        /* fundo da página */
  --surface:       #1a1a1a;        /* fundo da calculadora */
  --surface-light: #242424;        /* fundo dos botões numéricos */
  --surface-hover: #2e2e2e;        /* hover dos botões numéricos */
  --op-bg:         #1f1f1f;        /* fundo dos botões de operação */
  --op-hover:      #2a2a2a;        /* hover dos botões de operação */
  --accent:        #e8e0d0;        /* cor de destaque (bege quente) */
  --accent-dim:    #b5ad9e;        /* versão mais suave do destaque */
  --equal-bg:      #e8e0d0;        /* fundo do botão igual */
  --equal-fg:      #0f0f0f;        /* texto do botão igual */
  --action-bg:     #1f1f1f;        /* fundo dos botões C e ← */
  --action-fg:     #e05c5c;        /* cor do texto de C e ← */
  --text-primary:  #f0ece4;        /* texto principal */
  --text-secondary:#6b6560;        /* texto secundário / histórico */
  --radius:        28px;           /* arredondamento da calculadora */
  --btn-radius:    16px;           /* arredondamento dos botões */
  --gap:           10px;           /* espaço entre botões */
  --shadow: 0 32px 64px rgba(0,0,0,.55), 0 8px 24px rgba(0,0,0,.4);
  --font-main:     'DM Mono', monospace;
  --font-ui:       'DM Sans', sans-serif;
}

/* =========================================================
   RESET BÁSICO
   Remove estilos padrão do navegador para começarmos do zero.
   ========================================================= */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* =========================================================
   PÁGINA INTEIRA
   ========================================================= */
body {
  min-height: 100dvh;               /* altura da tela inteira */
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg);
  /* grade de pontos sutis no fundo */
  background-image: radial-gradient(circle, #2a2a2a 1px, transparent 1px);
  background-size: 28px 28px;
  font-family: var(--font-main);
  -webkit-font-smoothing: antialiased;
}

/* =========================================================
   WRAPPER
   Centraliza e limita a largura máxima da calculadora.
   ========================================================= */
.wrapper {
  width: 100%;
  max-width: 360px;
  padding: 20px;
}

/* =========================================================
   CALCULADORA (caixa principal)
   ========================================================= */
.calculator {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(255,255,255,.04);
  /* animação de entrada ao carregar a página */
  animation: slideUp .45s cubic-bezier(.16,1,.3,1) both;
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(28px) scale(.97); }
  to   { opacity: 1; transform: translateY(0)   scale(1);   }
}

/* =========================================================
   DISPLAY
   Área que mostra a expressão e o histórico.
   ========================================================= */
.display {
  padding: 12px 8px 20px;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 6px;
  overflow: hidden;
}

/* Texto principal (expressão sendo digitada) */
.display__expression {
  font-size: clamp(2rem, 10vw, 2.8rem); /* tamanho fluido */
  font-weight: 300;
  color: var(--text-primary);
  letter-spacing: -0.5px;
  word-break: break-all;
  text-align: right;
  line-height: 1.1;
  transition: font-size .15s ease;
}

/* Texto menor acima (mostra a conta anterior) */
.display__history {
  font-size: .85rem;
  color: var(--text-secondary);
  letter-spacing: .5px;
  min-height: 1.2em;
  transition: opacity .2s;
}

/* =========================================================
   DIVISOR fino entre display e teclado
   ========================================================= */
.keypad {
  border-top: 1px solid rgba(255,255,255,.05);
  padding-top: 14px;
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 colunas iguais */
  gap: var(--gap);
}

/* =========================================================
   BOTÕES — estilos base
   ========================================================= */
.btn {
  position: relative;
  height: 68px;
  border: none;
  border-radius: var(--btn-radius);
  font-family: var(--font-main);
  font-size: 1.15rem;
  font-weight: 400;
  cursor: pointer;
  /* garante que o clique não selecione texto */
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  /* transições suaves de cor e escala */
  transition: background .15s, transform .08s, box-shadow .15s;
  outline: none;

  /* estilo padrão: botões numéricos */
  background: var(--surface-light);
  color: var(--text-primary);
  box-shadow: 0 2px 4px rgba(0,0,0,.3);
}

/* Efeito de pressão (feedback visual) */
.btn:active {
  transform: scale(.93);
  box-shadow: none;
}

/* Hover nos botões numéricos */
.btn:hover {
  background: var(--surface-hover);
}

/* =========================================================
   VARIANTES DE BOTÃO
   ========================================================= */

/* Operadores (÷, ×, −, +, %) */
.btn--op {
  background: var(--op-bg);
  color: var(--accent);
  font-size: 1.25rem;
}
.btn--op:hover { background: var(--op-hover); }

/* Ações (C, ←, +/−) */
.btn--action {
  background: var(--action-bg);
  color: var(--action-fg);
  font-size: 1rem;
}
.btn--action:hover { background: var(--op-hover); }

/* Botão IGUAL — destaque principal */
.btn--equal {
  background: var(--equal-bg);
  color: var(--equal-fg);
  font-size: 1.3rem;
  font-weight: 500;
  /* brilho suave no hover */
  box-shadow: 0 0 0 0 rgba(232,224,208,.0);
  transition: background .2s, transform .08s, box-shadow .3s;
}
.btn--equal:hover {
  background: #f5eede;
  box-shadow: 0 0 22px 4px rgba(232,224,208,.18);
}
.btn--equal:active {
  transform: scale(.93);
  box-shadow: none;
}

/* =========================================================
   RIPPLE — ondinha de clique
   ========================================================= */
.ripple {
  position: absolute;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  background: rgba(255,255,255,.12);
  transform: scale(0);
  pointer-events: none;
  animation: ripple .45s linear;
  margin-top: -40px;
  margin-left: -40px;
}

@keyframes ripple {
  to { transform: scale(2.5); opacity: 0; }
}

/* =========================================================
   RESPONSIVIDADE — telas muito pequenas
   ========================================================= */
@media (max-width: 360px) {
  .wrapper { padding: 10px; }
  .btn { height: 58px; font-size: 1rem; }
  .display__expression { font-size: 2rem; }
}