:root {
  --sky: #63b5e9;
  --sun: #ffd84d;
  --grass: #73d564;
  --orange: #ff9c42;
  --berry: #ff6b8f;
  --navy: #e8f2ff;
  --cream: #0c1424;
  --card: rgba(14, 22, 38, 0.92);
  --panel: rgba(18, 28, 46, 0.94);
  --panel-strong: rgba(12, 20, 36, 0.98);
  --border-soft: rgba(138, 180, 255, 0.16);
  --shadow: 0 20px 44px rgba(0, 0, 0, 0.38);
  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 18px;
  --tap-size: 78px;
  font-family: "Trebuchet MS", "Segoe UI", "Arial Rounded MT Bold", Arial, sans-serif;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background:
    radial-gradient(circle at top left, rgba(99, 181, 233, 0.18), transparent 26%),
    radial-gradient(circle at top right, rgba(255, 216, 77, 0.12), transparent 18%),
    linear-gradient(180deg, #050914 0%, #0b1323 42%, #101a2f 100%);
  color: var(--navy);
}

body {
  padding: 16px;
}

button,
a {
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  border: 0;
  cursor: pointer;
}