/* ================================================
   Stephanie Daniel Ugbedeojo — SEN 482 Calculator
   Light Mode — Clean & Professional
   ================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:           #f0f4ff;
  --surface:      #ffffff;
  --surface2:     #f8f9ff;
  --border:       #dde2f0;
  --shadow:       0 20px 60px rgba(80,90,160,0.13);
  --shadow-btn:   0 2px 8px rgba(80,90,160,0.10);
  --text:         #1a1d2e;
  --text-muted:   #7880a0;
  --text-display: #1a1d2e;

  --euler:        #d97706;
  --euler-bg:     #fffbeb;
  --euler-border: #fcd34d;
  --euler-strip:  #fef3c7;

  --op:           #4f46e5;
  --op-light:     #eef2ff;
  --op-border:    #c7d2fe;

  --eq:           #059669;
  --eq-light:     #ecfdf5;

  --clear:        #dc2626;
  --clear-light:  #fef2f2;

  --num-bg:       #f8f9ff;
  --num-hover:    #eef0ff;
  --util-bg:      #f1f5f9;
  --util-hover:   #e2e8f0;

  --radius:       13px;
  --font-mono:    'Space Mono', monospace;
  --font-sans:    'DM Sans', sans-serif;
}

body {
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  color: var(--text);
  padding: 24px 16px;
}

/* ── App wrapper ── */
.app-wrapper {
  width: 100%;
  max-width: 360px;
}

/* ── Header ── */
.calc-header {
  text-align: center;
  margin-bottom: 18px;
}
.header-inner { display: flex; flex-direction: column; gap: 3px; }

.header-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.header-name {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}
.header-tag {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--euler);
  letter-spacing: 0.06em;
  font-weight: 700;
}

/* ── Card ── */
.calc-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 22px;
}

/* ── Display ── */
.display-area {
  background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px 16px;
  margin-bottom: 18px;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.display-hint {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text-muted);
  text-align: right;
  min-height: 14px;
  margin-bottom: 4px;
}
.display-expr {
  font-family: var(--font-mono);
  font-size: 2.1rem;
  font-weight: 700;
  text-align: right;
  color: var(--text-display);
  word-break: break-all;
  line-height: 1.15;
  transition: font-size 0.1s;
}
.display-expr.small  { font-size: 1.4rem; }
.display-expr.xsmall { font-size: 1.1rem; }

/* ── Button grid ── */
.btn-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
}

/* ── Base button ── */
.btn {
  height: 64px;
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.08s, box-shadow 0.12s, background 0.1s;
  border: 1.5px solid var(--border);
  color: var(--text);
  background: var(--num-bg);
  box-shadow: var(--shadow-btn);
  user-select: none;
}
.btn:hover  { background: var(--num-hover); box-shadow: 0 4px 16px rgba(80,90,160,0.14); }
.btn:active { transform: scale(0.93); box-shadow: none; }

/* Number */
.btn-num { background: var(--num-bg); }
.btn-num:hover { background: var(--num-hover); }

/* Operator */
.btn-op {
  background: var(--op-light);
  border-color: var(--op-border);
  color: var(--op);
}
.btn-op:hover { background: #e0e7ff; }

/* Equals */
.btn-equals {
  background: var(--eq);
  border-color: var(--eq);
  color: #fff;
  font-size: 1.2rem;
}
.btn-equals:hover { background: #047857; box-shadow: 0 4px 18px rgba(5,150,105,0.28); }

/* Clear */
.btn-clear {
  background: var(--clear-light);
  border-color: #fca5a5;
  color: var(--clear);
}
.btn-clear:hover { background: #fee2e2; }

/* Util (backspace) */
.btn-util {
  background: var(--util-bg);
  border-color: #cbd5e1;
  color: var(--text-muted);
  font-size: 1.2rem;
}
.btn-util:hover { background: var(--util-hover); }

/* Euler */
.btn-euler {
  background: var(--euler-bg);
  border-color: var(--euler-border);
  color: var(--euler);
}
.btn-euler:hover { background: #fef3c7; box-shadow: 0 4px 16px rgba(217,119,6,0.18); }
.btn-euler sup { font-size: 0.6em; vertical-align: super; }

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

/* ── Euler info strip ── */
.euler-strip {
  margin-top: 13px;
  padding: 9px 14px;
  background: var(--euler-strip);
  border: 1px solid var(--euler-border);
  border-radius: 10px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: #92400e;
  display: flex;
  align-items: center;
  gap: 8px;
}
.euler-icon {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--euler);
  background: #fde68a;
  border-radius: 6px;
  padding: 1px 7px;
}

/* ── Responsive ── */
@media (max-width: 400px) {
  .btn { height: 56px; font-size: 0.9rem; }
  .display-expr { font-size: 1.75rem; }
  .calc-card { padding: 14px; }
  .btn-grid { gap: 7px; }
}