:root {
  --bg: radial-gradient(circle at 10% 10%, #e5fcff 0%, #f1fbfd 34%, #f7fdfe 100%);
  --text: #10323a;
  --muted: #5f7a80;
  --line: #c7e6ea;
  --accent: #20c3d0;
  --accent-2: #76dfe2;
  --safe-bg: #def9ed;
  --safe-ink: #106447;
  --danger-bg: #ffe4e6;
  --danger-ink: #96253a;
  --warn-bg: #fff3d8;
  --warn-ink: #915d00;
}

.hero-surface {
  background:
    radial-gradient(circle at 80% -10%, rgba(32, 195, 208, 0.35), transparent 40%),
    radial-gradient(circle at -20% 20%, rgba(118, 223, 226, 0.32), transparent 40%),
    #f5fdfe;
}