@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Archivo+Black&display=swap");

:root {
  --bg: #f2f6f8;
  --card: #ffffff;
  --ink: #0d1b1e;
  --muted: #4f646b;
  --line: #c8d6db;
  --accent: #009c7a;
  --accent-ink: #f7fffc;
}

body {
  font-family: "Space Grotesk", "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 8% 0%, #d8f4ec 0%, transparent 35%),
    radial-gradient(circle at 100% 100%, #dce9ff 0%, transparent 38%),
    var(--bg);
}

.hero h1 {
  font-family: "Archivo Black", "Arial Black", sans-serif;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.hero,
.panel {
  box-shadow: 0 10px 30px rgba(12, 31, 36, 0.08);
}

.tab {
  font-weight: 700;
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.tab:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(10, 40, 46, 0.1);
}

.tab.active {
  box-shadow: 0 10px 20px rgba(0, 156, 122, 0.35);
}

button {
  font-weight: 700;
}

button:hover:enabled {
  background: #f2fffb;
}

#startScanBtn,
.generator-form button {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}

#startScanBtn:hover:enabled,
.generator-form button:hover:enabled {
  background: #008f70;
}

#preview {
  border-top: 4px solid var(--accent);
}

.result-box {
  background: #f8fdfb;
}

#scanResult {
  color: #0b6b56;
}